flutter - 如何在Flutter中创建工作侧栏

Question

最近，我正在跟踪一个人的speedcode并完成它。
然后我看到代码“appBar”正在使用the screenshot of the code类。它与我发现的任何教程都不同，因此我修改了该类以添加侧边栏(抽屉)，它的工作正常，但是存在问题。
侧边栏在二楼，主体在二楼。您将通过下面的屏幕截图了解
this is before I click the sidebar button
this is after I click the button
这是主屏幕代码:

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),
        ],
      ),
    );
  }

这是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);
}

Answer 1

问题出在你的CustomAppBar()上，它有它自己的Scaffold()，它位于父类的另一个Scaffold()之下，即HomeScreen()。避免这种事情，因为Cos Flutter StatefulWidget不能有嵌套的脚手架
不要使事情复杂化。而是在同一AppBar()本身中使用Drawer()和HomePage，分别使用AppBar()和Drawer()属性。然后在 View 中使用它。
主页
还可以查看评论以获取完整图片，您会很好的:)

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

  // Appbar code with Appbar Data Type
  Appbar _customAppBar() => AppBar(
    title: Text('this is appbar'),
    backgroundColor: Palette.primaryColor,
    elevation: 0.0,
  );

  // Drawer widget with Drawer property
  Drawer _customDrawer() => 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
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      // use it here with Preferred size
      appBar: PreferredSizeWidget(
         preferredSize: Size.fromHeight(kToolbarHeight),
         child: _customAppBar() // your appabr
      ),
      // your drawer
      drawer: _customDrawer(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildPreventionTips(screenHeight),
          _buildYourOwnTest(screenHeight),
        ],
      ),
    );
  }
}