dart - Flutter side drawer 作为一个 widget

Question

我正在尝试在我的 flutter 应用程序中将侧边抽屉实现为小部件

home.dart

import '../widgets/navigation_drawer_widget.dart'; //imported the nav drawer class from widgets directory

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(length: 2,
        child: Scaffold(
          drawer: DrawerWidget(),
          appBar: AppBar(
            title: Text('Home'),
            bottom: TabBar(tabs: <Widget>[
              Tab(
                icon: Icon(Icons.access_time),
                text: 'Tab 1',
              ),
              Tab(
                icon: Icon(Icons.calendar_today),
                text: 'Tab 2',
              )
            ]),
          ),
          body: TabBarView(children: <Widget>[
            Tab1(),
            Tab2()
          ]),
        )
    );
  }
}

我的抽屉小部件 ** navigation_drawer_widget.dart** 文件

import 'package:flutter/material.dart';

class DrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        AppBar(
          automaticallyImplyLeading: false,
          title: Text('Menu'),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Home'),
          onTap: () {
            Navigator.pushReplacementNamed(context, '/home');
          },
        ),
        ListTile(
          leading: Icon(Icons.person),
          title: Text('My Profile'),
          onTap: () {
            Navigator.pushReplacementNamed(context, '/profile');
          },
        ),
        ListTile(
          leading: Icon(Icons.school),
          title: Text('My Education'),
          onTap: () {
            Navigator.pushReplacementNamed(context, '/education');
          },
        ),
      ],
    );
  }
}

但是当我点击导航汉堡包图标时，它会显示类似这样的内容

如您所见，抽屉导航变得透明并延伸到页面的整个宽度。如果我将抽屉代码移至主页(而不是执行 DrawerWidget() )，它将显示常规的好抽屉导航。

知道这里发生了什么吗？

Answer 1

如果您想要默认的 Material Design 抽屉，您需要使用 Drawer 将 Column 包裹在 DrawerWidget 中。

来自文档:

A drawer could be any Widget, but it’s often best to use the Drawer widget from the material library, which adheres to the Material Design spec.

https://flutter.io/cookbook/design/drawer/