在 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_launcher_icons 的 ios 模拟器中没有更改