如何在Flutter中创建一个工作侧边栏

Question

最近我在跟踪一个家伙的速度码并完成了它。

然后我看到代码"；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),
],
),
);
}

这是海关应用程序代码

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()。避免这种类型的事情，因为Flutter StatefulWidget不能有嵌套的脚手架

不要让事情变得复杂。而是在同一个HomePage中使用AppBar()和Drawer()，分别具有属性AppBar()和Drawer()。然后在视图中使用它。

主页

看看评论也可以得到全貌，你会很好：(

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