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

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

最后结果：