【发布时间】：2019-02-05 18:04:01
【问题描述】：
我想在所有屏幕上保留 Navigation Drawer。在这个问题上一直存在问题，但我的问题与 e.g. 略有不同。 Persisting AppBar Drawer across all Pages Flutter
我有导航抽屉，其中包含名为 A、B 和 C 的项目列表。在导航抽屉中单击 A 时，屏幕 A 将打开，并且 B 和 C 的内容分别相同。现在 C 屏幕有一个按钮，点击该按钮按钮 我要去屏幕 D，现在虽然屏幕 D 显示导航抽屉图标，但抽屉永远不会打开。我尝试在调用抽屉的方法中打印一条语句，打印语句确实打印但抽屉永远不会打开。以下是我的代码
我有一个基类，其抽屉如下
class BaseScreen extends StatefulWidget {
final List<Menu> menuList;
final String userType;
final String userId;
const BaseScreen({Key key, this.menuList, this.userType, this.userId})
: super(key: key);
@override
BaseScreenState createState() {
return new BaseScreenState();
}
}
class BaseScreenState extends State<BaseScreen> {
String screenNameSelected = "A";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
_getDrawerItemWidget(screenNameSelected),
],
),
drawer: SizedBox(
width: 100,
child: Drawer(
child: ListView.separated(
separatorBuilder: (context, index) => Material(
elevation: 2,
shadowColor: shadow,
child: Divider(
color: white,
),
),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
openScreen(
widget.menuList[index].title,
widget.userId,
MenuList.returnLoginType(widget.userType).toString(),
context);
Navigator.pop(context);
},
title: Padding(
padding: const EdgeInsets.only(top: 8),
child: Image.asset(
widget.menuList[index].image,
width: 35,
height: 35,
),
),
);
},
itemCount: widget.menuList?.length ?? 0,
shrinkWrap: true,
physics: BouncingScrollPhysics(),
),
),
),
);
}
_getDrawerItemWidget(String selectedScreenName) {
switch (selectedScreenName) {
case A:
return A();
case B:
return B();
case C:
return C();
default:
return Container();
}
}
void openScreen(String screenName, String userId, String loginType,
BuildContext context) {
if (screenName.toLowerCase() == "A".toLowerCase()) {
setState(() {
screenNameSelected = "A";
});
} else if (screenName.toLowerCase() == "B".toLowerCase()) {
setState(() {
screenNameSelected = "B";
});
} else if (screenName.toLowerCase() == "C".toLowerCase()) {
setState(() {
screenNameSelected = "C";
});
}
}
}
我为应用栏创建了一个自定义类，因为我的应用栏是高度自定义的
class CustomAppBar extends StatelessWidget {
final String subTitleText;
final String subTitleImage;
const CustomAppBar(
{Key key, @required this.subTitleText, @required this.subTitleImage})
: super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
SafeArea(
child: Column(
children: <Widget>[
Builder(builder: (context) => customAppBar(context)),
SizedBox(
height: 5.0,
),
subTitleRow(
subTitleText,
subTitleImage,
)
],
),
),
],
);
}
}
Widget subTitleRow(String subtitleText, String subtitleImage) {
.........
}
Widget customAppBar(BuildContext context) {
return Material(
elevation: 5.0,
shadowColor: shadow,
child: SafeArea(
child: Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Image.asset(
"images/toolbar_logo.webp",
width: 80,
height: 50,
),
],
),
IconButton(
icon: Image.asset("images/menu.webp"),
onPressed: () {
Scaffold.of(context).openDrawer();
},
iconSize: 20,
),
],
),
),
);
}
现在我的 A、B 和 C 班没有脚手架，但我为 D 班提供了脚手架，我认为这是导致问题的原因。不为 D 类提供脚手架并不能提供正确的布局
A、B、C类代码如下
class A extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ShortBioProvider(
child: Column(
children: <Widget>[
CustomAppBar(
subTitleImage: "images/settings.webp",
subTitleText: SETTINGS.toUpperCase(),
),
SizedBox(
height: 20,
),
SettingsList(),
],
),
);
}
}
B 和 C 与 A 非常相似。
现在是 D 类代码
class D extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(body: Column(children: <Widget>[
CustomAppBar(
subTitleImage: "images/settings.webp",
subTitleText: D.toUpperCase(),
),
SizedBox(
height: 20,
),
........
],),);
}
}
我已经对上述类进行了很多编辑，因此这里或那里可能缺少括号或分号
【问题讨论】：
-
看起来您正在使用函数而不是它们自己的类在同一个类中构建小部件。这可能会导致与 BuildContext 相关的问题，但如果没有您的所有代码，就很难判断。我首先建议将基本上是封闭小部件（即应用栏）的东西移动到它们自己的有状态或无状态小部件类中，然后如果这无助于发布所有相关代码（即特别是屏幕 D 可能是有趣的）。如果那里有专有的东西（即使没有），如果你从代码中删除任何不相关的东西会很有帮助。
-
@rmtmckenzie 我正在使用 A、B、C 和 D 屏幕的类。自定义应用栏也在单独的类中。我将很快发布 D 类的代码
-
@rmtmckenzie 请看一下我已经为所有类添加了代码
标签： dart flutter navigation-drawer