flutter 快速实现侧边栏

news/2024/12/22 21:17:32/

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

import 'package:flutter/material.dart';class Sidebar extends StatelessWidget {@overrideWidget 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.ppmy.cn/news/1557292.html

相关文章

力扣-图论-19【算法学习day.69】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非…

电商新品发布自动化:RPA 确保信息一致性与及时性【rap.top】

一、教学目标 让学员了解电商新品发布过程中的挑战以及 RPA 的概念和优势。掌握 RPA 在电商新品发布中确保信息一致性与及时性的方法和流程。培养学员运用 RPA 解决实际问题的能力。 二、教学重难点 重点 RPA 在电商新品发布中的应用场景。实现信息一致性与及时性的具体策略…

Mapbox-GL 的源码解读的一般步骤

Mapbox-GL 是一个非常优秀的二三维地理引擎&#xff0c;随着智能驾驶时代的到来&#xff0c;应用也会越来越广泛&#xff0c;关于mapbox-gl和其他地理引擎的详细对比&#xff08;比如CesiumJS&#xff09;&#xff0c;后续有时间会加更。地理首先理解 Mapbox-GL 的源码是一项复…

前端安全——敏感信息泄露

背景 随着 Web 应用程序的普及和用户数据价值的提升&#xff0c;前端安全问题日益凸显。前端应用中的敏感信息&#xff08;如用户名、密码、信用卡号等&#xff09;容易受到各种安全威胁&#xff0c;如 XSS 攻击、CSRF 攻击和源代码泄露等。这些威胁不仅影响用户体验&#xff…

skyler实战渗透笔记(十)—IMF

skyler实战渗透笔记&#xff1a; 笔记是为了记录实战渗透学习过程&#xff0c;分享渗透过程思路与方法。 请注意&#xff1a; 对于所有笔记中复现的终端或服务器&#xff0c;都是自行搭建环境或已获授权渗透的。使用的技术仅用于学习教育目的&#xff0c;如果列出的技术用于…

Xcode 文件缺失:Missing submodule xxx

问题&#xff1a;警告或者报错&#xff1a;Missing submodule xxx 引用方式为: <XXXX/******.h> 即 <项目名/头文件名称.h> 原因&#xff1a;这种问题主要是项目名称和 文件&#xff08;主要是头文件 命名重复了&#xff09; 经过谷歌查询 原因是创建的库名称自动…

C# OpenCV机器视觉:尺寸测量

转眼就是星期一了&#xff0c;又到了阿强该工作的时候了&#xff01;阿强走进了他作为机器视觉工程师的办公室&#xff0c;准备迎接新一天的挑战。随着周末的结束&#xff0c;他心中暗想&#xff1a;“如果我能让机器像我一样聪明&#xff0c;那就太好了&#xff01;” 正当他…

React 底部加载组件(基于antd)

底部加载组件的意义在于提供一种流畅的用户体验&#xff0c;以便在用户滚动到页面底部时自动加载更多内容。这样可以让用户无需离开当前页面&#xff0c;就能够无缝地浏览更多的内容.通过底部加载组件&#xff0c;可以分批加载页面内容&#xff0c;减少一次性加载大量数据对页面…