flutter 之侧边栏

简介: flutter 之侧边栏

flutter 之侧边栏

在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边

栏。侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧

边栏。

return Scaffold(
appBar: AppBar(
title: Text("Flutter App"), ),drawer: Drawer(
child: Text('左侧边栏'), ),endDrawer: Drawer(
child: Text('右侧侧边栏'), ), );

Flutter DrawerHeader

需要自己搭建布局


decoration 设置顶部背景颜色

child 配置子元素

padding 内边距

margin 外边距

drawer: Drawer(
child: Column(
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.yellow,
image:DecorationImage(
image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover
)
),child: ListView(
children: [
Text('我是一个头部')
], ), ),ListTile(
title: Text("个人中心"),
leading: CircleAvatar(
child: Icon(Icons.people)
), ),Divider(), ListTile(
title: Text("系统设置"),
leading: CircleAvatar(
child: Icon(Icons.settings)
), )
], )
)

Flutter UserAccountsDrawerHeader

系统自带的侧边栏头部布局


decoration 设置顶部背景颜色

accountName 账户名称

accountEmail 账户邮箱

currentAccountPicture 用户头像

otherAccountsPictures 用来设置当前账户其他账户头像

margin


Flutter 侧边栏路由跳转


onTap: (){

关闭侧滑栏

Navigator.of(context).pop();

跳转

Navigator.pushNamed(context, ‘/search’); }

image.png


目录
相关文章
|
Dart Android开发 iOS开发
比较 Flutter 日期选择器库【Flutter 专题 6】
日期选择器是对 UI 的有用补充,它使您的应用程序用户可以轻松地从日历中选择日期。无论您是在注册表单中添加出生日期字段,还是为用户提供预约时间段,您都可以使用日期选择器库来简化流程。 在本教程中,我们将探索 Flutter 的三个流行日期选择器库 Flutter、Flutter Datetime Picker、Flutter Date Range Picker 和date_time_picker。我们将检查每个库的功能并将每个库安装在一个简单的移动应用程序中。
943 0
比较 Flutter 日期选择器库【Flutter 专题 6】
|
3月前
|
iOS开发 容器
Flutter 进度条
Flutter 进度条
24 0
|
4月前
|
存储 前端开发 API
flutter 富文本思考
flutter 富文本思考
56 2
|
4月前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
219 0
Flutter的ClipRRect控件介绍
ClipRRect(Rounded Rectangle Clip)是Flutter中的一个控件,用于将其子控件剪裁为圆角矩形形状。
flutter中使用图标
本文介绍 flutter中使用图标(含自定义图标图)
511 0
flutter中使用图标
flutter系列之:做一个会飞的菜单
flutter中自带了drawer组件,可以实现通用的菜单功能,那么有没有一种可能,我们可以通过自定义动画来实现一个别样的菜单呢?
|
存储 前端开发
flutter系列之:在flutter中使用导航Navigator
一个APP如果没有页面跳转那么是没有灵魂的,页面跳转的一个常用说法就是Navigator,flutter作为一个最为优秀的前端框架,Navigator肯定是必不可少的,那么在flutter中如何使用Navigator呢? 一起来看看吧。
flutter系列之:在flutter中使用导航Navigator