dart - 如何使用 'persistant' 抽屉

Question

我的目标是拥有一个用于在不同路线之间导航的抽屉。如果我们当前在该路线上，我想通过更改抽屉中路线名称的颜色使其看起来更好一些。

我的问题是，每次按下汉堡包菜单时，都会显示一个新的抽屉实例，因为在每条 route 我都将其设置为:

return new Scaffold(
      appBar: new AppBar(
        title: new Text('My Route'),
      ),
      drawer: new MyDrawer(),  //  <-----------------------------
      body: new Container()  
);

有没有办法一遍又一遍地调用同一个抽屉从而保持其状态？

Answer 1

我的做法是创建 side_nav.dart

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import '../pages/login_page.dart';
import '../pages/feedback_page.dart';
import '../pages/upload_page.dart';
import '../pages/search_orders_page.dart';

class SideNav extends StatefulWidget {
  SideNav(
    this.page,
    this.scaffoldKey, {
    Key key,
  }) : super(key: key);
  String page;
  GlobalKey<ScaffoldState> scaffoldKey;
  @override
  _SideNav createState() => new _SideNav(this.page, this.scaffoldKey);
}

class _SideNav extends State<SideNav> {
  _SideNav(this.page, this.scaffoldKey2);
  //final formKey = new GlobalKey<FormState>();
  String page;
  GlobalKey<ScaffoldState> scaffoldKey2;
  static Router router;
  Handler searchHandler;
  Handler settingHandler;
  Handler loginHandler;
  Handler uploadHandler;
  Handler previewHandler;

  void defineRoutes(Router router) {
    router.define("login_page", handler: loginHandler);
    router.define("setting_page", handler: settingHandler);
    router.define("search_page", handler: searchHandler);
    router.define("upload_page", handler: uploadHandler);
    router.define("page_preview", handler: previewHandler);
  }

  @override
  initState() {
    super.initState();

    router = new Router();
    searchHandler = new Handler(
        handlerFunc: (BuildContext context, Map<String, dynamic> params) {
      return new SearchOrdersPage();
    });
    loginHandler = new Handler(
        handlerFunc: (BuildContext context, Map<String, dynamic> params) {
      return new LoginPage();
    });
    settingHandler = new Handler(
        handlerFunc: (BuildContext context, Map<String, dynamic> params) {
      return new FeedbackPage();
    });
    uploadHandler = new Handler(
        handlerFunc: (BuildContext context, Map<String, dynamic> params) {
      return new UploadPage();
    });

    defineRoutes(router);
  }

  @override
  Widget build(BuildContext context) {
    return new Drawer(
        key: scaffoldKey2,
        child: new ListView(
          children: <Widget>[
            new ListTile(
              title:
                  new Text('Data store', style: new TextStyle(fontSize: 14.0)),
              subtitle:
                  new Text('WVDEMO', style: new TextStyle(fontSize: 16.0)),
              onTap: () {},
            ),
            new ListTile(
              title: new Text('Username', style: new TextStyle(fontSize: 14.0)),
              subtitle: new Text('Demo', style: new TextStyle(fontSize: 16.0)),
              onTap: () {},
            ),
            new Divider(height: 1.0, color: Colors.grey[350]),
            new ListTile(
              leading: new Icon(Icons.cloud_upload),
              title: new Text('Upload', style: new TextStyle(fontSize: 14.0)),
              onTap: () {
                print("Page: $page");
                (page == "Upload")
                    ? Navigator.pop(context, true)
                    : router.navigateTo(
                        context,
                        "upload_page",
                        transition: TransitionType.inFromBottom,
                        replace: true,
                      );
              },
            ),
            new ListTile(
              leading: new Icon(Icons.search),
              title: new Text('Search', style: new TextStyle(fontSize: 14.0)),
              onTap: () {
                print("Page: $page");
                (page == "Search")
                    ? Navigator.pop(context, true)
                    : router.navigateTo(
                        context,
                        "search_page",
                        transition: TransitionType.inFromBottom,
                        replace: true,
                      );
              },
            ),
            new ListTile(
              leading: new Icon(Icons.mail),
              title: new Text('Feedback', style: new TextStyle(fontSize: 14.0)),
              onTap: () {
                print("Page: $page");
                (page == "Feedback")
                    ? Navigator.pop(context, true)
                    : router.navigateTo(
                        context,
                        "setting_page",
                        transition: TransitionType.inFromBottom,
                        replace: true,
                      );
              },
            ),
            new Divider(height: 1.0, color: Colors.grey[350]),
            new ListTile(
              title: new Text('Log Out', style: new TextStyle(fontSize: 14.0)),
              onTap: () async {
                router.navigateTo(context, "/login_page",
                    transition: TransitionType.inFromBottom, replace: true);
              },
            ),
          ],
        ));
  }
} 

这样调用抽屉

drawer: new SideNav(
        "Upload",
        scaffoldKey,
      ),

There are a lot of other ways to do it. However, i found it easier to implement Hope it helped