Question

我是新手，希望有人帮我处理我想在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()
  );
}

我在抽屉_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);
}

和您的initState：

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

最终结果：

Answer 2

查看GitHub上的示例，它使Flutter过于简单的事情变得过于复杂。

这是一个关于如何在Flutter上使用抽屉的简单示例：

main.dart

import 'package:flutter/material.dart';

import 'another_page.dart';
import 'home_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // declaring your routes will allow you to push and remove everything from the stack (including the drawer) with pushNamedAndRemoveUntil()
      routes: {
        'home': (context) => HomePage(),
        'anotherPage': (context) => AnotherPage(),
      },
      initialRoute: 'home',
    );
  }
}

home_page.dart（出于说明目的，another_page.dart完全相同）

import 'package:flutter/material.dart';

import 'menu_drawer.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: MenuDrawer(),
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}

menu_drawer.dart

import 'package:flutter/material.dart';

class MenuDrawer extends StatelessWidget {

  // Push the page and remove everything else
  navigateToPage(BuildContext context, String page) {
    Navigator.of(context).pushNamedAndRemoveUntil(page, (Route<dynamic> route) => false);
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        // This could be mapped from a List of items
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
            onTap: () => navigateToPage(context, 'home'),
          ),
          ListTile(
            leading: Icon(Icons.panorama),
            title: Text('Another page'),
            onTap: () => navigateToPage(context, 'anotherPage'),
          ),
        ],
      ),
    );
  }
}

最终结果：

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

2 个答案: