我有一个 TabBarView 可以在我的应用程序的页面之间导航。有没有办法根据当前查看的页面更改/覆盖主 AppBar 的文本和颜色，而不是为每个页面分别创建一个 AppBar？

这就是我的页面的设置方式

我的路由在main函数中定义如下:

routes: <String, WidgetBuilder>{
            "/Home": (BuildContext context) => new first.Home(),
            "/Support": (BuildContext context) => new second.Support(),

          }

标签类

        class Tabs extends StatefulWidget {

          @override
          TabsState createState() => new TabsState();
        }

    class TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
      TabController controller;

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

        controller = new TabController(length: 5, vsync: this);

      }

      @override
      void dispose() {
        controller.dispose();
        super.dispose();

      }
      @override
      Widget build(BuildContext context) {

      return new Scaffold(
        appBar: new AppBar(
          centerTitle: true,
          title: new Text('App'), backgroundColor: Colors.blue,
          bottom: new TabBar(
              controller: controller,
              tabs: <Tab>[
                new Tab (icon: new Icon(Icons.home), text: 'Home',),
                            new Tab (icon: new Icon(Icons.mail), text:'Support'),
              ]),
        ),
        body: new TabBarView(
          controller: controller,
          children: <Widget>[
            new first.Home(),
            new second.Support(),

          ],
        ),
      );
    }      

最佳答案

如果你使用 PageView 而不是 TabBarView，你可以指定一个 onPageChanged 函数来改变状态，从而重建小部件。

这是我正在处理的一些代码，应用栏中的标题已更改，但概念基本相同:

// Copyright 2017 <Abhi Agarwal>
// Refer to LICENSE

// Dart Imports

// Flutter Imports
import 'package:flutter/material.dart';

// Package Imports
import 'package:shared_preferences/shared_preferences.dart'
    show SharedPreferences;

// Local Imports
import '../calendar/calendar_view.dart' show CalendarView;
import '../error/error_screen.dart' show ErrorScreen;
import '../homework/homework_view.dart' show HomeworkView;
import '../loading/loading_screen.dart' show LoadingScreen;

import 'page.dart' show Page;

class MainView extends StatefulWidget {
  MainView({Key key, this.initialIndex = 0, SharedPreferences prefs})
      : pages = _makePagesList(prefs),
        super(key: key);
  final int initialIndex;
  final List<Page> pages;

  static List<Page> _makePagesList(SharedPreferences prefs) => <Page>[
        CalendarView.page(),
        new Page(
          page: new ErrorScreen(error: "Hello World"),
          title: "Schedule",
          iconData: Icons.schedule,
        ),
        HomeworkView.page(),
        new Page(
          page: new LoadingScreen(),
          title: "Settings",
          iconData: Icons.settings,
        ),
      ];

  @override
  _MainViewState createState() => new _MainViewState();
}

class _MainViewState extends State<MainView> {
  PageController _controller;
  int _index;

  @override
  void initState() {
    super.initState();
    _controller = new PageController(initialPage: widget.initialIndex);
    _index = widget.initialIndex;
  }

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

  void _handlePageChange(int index) => setState(() => _index = index);

  void _navigateToPage(int index) => _controller.animateToPage(
        index,
        duration: const Duration(milliseconds: 300),
        curve: Curves.ease,
      );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          widget.pages[_index].title,
          style: new TextStyle(
            fontFamily: Theme.of(context).textTheme.title.fontFamily,
          ),
        ),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      bottomNavigationBar: new BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        items: widget.pages
            .map((Page page) => new BottomNavigationBarItem(
                  icon: new Icon(
                    page.iconData,
                    color: Theme.of(context).primaryColor,
                  ),
                  title: new Text(
                    page.title,
                    style: new TextStyle(
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                  backgroundColor: Theme.of(context).canvasColor,
                ))
            .toList(),
        onTap: _navigateToPage,
        currentIndex: _index,
      ),
      floatingActionButton: widget.pages[_index].useFab
          ? new FloatingActionButton(
              tooltip: widget.pages[_index].tooltip,
              child: widget.pages[_index].fab,
              onPressed: () => widget.pages[_index].onPressed(context),
            )
          : null,
      body: new PageView(
        controller: _controller,
        children: widget.pages.map((Page page) => page.page).toList(),
        onPageChanged: _handlePageChange,
      ),
    );
  }
}

关于dart - 根据当前查看的页面更改 AppBar 的颜色和文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45327207/