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

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

1 个答案: