在Flutter应用程序中更改SliverAppBar标题颜色

Question

我正在使用SliverAppBar，包括一个背景图像和标题。 标题文本为白色，我需要在AppBar“缩小”时将其颜色更改为黑色（因为选项卡栏也是白色的）。

如何做到这一点？

NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {;
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                backgroundColor: Colors.white,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(_event.name,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        )),
                    background: CachedNetworkImage(
                      imageUrl: _event?.imageMediumUrl ??
                          'http://preprod.tibib-live.com/medias/cached-media/medium/5bea5964109aa-c827b05facc3781485e584dac2f4dddc.png',
                      fit: BoxFit.cover,
                    )),
              ),
              SliverPersistentHeader(
                delegate: _SliverAppBarDelegate(
                  TabBar(
                    labelColor: Colors.white,
                    indicatorColor: Colors.red,
                    unselectedLabelColor: Colors.grey,
                    tabs: [
                      Tab(icon: Icon(Icons.info), text: "Info"),
                      Tab(icon: Icon(Icons.people), text: "Courses"),
                    ],
                  ),
                ),
                pinned: true,
              ),
            ];
          },
          body: TabBarView(
            children: <Widget>[_buildInfo(), _buildTrials()],
          ),
        ),

- fvisticot

Answer 1

你可以使用一个 ScrollController，监听滚动并将偏移量与工具栏的默认大小进行比较。我为你准备了一个示例：

            class TestingNewState extends State<TestingNew> {
              ScrollController _scrollController;

              bool lastStatus = true;

              _scrollListener() {
                if (isShrink != lastStatus) {
                  setState(() {
                    lastStatus = isShrink;
                  });
                }
              }

              bool get isShrink {
                return _scrollController.hasClients &&
                    _scrollController.offset > (200 - kToolbarHeight);
              }

              @override
              void initState() {
                _scrollController = ScrollController();
                _scrollController.addListener(_scrollListener);
                super.initState();
              }

              @override
              void dispose() {
                _scrollController.removeListener(_scrollListener);
                super.dispose();
              }

              @override
              Widget build(BuildContext context) {
                return NestedScrollView(
                  controller: _scrollController,
                  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                    return <Widget>[
                      SliverAppBar(
                        expandedHeight: 200.0,
                        floating: false,
                        pinned: true,
                        backgroundColor: Colors.white,
                        flexibleSpace: FlexibleSpaceBar(
                            centerTitle: true,
                            title: Text("text sample",
                                style: TextStyle(
                                  color: isShrink ? Colors.black : Colors.white,
                                  fontSize: 16.0,
                                )),
                            background: CachedNetworkImage(
                              imageUrl:
                                  'http://preprod.tibib-live.com/medias/cached-media/medium/5bea5964109aa-c827b05facc3781485e584dac2f4dddc.png',
                              fit: BoxFit.cover,
                            )),
                      ),
                    ];
                  },
                  body: Center(
                    child: Text("hello world"),
                  ),
                );
              }
            }

- diegoveloper

---

在最新版本的Flutter中，ScrollController _scrollController;会生成一个“函数在空对象上被调用”的错误。为了解决这个问题，可以使用ScrollController _scrollController = new ScrollController();。 - Pekama

Answer 2

我认为更容易完成此操作的方法是使用LayoutBuilder。您可以将标题Text widget与LayoutBuilder一起包装，并根据约束条件的maxHeight属性更改文本颜色。

SliverAppBar(
                    pinned: true,
                    expandedHeight: 200,
                    flexibleSpace: FlexibleSpaceBar(
                      title: LayoutBuilder(
                        builder: (context, constraints) {
                          print(constraints);
                          return Text('My title',
                          style: TextStyle(
                            color: constraints.maxHeight > 150 ? Colors.black : Colors.white,
                          ),);
                        }
                      ),
                      background: Image.asset('assets/header.jpeg',
                      fit: BoxFit.cover),
                    ),
                  ),

- Banjoe