flutter - 从抽屉菜单导航到另一个页面并将标题设置为应用栏

Question

我是 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

提前致谢

Answer 1

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

最终结果: