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


目录
相关文章
|
2月前
|
Dart 开发者
flutter:页面整合 (十)
本文档介绍了如何在 Flutter 应用中使用底部导航栏(`BottomNavigationBar`)和侧边栏(`Drawer`),包括简单的使用方法、属性配置、与按钮结合使用、使用图片作为图标、以及如何实现顶部导航。示例代码展示了如何创建包含多个页面的导航栏,并通过 `TabController` 控制器实现页面切换。同时,文档还提供了如何自定义导航栏样式和添加浮动操作按钮(`FloatingActionButton`)的方法。最后,整合了底部导航栏、侧边栏和顶部导航栏的完整示例代码,帮助开发者快速构建具有导航功能的 Flutter 应用界面。
|
5月前
|
安全 Android开发
Flutter自定义之旋转木马
本文详细介绍了如何在Flutter中实现子控件按照圆形顺序排列并平分角度,以及如何通过旋转、手势滑动和Stack组件实现3D效果,包括子控件的自动旋转、快速滑动手势响应和前后布局遮挡。
49 0
|
6月前
|
iOS开发 容器
Flutter 进度条
Flutter 进度条
55 0
|
7月前
|
存储 前端开发 API
flutter 富文本思考
flutter 富文本思考
77 2
|
7月前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
267 0
Flutter的ClipRRect控件介绍
ClipRRect(Rounded Rectangle Clip)是Flutter中的一个控件,用于将其子控件剪裁为圆角矩形形状。
flutter中使用图标
本文介绍 flutter中使用图标(含自定义图标图)
576 0
flutter中使用图标
flutter系列之:做一个会飞的菜单
flutter中自带了drawer组件,可以实现通用的菜单功能,那么有没有一种可能,我们可以通过自定义动画来实现一个别样的菜单呢?