我是 flutter 的新手,希望有人帮助我处理我在 github 中找到的我想使用的代码。看看下面的链接 https://github.com/JohannesMilke/drawer_example
这是一个抽屉导航的例子。我喜欢开发人员编码的方式,并想使用这个例子。问题是开发人员没有实现导航到另一个页面。当您单击抽屉中的项目时,它只会在控制台中打印一条消息。
我想更进一步。我想修改代码,以便当您单击某个项目时,它将导航到另一个页面并且抽屉将关闭。抽屉图标应保留在显示的新页面的工具栏上。此外,当您导航到另一个页面时,该页面的标题应该在工具栏中设置。
当我查看代码时,我知道要更改哪里,但我没有成功。我想我需要更改代码底部的 body 标签。问题是我不知道如何调用 drawer_widget.dart 文件中的 DrawerWidgetState 类。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final String appTitle = 'Ttitle';
@override
Widget build(BuildContext context) => MaterialApp(
title: appTitle,
theme: ThemeData(
primaryColor: Colors.red,
textTheme: TextTheme(
subhead: TextStyle(
color: Colors.black.withOpacity(0.4),
),
),
dividerColor: Colors.black.withOpacity(0.4),
),
home: MainPage(appTitle: appTitle),
);
}
class MainPage extends StatefulWidget {
final String appTitle;
const MainPage({this.appTitle});
@override
MainPageState createState() => MainPageState();
}
class MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text(widget.appTitle),
),
drawer: DrawerWidget(),
body: container()
);
}
我在 drawer_widget.dart 文件中定义了以下函数
getDrawerItemWidget(int pos) {
print('testing');
switch (pos) {
case 0:
return new FirstFragment();
case 1:
return new SecondFragment();
case 2:
return new ThirdFragment();
default:
return new Text("Error");
}
}
但我不知道如何从 Mainpage Body 标签调用它并相应地设置标题。有人可以帮助修改代码,以便我可以导航到另一个页面并设置标题吗?完整代码在 https://github.com/JohannesMilke/drawer_example
提前致谢
最佳答案
使用 drawer_example
库,您需要做一些小的更改才能使其正常工作。
在你的 drawer_widget.dart 添加这个添加开头:
typedef TitleCallback = void Function(String, int);
一旦你这样做了,你的 Drawer StatefulWidget 应该看起来像这样:
class DrawerWidget extends StatefulWidget {
final TitleCallback callback;
final int tabIndex;
@override
DrawerWidgetState createState() => DrawerWidgetState();
DrawerWidget(this.callback, this.tabIndex);
}
和你的初始化状态:
@override
void initState() {
selectedDrawerIndex = widget.tabIndex;
selectedProfileIndex = 0;
super.initState();
}
这将是将新值传递回 main.dart 文件的构造函数。
在 ListTile 中,您可以添加以下逻辑:
ListTile(
leading: Icon(item.icon),
title: Text(item.name),
selected: selectedDrawerIndex == currentIndex,
onTap: () {
final item = getOffsetIndex(drawerGroups, currentIndex);
print('Selected index $selectedDrawerIndex with name ${item.name}');
setState(() {
selectedDrawerIndex = currentIndex;
widget.callback(item.name, selectedDrawerIndex);
});
Navigator.pop(context); // to close the Drawer
},
)
如果您可以检查,行:widget.callback(item.name);
通过回调发送选项卡名称,该逻辑可以应用于您想要更改标题的任何地方。它甚至可以是硬编码的标题,例如:
widget.callback("Second Tab");
现在,回到您的 main.dart 文件:
class MyApp extends StatefulWidget {
final String title;
ListExample(this.title);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<Widget> _fragments = <Widget> [
Container(
child: Text("Fragment One"),
),
Container(
child: Text("Fragment Two"),
),
Container(
child: Text("Fragment Three"),
),
];
String titleAppBar = "Testing";
int tabIndex = 0;
@override
void initState() {
setState(() {
titleAppBar = widget.title;
});
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: widget.title,
home: Scaffold(
appBar: AppBar(
title: Text(titleAppBar),
),
drawer: DrawerWidget((title, index) {
setState(() {
titleAppBar = title;
tabIndex = index;
});
}, tabIndex),
body: _fragments[tabIndex],
),
);
}
}
最终结果:
关于flutter - 从抽屉菜单导航到另一个页面并将标题设置为应用栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56637375/