Flutter侧边栏组件Drawer

news2024/11/25 4:27:21

 主要代码:

 

 drawer: const Drawer(
   child: Column(
     children: [
       Row(
         children: [
           Expanded(
             flex: 1,
             child: UserAccountsDrawerHeader(
               accountName: Text("张三"),
               accountEmail: Text("xxx@qq.com"),
               currentAccountPicture: CircleAvatar(
                 backgroundImage: NetworkImage(
                     "https://www.itying.com/images/flutter/1.png"),
               ),
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: NetworkImage(
                       "https://www.itying.com/images/flutter/2.png"),
                   fit: BoxFit.cover,
                 ),
               ),
             ),
           ),
         ],
       ),
       ListTile(
         leading: CircleAvatar(
           child: Icon(
             Icons.people,
           ),
         ),
         title: Text("个人中心"),
       ),
       Divider(),
       ListTile(
         leading: CircleAvatar(
           child: Icon(
             Icons.settings,
           ),
         ),
         title: Text("系统设置"),
       )
     ],
   ),
 ),

 在Drawer组件中直接写布局就行,需要在Scaffold组件下添加AppBar组件才会显示侧边栏三道杠菜单图标,不添加AppBar不显示图标,可以侧滑。

右边侧滑用:

endDrawer: Drawer(

),

 完整代码:

import 'package:flutter/material.dart';
import 'package:flutter_demo/tabs/category.dart';
import 'package:flutter_demo/tabs/home.dart';
import 'package:flutter_demo/tabs/people.dart';
import 'package:flutter_demo/tabs/setting.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Tabs();
  }
}

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int currentIndex = 0;

  List<Widget> pages = const [
    HomePage(),
    CategoryPage(),
    SettingPage(),
    PeoplePage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter"),
      ),
      body: pages[currentIndex],
      drawer: const Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: UserAccountsDrawerHeader(
                    accountName: Text("张三"),
                    accountEmail: Text("xxx@qq.com"),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://www.itying.com/images/flutter/1.png"),
                    ),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(
                            "https://www.itying.com/images/flutter/2.png"),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(
                  Icons.people,
                ),
              ),
              title: Text("个人中心"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(
                  Icons.settings,
                ),
              ),
              title: Text("系统设置"),
            )
          ],
        ),
      ),
      endDrawer: const Drawer(
        child: Text("cc"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        //选中菜单颜色
        fixedColor: Colors.red,
        //图标大小,默认24.0
        iconSize: 30,
        //第几个菜单选中
        currentIndex: currentIndex,
        //当item数量大于3个时需要设置type属性
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.grey.shade600,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首页",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: "分类",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "设置",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: "用户",
          ),
        ],
      ),
    );
  }
}

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

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

相关文章

解决git克隆到本地的仓库文件夹不显示红色感叹号、绿色对号等图标的问题

电脑有时候重启或者别的什么原因导致本地仓库不显示绿勾或者红色感叹号的符号 第一步: win加R然后输入regedit打开注册表 第二步: 按下面路径打开 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdentifiers 找到如下图在Tort…

浅谈JVM内存结构

一、JVM内存结构的大概划分&#xff1a; 1.1 堆(Heap) 线程共享。所有的对象实例以及数组都要在堆上分配。回收器主要管理的对象。 1.1.1 堆结构 堆可以处于物理上不连续的内存空间中&#xff0c;只要逻辑上是连续的即可。堆的内部结构按照传统的做法分成新生代和老年代&…

喝汽水问题:1瓶汽水1元。2个空瓶可以换1瓶汽水,给20元,可以买多少汽水 (7.19)

泪目&#xff01;&#xff01;&#xff01;终于是自己完完整整写出的代码了&#xff0c;不翻资料也没看参考代码 &#xff08;之前的要么和老师练习&#xff0c;要么找教材东拼西凑&#xff09; 方法2&#xff1a;数学角度看bottle价值0.5 元&#xff0c;20元最多可换40bottl…

Python venv 和 virtualenv 虚拟环境的基本使用

1.前言 venv 和 virtualenv 都是搭建虚拟环境的工具&#xff0c;virtualenv 是第三方开源的&#xff0c;而 venv 作为 virtualenv 的一个子集自 Python3.3 开始集成到标准库中&#xff0c;在 virtualenv 的文档中可以看到他们的区别&#xff1a; 没有 app-data 种子方法&#…

LLM 盛行,如何优雅地训练大模型?

作者 | 王嘉宁 整理 | NewBeeNLP https://wjn1996.blog.csdn.net/article/details/130764843 大家好&#xff0c;这里是 NewBeeNLP。 ChatGPT于2022年12月初发布&#xff0c;震惊轰动了全世界&#xff0c;发布后的这段时间里&#xff0c;一系列国内外的大模型训练开源项目接踵而…

手把手教你搭建SpringCloud项目(十)集成Hystrix之服务降级

什么是微服务&#xff1f;一看就会系列&#xff01; 一、手把手教你搭建SpringCloud项目&#xff08;一&#xff09;图文详解&#xff0c;傻瓜式操作 二、手把手教你搭建SpringCloud项目&#xff08;二&#xff09;生产者与消费者 三、手把手教你搭建SpringCloud项目&#x…

公司老项目改造适配不同分辨率2k、3k、4k

项目改造适配不同分辨率 最近公司要做项目适配2k、3k、4k屏的分辨率&#xff0c;在网上找了很多中方案&#xff0c;常用且方便的是使用zoom全局缩放&#xff0c;因为是老项目所以对样式进行了重写整体使用了flex百分比布局 使用 1、在utils文件夹中新建一个zoom.js文件 这个是…

ACL 2023 | 持续进化中的语言基础模型

尽管如今的 AI 模型已经具备了理解自然语言的能力&#xff0c;但科研人员并没有停止对模型的不断改善和理论探索。自然语言处理&#xff08;NLP&#xff09;领域的技术始终在快速变化和发展当中&#xff0c;酝酿着新的潮流和突破。 NLP 领域的顶级学术会议国际计算语言学年会 …

java中的三大集合类各自的特点以及适用场景

目录 ​编辑 三大容器的介绍 使用场景介绍 List 实现类 Map 实现类 Set 实现类&#xff1a; 三大容器的介绍 List&#xff08;列表&#xff09; 结构&#xff1a;由有序的元素序列组成&#xff0c;可以包含重复元素特点&#xff1a;可以通过索引访问元素&#xff0c;插入的顺…

SQL注入实操(更新中)

文章目录 一、sqli-lab靶场搭建二、通关笔记1.Less-1a.单引号‘b.updatexmlc.concatd.unione.information_schemaf.GROUP_CONCATg.select 1,2 2.Less-23.Less-3a.怎么找到注入点b.判断SQL注入漏洞的类型c.闭合语句d.如何判断显示位e.答案 4.Less-45.Less-5a.判断注入漏洞的依据…

PhpStudy2016-2018-RCE 漏洞复现

漏洞描述 PHPStudyRCE&#xff08;Remote Code Execution&#xff09;&#xff0c;也称为phpstudy_backdoor漏洞&#xff0c;是指PHPStudy软件中存在的一个远程代码执行漏洞。 漏洞影响范围 Phpstudy软件是国内的一款免费的PHP调试环境的程序集成包&#xff0c;通过集成Apac…

WEB:shrine

背景知识 了解Flask SSIT模板注入 题目 进行代码审计 import flask import osapp flask.Flask(__name__) /*创建了flask包下的Flask类的对象&#xff0c;name是一个适用于多数情况的快捷方式。有了这个参数&#xff0c;Flask才知道在哪里可以找到模板和静态文件*/app.confi…

HYPE分布式水文模型教程

详情点击链接&#xff1a;HYPE分布式水文模型建模方法与案例分析 前言 HYPE(Hydrological Predictions for the Environment, HYPE)是由瑞典皇家水文气象局&#xff08;SMHI&#xff09;在HBV和HBV-NP模型基础上开发的新一代分布式水文模型&#xff0c;已经在全球众多地区得…

同样是办公管理系统,钉钉和OA哪个更出色?

企业在选择办公协同系统的时候&#xff0c;通常搜索到“钉钉”和“OA系统”&#xff0c;两者都属于办公管理类型&#xff0c;但哪个更适合企业使用&#xff1f;两者又有哪些区别呢&#xff1f;小编整理了一下两者的对比和侧重的点&#xff0c;今天我们就来聊聊两者的区别吧~ 天…

【Linux】inode软硬连接

文章目录 &#x1f4d6; 前言1. 文件系统1.1 磁盘的物理结构&#xff1a;1.2 CSH和LBA&#xff1a;1.3 IO的基本单位&#xff1a;1.4 文件系统结构&#xff1a;1.5 认识inode&#xff1a; 2. 软硬连接2.1 目录和文件的硬连接数&#xff1a;2.2 软连接&#xff1a;2.3 硬连接&am…

Clickhouse基础和基本优化

CK基础和基本优化 一、ClickHouse的特点列式存储高吞吐写入能力数据分区与线程级并行表引擎的使用MergeTreeReplacingMergeTreeSummingMergeTree 二、SQL操作1.Insert2.Update 和 Delete3.查询操作4.alter操作5.导出数据 三、基于表的分布式集群集群写入流程&#xff08; 3分片…

react和vue2/3父子组件的双向绑定(sync、emit、v-model)

目录 Vue .sync&#xff08;2.3.0&#xff09; $emit &#xff08;2.3后&#xff09; 自定义组件的 v-model 2.2.0 v-modelemits(3.0取消了.sync) React 父组件回调函数 相关基础 框架 MVC &#xff08;Model View Controller&#xff09;/MVP&#xff08;Model View…

VirtualBox 7.0.10 (macOS, Linux, Windows) - 开源跨平台虚拟化软件

VirtualBox 7.0.10 (macOS, Linux, Windows) - 开源跨平台虚拟化软件 Oracle VM VirtualBox 7 请访问原文链接&#xff1a;https://sysin.org/blog/virtualbox-7/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 2022 年 10 月…

CentOS7中安装Mysql8并配置远程连接和修改密码等

场景 使用Vmware等虚拟机软件搭建CentOS7系统&#xff0c;需要在其上安装Mysql8版本数据库。 注&#xff1a; 博客&#xff1a;霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 实现 1、去mysql官网手动下载rpm包并上传到服务器&#xff0c;或者直接通过wget…

Python结合Selenium简单实现Web自动化测试

这篇文章是入门级别的应用Python Selenium进行自动化测试&#xff0c;包括环境搭建及简单的实例&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下 这篇文章是入门级别的应用Python Selenium进行自动化测试&#xff0c;包括环境搭建及简单的实例。基…