Flutter学习笔记16-来试试Drawer侧边栏吧

学习视频地址:https://www.bilibili.com/video/BV1S4411E7LY?p=35&vd_source=cee744cae4ead27f8193fc7904647073

学习笔记:
本篇内容基于上篇Flutter学习笔记15:https://blog.youkuaiyun.com/convex1009848621/article/details/127808039?spm=1001.2014.3001.5501

1.来试试Drawer和endDrawer
在这里插入图片描述
展示
在这里插入图片描述
左右增加了两个抽屉按钮,点击可以弹出子界面
在这里插入图片描述

2.空空如也,来加点内容修饰一下

drawer: Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                    flex: 1,
                    child: DrawerHeader(
                      child: Text("This is drawer header"),
                      decoration: BoxDecoration(color: Colors.green),
                    )),
              ],
            ),
            ListTile(
              title: Text("个人信息"),
              leading: Icon(Icons.person),
            )
          ],
        ),
      )

效果展示
在这里插入图片描述

### 如何在 Flutter 中创建和使用侧边栏导航 Drawer #### 使用 `Drawer` 实现基本的侧边栏导航 为了实现在 Flutter 应用程序中的侧边栏导航,可以利用内置的小部件 `Drawer` 来完成这一需求。此小部件通常配合 `Scaffold` 一同工作,在应用程序界面的一侧提供一个可滑动出来的菜单。 下面是一个简单的例子,展示了如何集成并配置 `Drawer`: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Side Menu Example')), body: Center(child: Text('Content goes here!')), drawer: Drawer( // 创建抽屉式导航 child: ListView( padding: EdgeInsets.zero, children: [ DrawerHeader( decoration: BoxDecoration(color: Colors.blue), child: Text('Menu Options'), ), ListTile( title: Text('Item 1'), onTap: () {}, ), ListTile( title: Text('Item 2'), onTap: () {}, ), ], ), ), ), ); } } ``` 这段代码定义了一个带有顶部应用栏的应用窗口,并在其左侧加入了一个包含两个选项项 (`Item 1`, `Item 2`) 的简单菜单[^1]。 #### 利用第三方库增强功能 对于更复杂的需求,则可能需要考虑采用一些专门设计用于构建侧边栏导航的插件或包。例如,`flutter_inner_drawer` 提供了一种简便的方式来创建内部侧面部分(左/右),允许插入列表菜单或其他内容;而 `SidebarX` 是另一个流行的多平台侧边栏导航组件,支持流畅动画效果以及更多自定义设置[^2][^3]。 通过这些工具的帮助,开发者可以根据具体应用场景灵活调整样式与交互逻辑,从而打造出更加美观实用的用户体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值