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