如何使导航抽屉出现在应用栏/工具栏的底部答案

【问题标题】：How to make navigation drawer appear bottom to app bar/ tool bar如何使导航抽屉出现在应用栏/工具栏的底部
【发布时间】：2019-12-27 20:10:33
【问题描述】：

我已经实现了导航抽屉。抽屉覆盖了应用栏，但我需要的是它不应该覆盖应用栏，导航抽屉应该从应用栏的底部开始。我已经实现了将列表图块置于底部，但我需要整个导航抽屉位于应用栏/工具栏的底部

我在下面附上截图供参考

import 'package:flutter/material.dart';
import 'package:navigationdrawer/second_fragment.dart';
import 'package:navigationdrawer/third_fragment.dart';

import 'first_fragment.dart';

class DrawerItem {
  String title;
  IconData icon;
  DrawerItem(this.title, this.icon);
}

void main() => runApp(new HomePage());

class HomePage extends StatefulWidget {
  final drawerItems = [
    new DrawerItem("Fragment 1", Icons.rss_feed),
    new DrawerItem("Fragment 2", Icons.local_pizza),
    new DrawerItem("Fragment 3", Icons.info)
  ];

  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  int _selectedDrawerIndex = 0;

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new FirstFragment();
      case 1:
        return new SecondFragment();
      case 2:
        return new ThirdFragment();

      default:
        return new Text("Error");
    }
  }

  _onSelectItem(int index) {
    setState(() => _selectedDrawerIndex = index);
    Navigator.of(context).pop(); // close the drawer
  }

  @override
  Widget build(BuildContext context) {
    var drawerOptions = <Widget>[];
    for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(new ListTile(
        leading: new Icon(d.icon),
        title: new Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
        ),
        drawer: new Drawer(
          child: Container(
            child: new Column(
              children: <Widget>[
                Column(children: drawerOptions)
              ],
            ),
          ),
        ),
        body: _getDrawerItemWidget(_selectedDrawerIndex),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart navigation-drawer flutter-appbar

【解决方案1】：

您可以为此使用ListView，也可以使用Column 和Padding。

更新：

使用内置的Drawer 不会让你去那里，你必须创建自己的抽屉。像这样的：

Row(
  children: [
    YourVerticalDrawer(), // give it a fixed width to make it look consistent
    YourAppMainContent(),
  ]
)

【讨论】：

它只是在导航抽屉的顶部增加了一个额外的空间。

【解决方案2】：

这应该可以解决问题

class DrawerTest extends StatelessWidget {
  AppBar appbar = AppBar(
    backgroundColor: Colors.red,
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbar,
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.only(top: appbar.preferredSize.height),
          children: <Widget>[
            ListTile(
              title: Text("item 1"),
            ),
            ListTile(
              title: Text("item 2"),
            ),
          ],
        ),
      ),
    );
  }
}

给了

【讨论】：

投反对票的人也应该提及原因。这个答案可能不是正确的方法，但正是 OP 想要的。