在iOS原生开发中,实现抽屉视图还是比较麻烦的,有时还需要借助第三方组件来实现。但是在Flutter中,我们利用Drawer组件就可以很轻松实现抽屉视图。
简而言之就是,新建一个Drawer组件,然后配置给Scaffold组件的drawer属性,这样就实现侧边栏抽屉视图了。
效果如下:
关于上面代码,有以下几点需要说明:
1,通过配置Scaffold的drawer属性,我们可以实现左侧侧边栏;通过配置Scaffold的endDrawer属性,我们可以实现右侧侧边栏。
2,配置了Scaffold的drawer属性或者endDrawer属性之后,flutter会自动帮我们在顶部导航栏的左侧或者右侧加上一个按钮,如下图所示:
3,抽屉视图通过Drawer组件来实现。
4,我们可以自己来配置抽屉视图,一般是通过Column组件来定义侧边栏的内容。
5,Divider组件可以用来实现分割线。
6,可以通过DrawerHeader或者UserAccountsDrawerHeader组件来实现抽屉视图的头部。DrawerHeader可以自定义,想实现啥功能就实现啥功能;而UserAccountsDrawerHeader的布局、样式和内容是固定的,如果对个性化要求不高,个人还是倾向于使用UserAccountsDrawerHeader。
7,无论是DrawerHeader还是UserAccountsDrawerHeader组件,我们都可以使用decoration来装饰,可以用BoxDecoration来配置侧边栏头部的背景颜色、背景图片等。
8,可以通过配置ListTile的onTap来监听ListTile的点击事件。
9,当点击抽屉视图中的某个组件来跳转到另外一个页面,然后从这个页面返回的时候,默认情况下,抽屉视图是不会消失的,也就是说,再返回回来的时候,抽屉视图效果还是存在的。
那么,当点击抽屉视图中的某个组件来跳转到另外一个页面,然后从这个页面返回的时候,如何让抽屉视图消失呢?我们在页面跳转之前通过Navigator.pop(context);这行代码来实现“隐藏抽屉视图”的功能。
以上。
领取专属 10元无门槛券
私享最新 技术干货