Question

我在Drawer应用中实现了Flutter。

已关闭Drawer：

已打开Drawer：

如您所见，Drawer在Appbar的顶部。在Flutter上启动该应用程序之前，我们有一个本地Android应用程序，其中有一个Drawer看起来像这样：

已关闭Drawer：

已打开Drawer：

这是我的代码：

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _buildDrawer(context);
  }
}

Widget _buildDrawer(BuildContext context) {
  return new Drawer(
    child: new ListView(
      children: <Widget>[
        _buildDrawerItem(context, EnumDrawerItem.PROJECT_SELECTION, Icons.home, Colors.transparent),
        new Divider(height: 20.0),
        _buildDrawerItem(context, EnumDrawerItem.TASK_LIST, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.GUIDED_TASKS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.PHOTOS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.DOCUMENTS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.LOG_OUT, Icons.home, const Color(0x85bf0202)),
        new Divider(),
      ],
    ),
  );
}

Widget _buildDrawerItem(BuildContext context, EnumDrawerItem drawerItem, IconData iconData, Color color) {
  return  Container(
    color: color,
    child: new Padding(
      padding: new EdgeInsets.all(7.0),
      child: new Row(
        children: <Widget>[
          new Icon(iconData),
          new Container(
            margin: new EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
            child: new Text(
              drawerItem.toString(),
              style: styleDrawerItem,
            ),
          ),
        ],
      ),
    ),
  );
}

我知道这是标准的Material Design样式，但是客户希望像以前一样。

是否可以像最后两个屏幕截图一样实现它？你有什么主意吗？

Answer 1

将主Scaffold包裹在另一个Scaffold中，并使用子项Scaffold的抽屉，同时还要确保将automaticallyImplyLeading设置为false，这样您就不必在AppBar

中找回图标

更新： 由于issue

，我不推荐这种方式

return Scaffold(
      primary: true,
      appBar: AppBar(
        title: Text("Parent Scaffold"),
        automaticallyImplyLeading: false,
      ),
      body: Scaffold(
        drawer: Drawer(),
      ),
    );

最终结果：

Answer 2

我在示例中如何使用脚手架中的密钥和脚手架主体中的引用

Point startPoint;
        private void TreeViewItem_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            startPoint = e.GetPosition(null);
        }
        private void TreeViewItem_PreviewMouseMove(object sender, MouseEventArgs e)
        {

            Point mousePos = e.GetPosition(null);
            Vector diff = startPoint - mousePos;
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                TreeView treeView = sender as TreeView;
                if (treeView.SelectedItem != null)
                {
                    DataObject dragData = new DataObject("myFormat", treeView.SelectedItem);
                    DragDrop.DoDragDrop(treeView, dragData, DragDropEffects.Move);
                }
            }
        }
        private static T FindAnchestor<T>(DependencyObject current)
            where T : DependencyObject
        {
            do
            {
                if (current is T)
                {
                    return (T)current;
                }
                current = VisualTreeHelper.GetParent(current);
            }
            while (current != null);
            return null;
        }

Answer 3

试试这个：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var statusBarHeight = MediaQuery.of(context).padding.top;
    var appBarHeight = kToolbarHeight;  //this value comes from constants.dart and equals to 56.0
    return Scaffold(
      drawerScrimColor: Colors.transparent,
      appBar: AppBar(),
      drawer: Container(
        padding: EdgeInsets.only(top: statusBarHeight+ appBarHeight + 1),//adding one pixel for appbar shadow
        width: MediaQuery.of(context).size.width,
        child: Drawer(),//write your drawer code
      ),
      body: AnyBody(), //add your body
      bottomNavigationBar: AnyNavigationBar(), //add your navigation bar
    );
  }
}

AppBar下方的Flutter Drawer

3 个答案: