Flutter 如何在颤振中创建工作侧栏

最近我跟踪了一个男人的故事，并完成了它

然后我看到代码“appBar”正在使用一个类。它与我找到的任何教程都不同，因此我修改了该类，添加了侧栏（drawer），工作正常，但存在一个问题

侧边栏在底层，主体在二楼。您将了解下面的屏幕截图

这是主屏幕代码：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _country = 'ID';

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: CustomAppBar(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildPreventionTips(screenHeight),
          _buildYourOwnTest(screenHeight),
        ],
      ),
    );
  }

类主屏幕扩展StatefulWidget{
@凌驾
_HomeScreenState createState（）=>\u HomeScreenState（）；
}
类_homescrenstate扩展状态{
字符串_country='ID'；
@凌驾
小部件构建（构建上下文）{
最终屏幕高度=MediaQuery.of（context）.size.height；
返回脚手架(
appBar:CustomAppBar（），
正文：自定义滚动视图(
物理：ClampingScrollPhysics（），
条子：[
_buildHeader（屏幕高度），
_建筑预防提示（屏幕高度），
_构建自己的测试（屏幕高度），
],
),
);
}

这是custombarapp代码

import 'package:flutter/material.dart';
import 'package:covid_19_master/config/palette.dart';

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('this is appbar'),
        backgroundColor: Palette.primaryColor,
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(child: Text('ini header ya')),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
          ],
        ),
      ),
    );
  }

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

导入“包装：颤振/材料.省道”；
导入“package:covid_19_master/config/palete.dart”；
类CustomAppBar使用PreferredSizeWidget扩展无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“这是appbar”），
背景色：调色板.primaryColor，
标高：0.0，
),
抽屉(
子：ListView(
儿童：[
抽屉阅读器（子：文本（'ini头ya'）），
列表砖(
标题：文本（'ini listnya'），
),
列表砖(
标题：文本（'ini listnya'），
),
列表砖(
标题：文本（'ini listnya'），
),
列表砖(
标题：文本（'ini listnya'），
),
],
),
),
);
}
@凌驾
Size get preferredSize=>Size.fromHeight（kToolbarHeight）；
}

问题在于您的

CustomAppBar（）

，它有自己的

Scaffold（）

，它位于父类中的另一个

Scaffold（）

下，即

HomeScreen（）

。避免这种情况，因为Flatter StatefWidget不能有嵌套的Scaffold

不要让事情变得复杂。而是在同一个

主页
中使用
AppBar（）
和
Drawer（）
分别使用属性
AppBar（）
和
Drawer（）
。然后在视图中使用它

主页

import 'package:flutter/material.dart';
import 'package:covid_19_master/config/palette.dart';

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('this is appbar'),
        backgroundColor: Palette.primaryColor,
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(child: Text('ini header ya')),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
          ],
        ),
      ),
    );
  }

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

同时查看评论以了解全貌，你会很好：）

class\u homescrenstate扩展状态{
字符串_country='ID'；
//具有Appbar数据类型的Appbar代码
Appbar\u customAppBar（）=>Appbar(
标题：文本（“这是appbar”），
背景色：调色板.primaryColor，
标高：0.0，
);
//具有抽屉属性的抽屉小部件
抽屉_customDrawer（）=>抽屉(
子：ListView(
儿童：[
抽屉阅读器（子：文本（'ini头ya'）），
列表砖(
标题：文本（'ini listnya'），
),
列表砖(
标题：文本（'ini listnya'），
),
列表砖(
标题：文本（'ini listnya'），
),
列表砖(
标题：文本（'ini listnya'），
)
]
)
);
@凌驾
小部件构建（构建上下文）{
最终屏幕高度=MediaQuery.of（context）.size.height；
返回脚手架(
//在这里使用它的首选尺寸
appBar:PreferredSizeWidget(
preferredSize:Size.fromHeight（kToolbarHeight），
子项：\ u customAppBar（）//您的appbr
),
//你的抽屉
抽屉：_customDrawer（），
正文：自定义滚动视图(
物理：ClampingScrollPhysics（），
条子：[
_buildHeader（屏幕高度），
_建筑预防提示（屏幕高度），
_构建自己的测试（屏幕高度），
],
),
);
}
}
我不熟悉Drawer小部件，但从文档来看。我不认为它应该在appBar中，但它应该在它自己的“主属性”中。太好了@YovanGaming继续努力！让这个应用程序正常运行，并在PlayStore和Apple Store上发布它，其中包含一些您认为可以很好且独特的更改。Al我是最好的伴侣！：）