5

我是 Flutter 的新手，希望有人帮助我编写我在 github 中找到的我想使用的代码。看看下面的链接 https://github.com/JohannesMilke/drawer_example

这是一个导航抽屉的例子。我喜欢开发人员编码它的方式，并想使用这个例子。问题是开发人员没有实现导航到另一个页面。当您单击抽屉中的项目时，它只会在控制台中打印一条消息。

我想更进一步。我想修改代码，以便当您单击一个项目时，它将导航到另一个页面并且抽屉将关闭。抽屉图标应保留在显示的新页面的工具栏上。此外，当您导航到另一个页面时，该页面的标题应在工具栏中设置。

当我查看代码时，我知道在哪里更改，但我没有成功。我想我需要更改代码底部的正文标签。问题是我不知道如何调用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

提前致谢

4

2 回答 2

3

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

最后结果：

抽屉颤振

于 2019-06-17T19:30:08.373 回答
3

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

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

主要.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'),
          ),
        ],
      ),
    );
  }
}

最后结果：

在此处输入图像描述

于 2019-06-17T20:33:47.133 回答