Drawer 侧边栏、以及侧边栏内 容布局
2024-08-23 20:00:00
一、Flutter Drawer 侧边栏
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏。
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
drawer: Drawer(
child: Text('左侧边栏'),
),
endDrawer: Drawer(
child: Text('右侧侧边栏'),
),
);
二、DrawerHeader
常见属性:
decoration 设置顶部背景颜色
child 配置子元素
padding 内边距
margin 外边距
三、Flutter UserAccountsDrawerHeader
decoration 设置顶部背景颜色
accountName 账户名称
accountEmail 账户邮箱
currentAccountPicture 用户头像
otherAccountsPictures 用来设置当前账户其他账户头像
margin
四、Flutter 侧边栏路由跳转
onTap: (){
Navigator.of(context).pop();
Navigator.pushNamed(context, '/search');
}
案例代码
import 'package:flutter/material.dart';
import '../home.dart'; class My extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
image:DecorationImage( image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover )
),
),
ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
// Navigator.of(context).pop();
// Navigator.pushNamed(context, '/search');
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 1)), (route) => route == null);
},),
ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
// Navigator.of(context).pop();
// Navigator.pushNamed(context, '/search');
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 2)), (route) => route == null);
}), ],
),
),
endDrawer: Drawer(
child: Text('右侧'),
),
);
}
}
最新文章
- 一个简单的后台与数据库交互的登录与注册[sql注入处理,以及MD5加密]
- Socket编程 -- 全双工通信
- javascript_basic_02之数据类型、分支结构
- 3ds max 分离对象
- HDU 2609 最小表示法
- mongodb学习02基础知识
- Hyper-V和Virtual PC的不同
- c# 调用 ShellExecute
- JS常用小技巧
- 用defy来潜水最终还是挂了........
- 如何在Azure上创建和部署云服务
- CentOS7安装Python3.5
- Zookeeper学习记录(一):设计与实现
- poj1966Cable TV Network(无向图最小点割集 ISAP+邻接矩阵)
- RTF 格式 说明
- thinkphp 删除该表的最后一行
- JavaWeb之HTTP协议
- 从源码看JDK提供的线程池(ThreadPoolExecutor)
- [Spring MVC] 取控制器返回的ModelAndView/Map/Model/Request的对象
- CentOS virt-manager 安装Win2008r2的一种GUI方法