当前位置:   article > 正文

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

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

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

 

  1. import 'package:flutter/material.dart';
  2. void main() {
  3. runApp(MyApp());
  4. }
  5. class MyApp extends StatelessWidget {
  6. const MyApp({super.key});
  7. @override
  8. Widget build(BuildContext context) {
  9. return const MaterialApp(title: 'contaniner', home: HomePage());
  10. }
  11. }
  12. class HomePage extends StatefulWidget {
  13. const HomePage({super.key});
  14. @override
  15. State<HomePage> createState() => _HomePageState();
  16. }
  17. class _HomePageState extends State<HomePage> {
  18. final _leftList = List.generate(
  19. 20,
  20. (index) => const Column(
  21. children: [
  22. ListTile(
  23. leading: CircleAvatar(child: Icon(Icons.swipe_left, size: 30)),
  24. title: Text('左侧数据'),
  25. trailing: Icon(Icons.keyboard_arrow_right),
  26. ),
  27. Divider()
  28. ],
  29. ),
  30. );
  31. final _rightList = List.generate(
  32. 20,
  33. (index) => const Column(
  34. children: [
  35. ListTile(
  36. leading: CircleAvatar(child: Icon(Icons.swipe_right, size: 30)),
  37. title: Text('右侧数据'),
  38. selectedColor: Colors.green,
  39. trailing: Icon(Icons.keyboard_arrow_right),
  40. ),
  41. Divider()
  42. ],
  43. ),
  44. );
  45. static const Widget _userImage = CircleAvatar(
  46. backgroundImage: NetworkImage('https://img0.baidu.com/it/u=2462933260,1879339806&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
  47. radius: 200 //设置半径
  48. );
  49. @override
  50. Widget build(BuildContext context) {
  51. return Scaffold(
  52. drawer: Drawer(
  53. child: Column(
  54. children: [
  55. Container(
  56. width: double.infinity,
  57. child: const UserAccountsDrawerHeader(
  58. decoration: BoxDecoration(
  59. // color: Colors.green,
  60. image: DecorationImage(
  61. fit: BoxFit.cover,
  62. image: NetworkImage(
  63. 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
  64. ),
  65. ),
  66. accountName: Text('小刀刀'),
  67. accountEmail: Text('49701361@qq.com'),
  68. currentAccountPicture: _userImage,
  69. otherAccountsPictures: [
  70. _userImage,
  71. _userImage,
  72. ],
  73. ),
  74. ),
  75. Expanded(
  76. child: ListView(
  77. children: [..._leftList],
  78. ),
  79. ),
  80. ],
  81. ),
  82. ),
  83. endDrawer: Drawer(
  84. child: Column(
  85. children: [
  86. Container(
  87. width: double.infinity,
  88. child: const DrawerHeader(
  89. decoration: BoxDecoration(color: Colors.green),
  90. child: Text("左侧侧数据"),
  91. ),
  92. ),
  93. Expanded(
  94. child: ListView(
  95. children: [..._rightList],
  96. ),
  97. ),
  98. ],
  99. ),
  100. ),
  101. appBar: AppBar(
  102. title: const Center(child: Text('flutter bar')),
  103. // leading: IconButton(
  104. // onPressed: () => print("我是图标按钮1"),
  105. // icon: Icon(Icons.ac_unit), //设置图标
  106. // color: Colors.red, //设置按钮颜色
  107. // splashColor: Colors.yellow, //设置水波纹
  108. // highlightColor: Colors.purple, //设置高亮的颜色
  109. // tooltip: '我是提示信息', //提示信息
  110. // ),
  111. // actions: const [
  112. // Icon(Icons.settings),
  113. // Icon(Icons.vaccines),
  114. // ],
  115. backgroundColor: Colors.cyan[800],
  116. elevation: 0.0,
  117. centerTitle: true,
  118. ),
  119. //带索引的集合循环
  120. body:HomeWidget()
  121. );
  122. }
  123. }
  124. class HomeWidget extends StatelessWidget {
  125. const HomeWidget({super.key});
  126. @override
  127. Widget build(BuildContext context) {
  128. // return const Text('我是首页数据', style: TextStyle(color: Colors.red));
  129. return ListView(
  130. children: List.generate(
  131. 20,
  132. (index) => ListTile(
  133. leading: Icon(Icons.access_alarm, size: 30),
  134. title: Text('测试$index'),
  135. subtitle: Text('子标题$index'),
  136. selected: index == 1,
  137. selectedColor: Colors.green,
  138. trailing: Icon(Icons.keyboard_arrow_right),
  139. ),
  140. ));
  141. }
  142. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/307716
推荐阅读
相关标签
  

闽ICP备14008679号