如何使用 Flutter 创建管理 UI 左侧菜单 [关闭]

Posted 2023-02-23

【中文标题】如何使用 Flutter 创建管理 UI 左侧菜单 [关闭]

【英文标题】：How to create an admin UI left menu with Flutter [closed]

【发布时间】：2021-02-22 03:58:56

【问题描述】：

我是 Flutter 的新手，但我有好奇心。考虑到您可以在网上找到的典型引导管理 UI 和典型的左侧菜单，您将如何使用颤振重新创建它？我对可以通过单击按钮调整大小的左侧菜单和可以出现和消失的子菜单特别感兴趣。

可以找到一个例子here

编辑：

我也想清楚我试图重现的效果。如果您单击与左侧示例相关的链接，您会看到一些菜单。例如，单击Base，您将看到一个垂直菜单出现和消失。我也想知道如何重现它。

谢谢

谢谢

【参考方案1】：

我尝试重新创建相同的设计，但对 Flutter 进行了一些小改动。我必须按照此处的说明启用 Flutter Web 支持： Flutter Web

关于左侧菜单，我使用了AnimatedSize 小部件来赋予滑动抽屉的感觉并将其放置在Row 中。

请在下面找到代码：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  


class MyWidget extends StatefulWidget 
  @override
  _MyWidgetState createState() => _MyWidgetState();


class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin 
  final colors = <Color>[Colors.indigo, Colors.blue, Colors.orange, Colors.red];

  double _size = 250.0;

  bool _large = true;

  void _updateSize() 
    setState(() 
      _size = _large ? 250.0 : 0.0;
      _large = !_large;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Row(
        children: [
          AnimatedSize(
              curve: Curves.easeIn,
              vsync: this,
              duration: Duration(seconds: 1),
              child: LeftDrawer(size: _size)),
          Expanded(
            flex: 4,
            child: Container(
              child: Column(
                children: [
                  Container(
                    color: Colors.white,
                    padding: const EdgeInsets.all(8),
                    child: Row(
                      children: [
                        IconButton(
                          icon: Icon(Icons.menu, color: Colors.black87),
                          onPressed: () 
                            _updateSize();
                          ,
                        ),
                        FlatButton(
                          child: Text(
                            'Dashboard',
                            style: const TextStyle(color: Colors.black87),
                          ),
                          onPressed: () ,
                        ),
                        FlatButton(
                          child: Text(
                            'User',
                            style: const TextStyle(color: Colors.black87),
                          ),
                          onPressed: () ,
                        ),
                        FlatButton(
                          child: Text(
                            'Settings',
                            style: const TextStyle(color: Colors.black87),
                          ),
                          onPressed: () ,
                        ),
                        const Spacer(),
                        IconButton(
                          icon: Icon(Icons.brightness_3, color: Colors.black87),
                          onPressed: () ,
                        ),
                        IconButton(
                          icon: Icon(Icons.notification_important,
                              color: Colors.black87),
                          onPressed: () ,
                        ),
                        CircleAvatar(),
                      ],
                    ),
                  ),
                  Container(
                    height: 1,
                    color: Colors.black12,
                  ),
                  Card(
                    margin: EdgeInsets.zero,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(0),
                    ),
                    child: Container(
                      color: Colors.white,
                      padding: const EdgeInsets.all(20),
                      child: Row(
                        children: [
                          Text(
                            'Home / Admin / Dashboard',
                            style: const TextStyle(color: Colors.black),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: ListView(
                      children: [
                        Row(
                          children: [
                            _container(0),
                            _container(1),
                            _container(2),
                            _container(3),
                          ],
                        ),
                        Container(
                          height: 400,
                          color: Color(0xFFE7E7E7),
                          padding: const EdgeInsets.all(16),
                          child: Card(
                            color: Colors.white,
                            child: Container(
                              padding: const EdgeInsets.all(16),
                              child: Text(
                                'Traffic',
                                style: const TextStyle(color: Colors.black87),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  

  Widget _container(int index) 
    return Expanded(
      child: Container(
        padding: const EdgeInsets.all(20),
        color: Color(0xFFE7E7E7),
        child: Card(
          color: Color(0xFFE7E7E7),
          child: Container(
            color: colors[index],
            width: 250,
            height: 140,
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Expanded(
                        child: Text(
                      '9.823',
                      style: TextStyle(fontSize: 24),
                    )),
                    Icon(Icons.more_vert),
                  ],
                ),
                Text('Members online')
              ],
            ),
          ),
        ),
      ),
    );
  


class LeftDrawer extends StatelessWidget 
  const LeftDrawer(
    Key key,
    this.size,
  ) : super(key: key);

  final double size;

  @override
  Widget build(BuildContext context) 
    return Expanded(
      flex: 1,
      child: Container(
        width: size,
        color: const Color(0xFF2C3C56),
        child: ListView(
          children: [
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(16),
              color: Color(0xFF223047),
              child: Text('CORE UI'),
            ),
            _tile('Dashboard'),
            Container(
                padding: const EdgeInsets.only(left: 10),
                margin: const EdgeInsets.only(top: 30),
                child: Text('THEME',
                    style: TextStyle(
                      color: Colors.white54,
                    ))),
            _tile('Colors'),
            _tile('Typography'),
            _tile('Base'),
            _tile('Buttons'),
          ],
        ),
      ),
    );
  

  Widget _tile(String label) 
    return ListTile(
      title: Text(label),
      onTap: () ,
    );
  

【讨论】：

谢谢，这真的很酷。垂直菜单呢？有没有办法让我点击一个声音并查看出现和消失的子菜单？

是的，这也可以实现。如果您觉得这很有用，您可以投票或接受答案。

当然，您能否更新您的答案并添加该部分？我肯定会赞成并接受它。伟大的工作

你能说得更具体些吗？比如你说的是哪个垂直菜单？您是指组件垂直菜单中的 Base 选项还是 Notification 垂直菜单？

问题已关闭，因为不是很清楚。我会在几秒钟内创建一个新的

【参考方案2】：

您可以在Scaffold 中使用Drawer 小部件。如果您希望导航抽屉能够根据浏览器的高度和宽度调整大小，您可以使用responsive_scaffold 包。