当前位置: 首页 > news >正文

flutter->Scaffold左侧/右侧侧边栏和UserAccountsDrawerHeader的使用

//appBar的 leading/actions   和 Scaffold的drawer/endDrawer  冲突只能存在一个

 

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return const MaterialApp(title: 'contaniner', home: HomePage());}
}class HomePage extends StatefulWidget {const HomePage({super.key});@overrideState<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {final _leftList = List.generate(20,(index) => const Column(children: [ListTile(leading: CircleAvatar(child: Icon(Icons.swipe_left, size: 30)),title: Text('左侧数据'),trailing: Icon(Icons.keyboard_arrow_right),),Divider()],),);final _rightList = List.generate(20,(index) => const Column(children: [ListTile(leading: CircleAvatar(child: Icon(Icons.swipe_right, size: 30)),title: Text('右侧数据'),selectedColor: Colors.green,trailing: Icon(Icons.keyboard_arrow_right),),Divider()],),);static const Widget _userImage = CircleAvatar(backgroundImage: NetworkImage('https://img0.baidu.com/it/u=2462933260,1879339806&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),radius: 200 //设置半径);@overrideWidget build(BuildContext context) {return Scaffold(drawer: Drawer(child: Column(children: [Container(width: double.infinity,child: const UserAccountsDrawerHeader(decoration: BoxDecoration(// color: Colors.green,image: DecorationImage(fit: BoxFit.cover,image: NetworkImage('https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),),),accountName: Text('小刀刀'),accountEmail: Text('49701361@qq.com'),currentAccountPicture: _userImage,otherAccountsPictures: [_userImage,_userImage,],),),Expanded(child: ListView(children: [..._leftList],),),],),),endDrawer: Drawer(child: Column(children: [Container(width: double.infinity,child: const DrawerHeader(decoration: BoxDecoration(color: Colors.green),child: Text("左侧侧数据"),),),Expanded(child: ListView(children: [..._rightList],),),],),),appBar: AppBar(title: const Center(child: Text('flutter bar')),// leading: IconButton(//   onPressed: () => print("我是图标按钮1"),//   icon: Icon(Icons.ac_unit), //设置图标//   color: Colors.red, //设置按钮颜色//   splashColor: Colors.yellow, //设置水波纹//   highlightColor: Colors.purple, //设置高亮的颜色//   tooltip: '我是提示信息', //提示信息// ),// actions: const [//   Icon(Icons.settings),//   Icon(Icons.vaccines),// ],backgroundColor: Colors.cyan[800],elevation: 0.0,centerTitle: true,),//带索引的集合循环body:HomeWidget());}
}class HomeWidget extends StatelessWidget {const HomeWidget({super.key});@overrideWidget build(BuildContext context) {// return const Text('我是首页数据', style: TextStyle(color: Colors.red));return ListView(children: List.generate(20,(index) => ListTile(leading: Icon(Icons.access_alarm, size: 30),title: Text('测试$index'),subtitle: Text('子标题$index'),selected: index == 1,selectedColor: Colors.green,trailing: Icon(Icons.keyboard_arrow_right),),));}
}

http://www.lryc.cn/news/324152.html

相关文章:

  • vulnhub prime1通关
  • JVM快速入门(1)JVM体系结构、运行时数据区、类加载器、线程共享和独享、分区、Java对象实例化
  • CSS3新属性(学习笔记)
  • 41-Vue-webpack基础
  • 数据仓库的分层理论
  • MySQL 8.0-索引- 不可见索引(invisible indexes)
  • Uibot6.0 (RPA财务机器人师资培训第3天 )财务招聘信息抓取机器人案例实战
  • Eureka和Nacos的关系
  • 极简自建web视频会议,私有云,rtmp/rtsp/webrtc一键参会直播会议互动方案
  • 5G智能网关助力工业铸造设备监测升级
  • 奇舞周刊第523期:来自 rust 生态的强烈冲击?谈谈 Leptos 在语法设计上的精妙之处...
  • 《边缘计算:连接未来的智慧之桥》
  • php 各种魔术函数的触发条件
  • Linux的学习之路:2、基础指令(1)
  • 0103设计算法-算法基础-算法导论第三版
  • [NCTF2019]SQLi ---不会编程的崽
  • 上位机开发 halcon坐标转轴坐标
  • [数据结构]二叉树(下)
  • 动手学深度学习|notebook教程
  • C#面:简述 .NET Framework 类库中的“命名空间”
  • android.os.TransactionTooLargeException解决方案,Kotlin
  • ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP
  • 汇丰:当前的美股是泡沫吗?
  • 颠覆传统:Web3如何塑造未来的数字经济
  • iOS模拟器 Unable to boot the Simulator —— Ficow笔记
  • 使用 Flink + Faker Connector 生成测试数据压测 MySQL
  • Android单片机硬件通信《GPIO通信》
  • C# WPF编程-事件
  • C语言 预处理器 注释 基本案例讲解
  • Flutter学习10 - Json解析与Model使用