android - 为什么我的抽屉在我身后？[扑]

Question

我试图将我的应用栏和抽屉提取到单独的无状态小部件（elrDrawer.dart）中。但是当我点击汉堡图标（在 startUp.dart 中）时，抽屉在身体后面打开。有人可以告诉我为什么会这样以及如何解决吗？感谢帮助<3

class Startup extends StatefulWidget {
  @override
  _StartupState createState() => _StartupState();
}

class _StartupState extends State<Startup> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ElrDrawer(),
      drawer: ElrDrawer(),
      body: Container(
        color: Colors.pink,
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              startUpCard('Order', Order()),
              startUpCard('History', History()),
              startUpCard('Menu', Menu()),
              startUpCard('FAQ', FAQ()),
            ],
          ),
        ),
      ),
    );
  }

^ 启动.dart

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // automaticallyImplyLeading: false,
        title: Text('title'),
        actions: <Widget>[
          Padding(
            padding: EdgeInsets.all(10),
          ),
        ],
      ),
      drawer: Container(
        child: Drawer(
          child: ListView(
            children: [
              SizedBox(
                height: 300,
                child: DrawerHeader(
                  // padding: EdgeInsets.zero,
                  child: Stack(
                    alignment: Alignment.bottomLeft,
                    // fit: StackFit.passthrough,
                    children: [
                      Opacity(
                        opacity: 1,
                        child: Image.asset(
                          'assets/images/magik.png',
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              drawerListTile(context, 'HISTORY', History()),
              divider(),
              drawerListTile(context, 'MENU', Menu()),
              divider(),
              drawerListTile(context, 'FAQ', FAQ()),
              divider(),
              drawerListTile(context, 'DASHBOARD', null),
              divider(),
              drawerListTile(context, 'LOGOUT', null),
              divider(),
            ],
          ),
        ),
      ),
      body: Container(
        color: Colors.brown,
      ),
    );
  }

^elrDrawer.dart

startUp.dart 在单击汉堡图标之前

startUp.dart 单击汉堡图标后，抽屉仅出现在 appBar 中

标签： androidflutterdart

Answer 1

您在启动页面中的实际“主”的和属性中嵌套Scaffold了小部件。appBardrawerScaffold

通常：尝试Scaffold仅将小部件用于实际代表页面/视图的小部件，并为视图/小部件的其他部分使用更多“原始”/基本小部件。

这可能是一种方法：

start_up.dart

class Startup extends StatefulWidget {
  @override
  _StartupState createState() => _StartupState();
}

class _StartupState extends State<Startup> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ElrAppBar(),
      drawer: ElrDrawer(),
      body: Container(
        color: Colors.pink,
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              startUpCard('Order', Order()),
              startUpCard('History', History()),
              startUpCard('Menu', Menu()),
              startUpCard('FAQ', FAQ()),
            ],
          ),
        ),
      ),
    );
  }

elr_app_bar.dart

/// The appBar property of Scaffold expects a Widget that
/// is from type PreferredSizeWidget, therefore you need to
/// implement it here to make it work (it only requires you to
/// override the preferredSize getter
class ElrAppBar extends StatelessWidget implements PreferredSizeWidget {
  const ElrAppBar({Key? key}) : super(key: key);

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      // automaticallyImplyLeading: false,
      title: Text('title'),
      actions: <Widget>[
        Padding(
          padding: EdgeInsets.all(10),
        ),
      ],
    );
  }
}

elr_drawer.dart

class ElrDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          SizedBox(
            height: 300,
            child: DrawerHeader(
              // padding: EdgeInsets.zero,
              child: Stack(
              alignment: Alignment.bottomLeft,
              // fit: StackFit.passthrough,
                children: [
                  Opacity(
                    opacity: 1,
                    child: Image.asset(
                      'assets/images/magik.png',
                    ),
                  ),
                ],
              ),
            ),
          ),
          drawerListTile(context, 'HISTORY', History()),
          divider(),
          drawerListTile(context, 'MENU', Menu()),
          divider(),
          drawerListTile(context, 'FAQ', FAQ()),
          divider(),
          drawerListTile(context, 'DASHBOARD', null),
          divider(),
          drawerListTile(context, 'LOGOUT', null),
          divider(),
        ],
      ),
    );
  }