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

Posted

技术标签:

【中文标题】在 Flutter 应用程序中更改 SliverAppBar 标题颜色【英文标题】:Changing SliverAppBar title color in Flutter application 【发布时间】:2019-05-06 10:47:38 【问题描述】:

我正在使用 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()],
          ),
        ),

【问题讨论】:

【参考方案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"),
                  ),
                );
              
            

【讨论】:

在最新的 Flutter 版本中,ScrollController _scrollController; 将生成一个在 null 上调用的函数,以使用 ScrollController _scrollController = new ScrollController(); 解决此问题

以上是关于在 Flutter 应用程序中更改 SliverAppBar 标题颜色的主要内容,如果未能解决你的问题,请参考以下文章

在 Flutter 中更改文本的字体系列

Flutter 应用程序图标在 Flutter_launcher_icons 的 ios 模拟器中没有更改

如何在“任务菜单”Flutter 中更改应用程序标题

如何在flutter中访问和更改来自不同文件的变量

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

如何在应用内更改通知声音(Flutter)