RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1083335
Accepted
Andrey Khan
Andrey Khan
Asked:2020-02-16 20:46:26 +0000 UTC2020-02-16 20:46:26 +0000 UTC 2020-02-16 20:46:26 +0000 UTC

Flutter Drawer 隐藏/显示功能

  • 772

我正在尝试在 WebApp 中创建管理面板。原生抽屉在打开时完全覆盖内容,我想让它在单击图标时始终打开和关闭。如何制作隐藏/显示功能?编码:

class AdminPage extends StatefulWidget {
  @override
  _AdminPage createState() => _AdminPage();
}

bool isColapsed = true;

class _AdminPage extends State<AdminPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Builder(
            builder: (context) => IconButton(
                icon: Icon(Icons.menu),
                onPressed: () => Scaffold.of(context).openEndDrawer())),
        backgroundColor: Colors.deepOrange,
        actions: <Widget>[IconButton(icon: Icon(Icons.menu), onPressed: () {})],
      ),
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.amberAccent,
            child: Center(
              child: Text('content'),
            ),
          ),
        ],
      ),
    );
  }
}

重新设计的小部件

    class SideMenu extends StatefulWidget {
  @override
  _SideMenuState createState() => _SideMenuState();
}

bool isSideBarOpened = true;
final _animationDuration = const Duration(milliseconds: 500);

class _SideMenuState extends State<SideMenu> {
  Widget widgetForBody = FirstPage();
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return AnimatedPositioned(
      duration: _animationDuration,
      top: 0,
      bottom: 0,
      left: isSideBarOpened ? 0 : -300,
      right: isSideBarOpened ? 0 : screenWidth - 35,
      child: Row(
        children: <Widget>[
          Flexible(
            child: Container(
              width: 300.0,
              color: Colors.deepOrange,
              child: Column(
                children: <Widget>[
                  ListTile(
                    title: Text('First Page'),
                    onTap: () {
                      setState(() {
                        widgetForBody = FirstPage();
                      });
                    },
                  ),

                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment(0, -0.9),
            child: Container(
              width: 35,
              height: 100,
              color: Colors.deepOrange,
              child: IconButton(
                icon: Icon(Icons.menu),
                onPressed: () {
                  setState(() {
                    isSideBarOpened = !isSideBarOpened;
                  });
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}
flutter
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. MiT
    2020-02-18T00:32:28Z2020-02-18T00:32:28Z

    其实这已经不是 Drawer 了,而是它自己实现的菜单……你可以在DartPad中查看。

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MaterialApp(home: AdminPage()));
    }
    
    class AdminPage extends StatefulWidget {
      @override
      _AdminPage createState() => _AdminPage();
    }
    
    class _AdminPage extends State<AdminPage> {
      bool _isMenuVisibility = true;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            leading: Builder(
              builder: (context) => IconButton(
                icon: Icon(Icons.menu),
                onPressed: () => setState(() => (_isMenuVisibility)
                    ? _isMenuVisibility = false
                    : _isMenuVisibility = true),
              ),
            ),
            backgroundColor: Colors.deepOrange,
            actions: <Widget>[
              IconButton(icon: Icon(Icons.menu), onPressed: () {}),
            ],
          ),
          body: Stack(
            children: <Widget>[
              Container(
                color: Colors.amberAccent,
                child: Center(
                  child: Text('content'),
                ),
              ),
              menu(),
            ],
          ),
        );
      }
    
      Widget menu() {
        return Visibility(
          visible: _isMenuVisibility,
          child: Drawer(
            child: Padding(
              padding: EdgeInsets.only(left: 0.0),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  // width: 250.0,
                  color: Colors.blueGrey,
                  child: Column(
                    children: <Widget>[
                      Flexible(
                        child: ListView(
                          children: <Widget>[
                            ListTile(
                              title: Text('page1'),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }
    
    • 0
  2. Best Answer
    Serge Shkurko
    2020-02-25T19:35:25Z2020-02-25T19:35:25Z

    Drawer 的出现和隐藏动画的实现。

    在此处输入图像描述

    代码也可以在dartpad中播放

    import 'package:flutter/material.dart';
    ​
    /// Ширина Drawer'a
    const double drawerWidth = 200;
    /// Длительность анимации открытия и закрытия в миллисекундах
    const Duration drawerAnimationDuration = Duration(milliseconds: 250);
    ​
    void main() {
      runApp(MaterialApp(home: AdminPage()));
    }
    ​
    class AdminPage extends StatefulWidget {
      @override
      _AdminPage createState() => _AdminPage();
    }
    ​
    class _AdminPage extends State<AdminPage> with SingleTickerProviderStateMixin {
      AnimationController _animation;
    ​
      @override
      void initState() {
        _animation = AnimationController(
          // Значение, определяющее открыт ли Drawer 
          // при первом появлении страницы. 0 - закрыт, 1 - открыт
          value: 1,
          vsync: this,
          duration: drawerAnimationDuration,
        );
    ​
        super.initState();
      }
    ​
      @override
      void dispose() {
        _animation.dispose();
        super.dispose();
      }
    ​
      void _menuButtonPressed() {
        if (_animation.isAnimating) return;
        _animation.isCompleted ? _animation.reverse() : _animation.forward();
      }
    ​
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: <Widget>[
              SlideTransition(
                position: Tween<Offset>(
                  begin: Offset(-1, 0),
                  end: Offset.zero,
                ).animate(_animation),
                child: _buildMenu(),
              ),
              AnimatedBuilder(
                animation: _animation,
                builder: (_, widget) => Padding(
                  padding: EdgeInsets.only(left: drawerWidth * _animation.value),
                  child: widget,
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    AppBar(
                      title: Text('Admin panel'),
                      leading: IconButton(
                        icon: Icon(Icons.menu),
                        onPressed: _menuButtonPressed,
                      ),
                    ),
                    Expanded(
                      child: _buildContent(),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }
    ​
      Widget _buildMenu() {
        return Container(
          width: drawerWidth,
          decoration: BoxDecoration(
            border: Border(right: BorderSide(color: Colors.grey[300])),
          ),
          child: ListView(
            children: <Widget>[
              ListTile(title: Text("Menu A")),
              ListTile(title: Text("Menu B")),
              ListTile(title: Text("Menu C")),
              ListTile(title: Text("Menu D")),
            ],
          ),
        );
      }
    ​
      Widget _buildContent() {
        return Container(
          child: Center(child: Text('Content')),
          color: Colors.grey[200],
        );
      }
    }
    
    • 0

相关问题

  • statlesswidget 和 stateful 的区别

  • 跟踪首次登录 Flutter 应用程序 [关闭]

  • 是否可以将常规字符串编码为 json?

  • 当我使用 onDelete() 方法删除小部件时可能会出现什么问题

  • 颤振列不显示元素

  • 数据库记录中的竞争条件和差异

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5