flutter 快速实现侧边栏

news2024/12/20 6:30:41

首先我们写一个侧边栏工具类,示例如下:

import 'package:flutter/material.dart';

class Sidebar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text("用户名"),
            accountEmail: Text("用户邮箱"),
            currentAccountPicture: CircleAvatar(
              backgroundColor: Colors.white,
              child: Text(
                "U",
                style: TextStyle(fontSize: 40.0, color: Colors.blue),
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text('首页'),
            onTap: () {
              Navigator.pop(context); // 关闭侧边栏
              // 添加导航逻辑
            },
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('设置'),
            onTap: () {
              Navigator.pop(context); // 关闭侧边栏
              // 添加导航逻辑
            },
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text('关于'),
            onTap: () {
              Navigator.pop(context); // 关闭侧边栏
              // 添加导航逻辑
            },
          ),
        ],
      ),
    );
  }
}

然后我们在需要的地方引用这个侧边栏页面,示例如下

Scaffold(
            appBar: AppBar(
              title: Text('侧边栏示例'), // 自定义标题
            ),
            drawer: Sidebar(), // 使用自定义的侧边栏
            body: Center(
              child: Text('主页内容'),
            ),
          ),

效果如下所示

如果想将一个类改写成侧边栏工具类,只需要用Drawer将整个页面进行包裹一下,然后在使用页面的Scaffold里面加上drawer这个标签引用这个类,然后将点击跳转这个类的方法改写成Scaffold.of(context).openDrawer();即可完成快速构建侧边栏。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2262556.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Odoo:免费开源ERP的AI技术赋能出海企业电子商务应用介绍

概述 伴随电子商务的持续演进&#xff0c;客户对于便利性、速度以及个性化服务的期许急剧攀升。企业务必要探寻创新之途径&#xff0c;以强化自身运营&#xff0c;并优化购物体验。达成此目标的最为行之有效的方式之一&#xff0c;便是将 AI 呼叫助手融入您的电子商务平台。我们…

[SZ901]FPGA程序固化工具使用方法

工具为脚本形式&#xff0c;前期需进行vivado版本&#xff0c;下载器端口配置 1&#xff0c;编辑 【SZ901程序固化工具.bat】&#xff0c;设置软件版本 修改软件版本和安装路径 2&#xff0c;设置下载器端口&#xff08;SZ901->USER_TCL->FlashBurn_Config.tcl&#x…

详解Redis的String类型及相关命令

目录 SET GET MGET MSET SETNX SET和SETNX和SETXX对比 INCR INCRBY DECR DECRBY INCRBYFLOAT APPEND GETRANGE SETRANGE STRLEN 内部编码 SET 将 string 类型的 value 设置到 key 中。如果 key 之前存在&#xff0c;则覆盖&#xff0c;⽆论原来的数据类型是什么…

【时间之外】IT人求职和创业应知【71】-专利费

目录 2025 ICT产业趋势年会召开&#xff0c;2024年度ICT十大新闻重磅揭晓 海纳致远数字科技申请定制化插件驱动的数据分析专利 阿波罗智联取得语音数据的处理方法、装置、设备和存储介质专利 心勿贪&#xff0c;贵知足。 感谢所有打开这个页面的朋友。人生不如意&#xff0…

生态学研究中,森林生态系统的结构、功能与稳定性是核心研究

在生态学研究中&#xff0c;森林生态系统的结构、功能与稳定性是核心研究内容之一。这些方面不仅关系到森林动态变化和物种多样性&#xff0c;还直接影响森林提供的生态服务功能及其应对环境变化的能力。森林生态系统的结构主要包括物种组成、树种多样性、树木的空间分布与密度…

MySQL追梦旅途之慢查询分析建议

一、找到慢查询 查询是否开启慢查询记录 show variables like "%slow%";log_slow_admin_statements&#xff1a; 决定是否将慢管理语句&#xff08;如 ALTER TABLE 等&#xff09;记录到慢查询日志中。 log_slow_extra &#xff1a; MySQL 和 MariaDB 中的一个系…

“AI应急管理系统:未来城市安全的守护者

大家好&#xff0c;今天我想和大家聊聊一个特别酷的话题——AI应急管理系统。想象一下&#xff0c;当城市遇到突发事件&#xff0c;比如火灾、洪水或者地震&#xff0c;我们能有一个智能系统迅速响应&#xff0c;那该多好啊&#xff01;这就是AI应急管理系统的魅力所在。 首先&…

12.9深度学习_经典神经网络_MobileNet V1V2

一、MobileNet V1 1. 铭记历史 传统的卷积神经网络参数量大&#xff0c;导致预测时算力大&#xff0c;对于手机、嵌入式等设备来讲是不行的&#xff0c;例如VGG16大概有490M&#xff0c;ResNet的152层模型有644M&#xff0c;这种是不能在移动端部署的时候不但慢还暂用空间&am…

Apache Tomcat RCE 稳定复现 保姆级!(CVE-2024-50379)附视频+POC

原文链接 Apache Tomcat 最新RCE 稳定复现分析 保姆级&#xff01;&#xff01;&#xff01;附复现视频POC 前言 最近爆出 Apache Tomcat条件竞争导致的RCE&#xff0c;影响范围当然是巨大的&#xff0c;公司也及时收到了相关情报&#xff0c;于是老大让我复现&#xff0c;以…

二、Jmeter Web压测

Jmeter Web压测 一、JMeter简介二、安装JMeter三、使用JMeter进行Web压测的基本步骤 &#xff08;一&#xff09;创建测试计划&#xff08;二&#xff09;添加HTTP请求&#xff08;三&#xff09;添加监听器&#xff08;四&#xff09;运行测试 四、高级应用 &#xff08;一&am…

【Python爬虫系列】_032.Scrapy_全站爬取

课 程 推 荐我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)教程合集 👈👈

[LeetCode-Python版] 定长滑动窗口——灵神思路(1)

思路 把问题拆解成三步&#xff1a;入-更新-出。 入&#xff1a;下标为 i 的元素进入窗口&#xff0c;更新相关统计量。如果 i<k−1 则重复第一步。更新&#xff1a;更新答案。一般是更新最大值/最小值。出&#xff1a;下标为 i−(k-1) 的元素离开窗口&#xff0c;更新相关…

紧固件设计之——开槽长圆柱端紧定螺钉结构仿真APP

按照产品形态分类&#xff0c;紧固件通常包括以下12类&#xff1a;螺栓、螺柱、螺钉、螺母、自攻螺钉、木螺钉、垫圈、挡圈、销、铆钉、焊钉、组合件与连接副&#xff0c;是一类用于连接和固定各种构件和零部件的重要机械零件&#xff0c;可确保机械装置或设备结构的牢固和稳定…

el-tabs标签过多

tab-position&#xff1a;top情况 .el-tabs__nav-wrap{overflow-x: auto ;width: 86% ;margin-left: 10px ; } 效果&#xff1a; tab-position&#xff1a;left情况 .el-tabs__nav-wrap{overflow-x: auto ;height: 高度 ;margin-top: 10px ; } 效果&#xff1a; 注意&…

Docker日志与监控

一、引言 随着容器技术在生产环境中被广泛应用&#xff0c;Docker容器的日志管理与监控变得尤为重要。在现代应用程序中&#xff0c;容器化的应用通常是由多个容器组成的服务&#xff0c;而容器中的日志与监控则是确保服务健康运行、诊断问题和优化性能的关键。通过日志和监控…

期权VIX指数构建与择时应用

芝加哥期权交易 所CBOE的波动率指数VIX 是反映 S&P 500 指数未来 30 天预测期波动率的指标&#xff0c;由于预期波动率多用于表征市场情绪&#xff0c;因此 VIX 也被称为“ 恐慌指数”。 VIX指数计算 VIX 反映了市场情绪和投资者的风险偏好&#xff0c; 对于欧美市场而言…

Centos创建共享文件夹拉取文件

1.打开VMware程序&#xff0c;鼠标右检你的虚拟机&#xff0c;打开设置 2.点击选项——共享文件夹——总是启用 点击添加&#xff0c;设置你想要共享的文件夹在pc上的路径&#xff08;我这里已经添加过了就不加了&#xff09; 注意不要中文&#xff0c;建议用share&#xff0c…

CSS|12 display属性

display display显示的意思&#xff0c;用来进行 行内元素与块级元素之间的相互转换&#xff01;将隐藏的元素显示或者是将显示的元素进行隐藏。 display这个属性的取值&#xff1a; inline 行内 当我们将一个行内元素的display属性的值设置为inline以后&#xff0c;那么这个…

启动打印服务提示:Http端口已被使用,请修改

分销AV 10.0.0及其以上版本启动打印服务提示&#xff1a;Http端口已被使用&#xff0c;请修改。该如何处理&#xff1f; 一、先将打印服务退出,电脑桌面右下角任我打印服务操作退出。 二、到打印管理器安装目录\print下找到CONFIG文件&#xff0c;用记事本打开后&#xff0c;将…

workman服务端开发模式-应用开发-gateway长链接端工作原理

一、长链接的工作原理 Register类其实也是基于基础的Worker开发的。Gateway进程和BusinessWorker进程启动后分别向Register进程注册自己的通讯地址&#xff0c;Gateway进程和BusinessWorker通过Register进程得到通讯地址后&#xff0c;就可以建立起连接并通讯了。而Register进程…