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

小刀_逸

已于 2024-03-22 14:13:58 修改

阅读量659

点赞数 4

文章标签： flutter

于 2024-03-20 17:29:32 首次发布

本文链接：https://blog.csdn.net/q7410p123/article/details/136882918

版权

本文讨论了在Flutter应用中，如何处理AppBar的leading/actions与Scaffold的drawer（包括endDrawer）之间的冲突，以及展示了如何在主页布局中使用相关组件。

摘要由CSDN通过智能技术生成

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

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'contaniner', home: HomePage());
  }
}

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

  @override
  State<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 //设置半径
  );
  @override
  Widget 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});

  @override
  Widget 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),
      ),
    ));
  }
}