Flutter drawer学习总结6

最新推荐文章于 2023-10-26 19:54:07 发布
最新推荐文章于 2023-10-26 19:54:07 发布
阅读量291 收藏
点赞数
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42031243/article/details/107519692
版权
drawer

drawer 是侧边栏组件， 会在顶部导航栏中出现一个侧边栏的图标，当点击的时候，左侧边栏页面会滑出
如
在这里插入图片描述
当点击或左滑时
在这里插入图片描述

将侧边栏的页面进行弹出
在侧边栏中可以使用 UserAccountsDrawerHeaderhead头组件，
在这里插入图片描述
类似这种布局
在这里插入图片描述

endDrawer

和Drawer 对应的是 endDrawer 右组件， 局与状态栏的右边， Drawer中有的属性在endDrawer 中都有

跳转

当我们在侧边栏上点击页面跳转后返回是会发现返回的是侧边栏页面，这时候我们想要返回到TabBar页面的话怎么办？ 这使用可以在点击跳转的时候先 pop返回到TabBar 页面中，然后在进行跳转，这样跳转成功后返回的页面就是TabBar页面了
在这里插入图片描述

tnan2522
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter中的抽屉组件Drawer
越陌度阡
12-27 1529
1. 配置抽屉组件 1. drawer 左侧抽屉。值的类型为Widget； 2.endDrawer 右侧抽屉。值的类型为Widget； 代码示例： import "package:flutter/material.dart"; class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key); _CategoryPageState createState() => .
Flutter 自定义Drawer 滑出位置的大小实例代码详解
08-19
主要介绍了Flutter 自定义Drawer 滑出位置的大小,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Flutter基础
piziliul的博客
03-23 2453
Fluter基础 Flutter环境搭建 Android Studio开发环境搭建 Flutter目录结构,入口函数以及基础组件 目录结构 文件夹 作用 android android 平台相关代码 ios ios 平台相关代码 lib flutter 相关代码，我们主要编写的代 码就在这个文件夹 test 用于存放测试代码 pubspec.yaml 配置文件，一般存放一些第三方库的依 赖。 入口函数 void main
Flutter开发之Scaffold组件快速开发APP
江上清风山间明月的博客
10-28 761
【代码】Flutter开发之Scaffold组件快速开发APP。
Flutter Scaffold脚手架
xiangxiongfly
11-09 1500
Scaffold可以称为脚手架，一般通过它搭建页面的基本结构。一个页面可以理解为三个部分组成：标题栏、内容主题页面、底部导航栏，当然还包括其他元素抽屉菜单、悬浮按钮等。
开启Fluter基础之旅<三>-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
webor2006的博客
04-06 395
Material Design风格组件： 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习。 AppBar: 在上一次咱们实现一个Tab的效果，回忆一下： 接下来则基于这个代码进行进一步修改，先回忆一下当时的代码： import 'package:flutter/material.dart...
【Flutter】入门05-drawer抽屉
夜雨Gecer的博客
01-30 469
基础 import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( ...
Flutter-Drawer使用
shelutai的博客
05-18 962
Scaffold的drawer属性是一个Widget类型的组件，从左侧边栏拉出，通常就是用一个Drawer对象实现（Scaffold的endDrawer属性定义了一个从右侧边栏拉出的导航面板）；Drawer的child属性定义了其展示的内容，通常是用一个 ListView来实现，而在ListView最上面通常会有个 DrawerHeader来设置当前用户的基本信息，最常用的一个具体的 DrawerHeader 是 UserAccountsDrawerHeader。通常用于在抽屉中在顶部展示一些基本信息；
Flutter——最详细(Scaffold)使用教程
最新发布
人生在世
10-26 3829
相当于界面的主体，组件的展示都必须依附于它。
flutter---抽屉Drawer and endDrawer
a875801的博客
03-20 2845
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildCon...
Flutter Drawer 侧滑菜单、抽屉
10-26
Flutter Drawer 侧滑菜单、抽屉
Flutter之抽屉组件Drawer
01-07
Scalfold 是 Flutter MaterialApp 常用的布局 Widget，接受一个 drawer属性，支持配置 Drawer，可以实现从侧边栏拉出导航面板，好处是把一些功能菜单折叠起来，通常Drawer是和Listview组件或者 Column组合使用进行...
Flutter开发：自定义Drawer的滑出位置的大小
01-03
Flutter开发过程中，Drawer控件的使用频率也是比较高的，其实有过移动端开发经验的人来说，Flutter中的Drawer控件就相当于ios开发或者Android开发中的“抽屉”效果，从侧边栏滑出导航菜单。对于Flutter中的Drawer...
Flutter Drawer、DrawerHeader、 UserAccountsDrawerHeader 以及侧边栏内容布局
06-04
此资源是关于移动端框架Flutter（基于Android）的一些常见组件的介绍，包括PPT讲义及源码示例。 此资源介绍的相关内容有：Drawer、DrawerHeader、 UserAccountsDrawerHeader 以及侧边栏内容布局。 适合新手学习...
Flutter开发(十六)：Flutter顶部导航、底部导航与侧拉菜单
wuqingsen1的博客
11-01 2300
1.APP 首页框架搭建 2.轮播图 Banner 开发 3.自定义 AppBar 滚动渐变 1.APP 首页框架搭建 实现导航需要用到 Scaffold 和 BottomNavigationBar ，PageView 和 PageController。 Scaffold widget 是实现了基本的 material design 的布局结构。里面包括了常用的标题 appBar ，内容 body，侧拉 drawer。 示例代码： void main() { runApp(MyApp
Flutter Drawer详解
yechaoa
05-27 4824
文章目录简介基础属性DrawerHeaderUserAccountsDrawerHeader功能列表Drawer打开关闭完整代码 效果： 简介 Drawer是一个抽屉控件，通常从页面的左边或右边滑出来。 抽屉的内部结构通常是头部信息Header、内容区ListTiles、或以一个AboutListTile结尾。 基础属性 首先，Drawer是Scaffold下的一个子widget。 ...
Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列
houruoyu3的博客
12-18 5358
需求： 抽屉组件drawer的实现。 效果图: 一、侧边栏的实现 return Scaffold( appBar: AppBar( title: Text("侧边栏"), ), drawer: Drawer( child: Text('左侧边栏'), ), endDrawer: Drawer( child: Text('右侧边栏'), ), ); 在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏，传入 e.
flutter drawer (抽屉)
学习笔记
08-26 573
flutter 如何增加 side drawer 侧抽屉
Flutter侧边栏组件Drawer
juer2017的博客
07-19 716
Flutter侧边栏组件Drawer
flutter drawer 禁用侧滑
07-28
要禁用Flutter中的侧滑栏，可以通过将Scaffold的drawer属性设置为null来实现。具体代码如下： ```dart Scaffold( appBar: AppBar( title: Text('App Title'), ), drawer: null, // 禁用侧滑栏 body: Container( // 页面内容 ), ); ``` 通过将drawer属性设置为null，可以禁用侧滑栏。这样在界面上就不会显示侧滑栏了。 #### 引用[.reference_title] - *1* *2* *3* [Flutter drawer侧滑栏实现](https://blog.csdn.net/as425017946/article/details/128187573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值