Flutter，设置具有多个堆栈的屏幕

Question

我在文章here 中使用的是使用底部导航栏轮廓创建多个堆栈的方法.

这一切都很好，但由于有一些我不知道的方法，我正在努力寻找一种在我的应用程序中导航的方法。

我只是想为配置文件创建一个屏幕，其中有一个按钮可以让您返回订阅。由于在 tab_navigator 中完成了一些奇特的事情，我不确定如何执行此操作。谁能帮忙？

选项卡导航器代码如下。

import 'package:flutter/material.dart';
import 'package:highline_app/bottom_navigation.dart';
import 'package:highline_app/color_detail_page.dart';
import 'package:highline_app/colors_list_page.dart';
import 'package:highline_app/pages/feed.dart';

class TabNavigatorRoutes {
  static const String root = '/';
  static const String detail = '/detail';
  static const String feed = '/feed';
  static const String profile = '/profile';
}

class TabNavigator extends StatelessWidget {
  TabNavigator({this.navigatorKey, this.tabItem});
  final GlobalKey<NavigatorState> navigatorKey;
  final TabItem tabItem;

  void _push(BuildContext context, {int materialIndex: 500}) {
    var routeBuilders = _routeBuilders(context, materialIndex: materialIndex);

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => routeBuilders[TabNavigatorRoutes.detail](context),
      ),
    );
  }

  Map<String, WidgetBuilder> _routeBuilders(BuildContext context,
      {int materialIndex: 500}) {
    return {
      TabNavigatorRoutes.feed: (context) => NewsFeed(),
      TabNavigatorRoutes.root: (context) => ColorsListPage(
            color: activeTabColor[tabItem],
            title: tabName[tabItem],
            onPush: (materialIndex) =>
                _push(context, materialIndex: materialIndex),
          ),
      TabNavigatorRoutes.detail: (context) => ColorDetailPage(
            color: activeTabColor[tabItem],
            title: tabName[tabItem],
            materialIndex: materialIndex,
          ),
    };
  }

  @override
  Widget build(BuildContext context) {
    final routeBuilders = _routeBuilders(context);
    return Navigator(
      key: navigatorKey,
      initialRoute: TabNavigatorRoutes.root,
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(
          builder: (context) => routeBuilders[routeSettings.name](context),
        );
      },
    );
  }
}

Answer 1

实际上，您不需要使用Navigator。我建议你保持简单。您可以使用 TabController 执行此操作。您可以检查以下代码以根据需要在 Pages 或 Tabs 之间导航。

  
import 'package:flutter/material.dart';

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

class TabLayoutDemo extends StatefulWidget {
  @override
  _TabLayoutDemoState createState() => _TabLayoutDemoState();
}

class _TabLayoutDemoState extends State<TabLayoutDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 4);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.yellow,
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          body: TabBarView(
            controller: _tabController,
            children: [
              Container(
                color: Colors.yellow,
              ),
              Container(
                color: Colors.orange,
              ),
              // Feed Page.
              Container(
                color: Colors.lightGreen,
              ),
              // Profile Page.
              Container(
                color: Colors.red,
                child: Padding(
                  padding: EdgeInsets.only(top: 15.0),
                  child: SizedBox(
                      width: double.infinity,
                      child: RaisedButton.icon(
                        icon: Icon(Icons.arrow_back),
                        textColor: Colors.white,
                        color: Colors.lightBlue,
                        label: Text('Go To Feed Tab'),
                        onPressed: () {
                          setState(() {
                            _tabController.index = 2;
                          });
                        },
                      )),
                ),
              ),
            ],
          ),
          bottomNavigationBar: TabBar(
            controller: _tabController,
            tabs: [
              Tab(
                icon: Icon(Icons.home),
              ),

              Tab(
                icon: Icon(Icons.settings),
              ),
              // Here is feed tab button.
              Tab(
                icon: Icon(Icons.rss_feed),
              ),
              // Here is profile tab button.
              Tab(
                icon: Icon(Icons.perm_identity),
              ),
            ],
            labelColor: Colors.yellow,
            unselectedLabelColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: Colors.red,
          ),
          backgroundColor: Colors.black,
        ),
      ),
    );
  }
}