当前位置: article > 正文

使用flutter_zoom_drawer实现带动画效果的抽屉_flutter 抽屉

作者：不正经 | 2024-05-26 20:08:02

踩

flutter 抽屉

使用到的第三方库：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  get: ^4.6.5
  flutter_zoom_drawer: ^3.0.4+1
1
2
3
4
5
6
7

参考资料：https://www.youtube.com/watch?v=Evu19gTKaFo&t=187s
建议先看视频。

其中，只有get和flutter_zoom_drawer是手动引入的，get用于状态管理，而 flutter_zoom_drawer就是实现动画抽屉效果的核心。

纯粹为了方便，我就把所有类都写到main.dart中了。（文末有源码）

首先构建四个基本的界面：
1、MyHomePage：用于承载各个页面；
2、MenuScreen：用于显示抽屉菜单；
3、MainScreen：抽屉菜单对应的界面一；
4、SecondScreen：抽屉菜单对应的界面二；
用最终的效果来说明各个界面的位置：

请添加图片描述
点击menu1就进入MainScreen；
点击menu2就进入SecondScreen；
在这里插入图片描述
（如果要让背景颜色统一，只需要修改一下对应界面的backgroundcolor即可。）
接下来开始代码部分：
MyHomePage作为承载页面的页面，要把它设置成APP的入口：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zoom Drawer Demo',
      home: MyHomePage(),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

MyHomePage:

class MyHomePage extends StatelessWidget {

  MyDrawerController controller = Get.put(MyDrawerController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MyDrawerController>(
      builder: (_) => ZoomDrawer(
        //第三方库自带的属性
        controller: _.zoomDrawerController, 
        //getScreen方法见下方
        mainScreen: getScreen(_.currentItem),
        menuScreen: Builder(builder: (context) {
          return MenuScreen(
              //构造函数需要一个currentItem，用于menuScreen的被选中项目的高亮（就是图标为绿色状态）
              currentItem: _.currentItem,
              ///还需要一个回调函数，用于更改要显示的页面，在menuScreen中点击某个菜单选项后，调用该回调，currentItem的值
              ///被更新，由于setCurrentItem方法中手动调用了update()，界面会重新渲染，经过getScreen(_.currentItem)后，渲染currentItem指向的界面。
              onItemSelected: (item) {
                _.setCurrentItem(item);
                //切换后需要手动调用方法关闭抽屉
                ZoomDrawer.of(context)!.close();
              });
        }),
        //以下这些设置样式的属性可参考官方文档
        borderRadius: 25.0,
        angle: 0,
        slideWidth: MediaQuery.of(context).size.width * 0.65,
      ),
    );
  }

  //因为只有两个页面需要切换，所以就用if-else了，更多页面需要Switch去判断。
  Widget getScreen(MenuItem item) {
    if (item == MenuItems.menu1) {
      return MainScreen();
    } else {
      return SecondScreen();
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

注意一个小细节：
上面代码中有一行， menuScreen: Builder(builder: (context) {
之所以要用Builder额外包裹一层，是因为保证context的正确指向，必不可少
自定义menu菜单的样式：

class MenuItem {
  String title;
  IconData icon;

  MenuItem(this.title, this.icon);
}

class MenuItems {
  static MenuItem menu1 = MenuItem("menu1", Icons.info_outline);
  static MenuItem menu2 = MenuItem("menu2", Icons.info_outline);

  static var menuList = [menu1, menu2];
}
1
2
3
4
5
6
7
8
9
10
11
12
13

MainScreen,SecondScreen基本是一样的，直接贴代码了：


class MainScreen extends StatelessWidget {
  MyDrawerController controller = Get.put(MyDrawerController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              // onPressed: controller.toggleDrawer,
              onPressed: (){
                controller.toggleDrawer();
              },
              child: Text("MainScreen的打开抽屉按钮"),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  MyDrawerController controller = Get.put(MyDrawerController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: controller.toggleDrawer,
              child: Text("SecondScreen的打开抽屉按钮"),
            ),

          ],
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

最后是控制器方法：

class MyDrawerController extends GetxController {
  MenuItem currentItem = MenuItems.menu1;

  //主要是使用其中的toogle(),close()方法，分别对应打开、关闭Drawer。
  final zoomDrawerController = ZoomDrawerController();


  //用于打开抽屉
  void toggleDrawer() {
    zoomDrawerController.toggle!();
    //注意一定要手动调用update！！
    update();
  }

  //用于MenuScreen的选中状态回显
  void setCurrentItem(MenuItem item) {
    currentItem = item;
    //注意一定要手动调用update！！
    update();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

最后的最后是完整代码：

import 'package:drawer_demo/teacher.dart';
import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/config.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
import 'package:get/get.dart';

void main() {


  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zoom Drawer Demo',
      home: MyHomePage(),
    );
  }
}

class MenuItem {
  String title;
  IconData icon;

  MenuItem(this.title, this.icon);
}

class MenuItems {
  static MenuItem menu1 = MenuItem("menu1", Icons.info_outline);
  static MenuItem menu2 = MenuItem("menu2", Icons.info_outline);

  static var menuList = [menu1, menu2];
}

class MyHomePage extends StatelessWidget {

  MyDrawerController controller = Get.put(MyDrawerController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MyDrawerController>(
      builder: (_) => ZoomDrawer(
        //第三方库自带的属性
        controller: _.zoomDrawerController,
        //getScreen方法见下方
        mainScreen: getScreen(_.currentItem),
        menuScreen: Builder(builder: (context) {
          return MenuScreen(
              //构造函数需要一个currentItem，用于menuScreen的被选中项目的高亮（就是图标为绿色状态）
              currentItem: _.currentItem,
              ///还需要一个回调函数，用于更改要显示的页面，在menuScreen中点击某个菜单选项后，调用该回调，currentItem的值
              ///被更新，由于setCurrentItem方法中手动调用了update()，界面会重新渲染，经过getScreen(_.currentItem)后，渲染currentItem指向的界面。
              onItemSelected: (item) {
                _.setCurrentItem(item);
                //切换后需要手动调用方法关闭抽屉
                ZoomDrawer.of(context)!.close();
              });
        }),
        //以下这些设置样式的属性可参考官方文档
        borderRadius: 25.0,
        angle: 0,
        slideWidth: MediaQuery.of(context).size.width * 0.65,
      ),
    );
  }

  //因为只有两个页面需要切换，所以就用if-else了，更多页面需要Switch去判断。
  Widget getScreen(MenuItem item) {
    if (item == MenuItems.menu1) {
      return MainScreen();
    } else {
      return SecondScreen();
    }
  }
}

class MenuScreen extends StatelessWidget {
  final MenuItem currentItem;
  final ValueChanged<MenuItem> onItemSelected;

  const MenuScreen(
      {Key? key, required this.currentItem, required this.onItemSelected})
      : super(key: key);

  Widget buildMenuItem(MenuItem item) {
    return ListTile(
      selectedTileColor: Colors.lightGreen,
      selectedColor: Colors.lightGreen,
      selected: currentItem == item,
      leading: Icon(item.icon),
      title: Text(
        item.title,
        style: TextStyle(fontSize: 25, color: Colors.black),
      ),
      onTap: () {
        onItemSelected(item);
        print("in MenuScreen: " + item.title);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 30),
      color: Colors.white,
      child: Center(
        child: Column(
          children: [
            ...MenuItems.menuList.map((item) => buildMenuItem(item)).toList(),
          ],
        ),
      ),
    );
  }
}


class MainScreen extends StatelessWidget {
  MyDrawerController controller = Get.put(MyDrawerController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              // onPressed: controller.toggleDrawer,
              onPressed: (){
                controller.toggleDrawer();
              },
              child: Text("MainScreen的打开抽屉按钮"),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  MyDrawerController controller = Get.put(MyDrawerController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: controller.toggleDrawer,
              child: Text("SecondScreen的打开抽屉按钮"),
            ),

          ],
        ),
      ),
    );
  }
}

class MyDrawerController extends GetxController {
  MenuItem currentItem = MenuItems.menu1;

  //主要是使用其中的toogle(),close()方法，分别对应打开、关闭Drawer。
  final zoomDrawerController = ZoomDrawerController();


  //用于打开抽屉
  void toggleDrawer() {
    zoomDrawerController.toggle!();
    //注意一定要手动调用update！！
    update();
  }

  //用于MenuScreen的选中状态回显
  void setCurrentItem(MenuItem item) {
    currentItem = item;
    //注意一定要手动调用update！！
    update();
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

不足的地方：
1、每个page都new了一个新的 MyDrawerController实例，有点浪费；
2、没有使用Obx（）、GetX等等去包裹需要响应式渲染的部分，不知道性能会不会有问题；
当然，这只是demo，正式使用时要考虑更多。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/628199