听 Bloc 时如何更改 appbar,我不想在脚手架上使用 bloc builder,而是希望在 AppBar 上使用 BlocBuilder?
Posted
技术标签:
【中文标题】听 Bloc 时如何更改 appbar,我不想在脚手架上使用 bloc builder,而是希望在 AppBar 上使用 BlocBuilder?【英文标题】:How to change appbar when listened to Bloc, I dont want to bloc builder on the scaffold, instead I want BlocBuidler on the AppBar? 【发布时间】:2021-06-05 02:20:45 【问题描述】:Scaffold(
// extendBodyBehindAppBar: true,
// extendBody: true,
appBar: AppBar(
centerTitle: false,
brightness: Brightness.light,
leading: IconButton(
icon: const Icon(
Icons.arrow_back,
),
onPressed: ()
Navigator.pop(context);
),
title: const Text(
'Go back',
),
elevation: 0,
backgroundColor: Colors.transparent,
),
.
.
.
bottomNavigationBar: BottomNavigationWidget()
)//Scaffold;
简单地说,我想在底部导航项更改时更改我的应用栏。我无法用 BlocBuilder 包装 AppBar,我该如何实现?
【问题讨论】:
【参考方案1】:您可以使用的内部 Scaffold 小部件
appBar: PreferredSize(
child: CustomAppBar(),
preferredSize: Size.fromHeight(56),
),
并创建另一个函数或类作为返回 AppBar 的 CustomAppBar
return AppBar(
title: Text(
text ?? "Default Text",
),
);
并将文本作为参数传递,如果为空,您可以为其设置一些默认文本。
【讨论】:
【参考方案2】:您不能,因为 Scaffold
appBar 属性接受扩展 PreferredSizeWidget
类的小部件。用BlocBuilder
包裹Scaffold
并根据Bloc 状态更改AppBar
属性:
return BlocBuilder<YourBloc, YourState>(
builder: (context, state) => Scaffold(
appBar: AppBar(
title: state is Selected1 ? Text('Title1') : Text('TitleElse'),
elevation: state is Selected1 ? 0 : 1
)
)
);
最终创建扩展 PreferredSizeWidget
的新小部件:
class MyAppBar extends StatelessWidget with PreferredSizeWidget
@override
Widget build(BuildContext context)
return BlocBuilder<YourBloc, YourState>(
builder: (context, state)
if(state is Selected1)
return AppBar(...);
else if (state is Selected2)
return AppBar(...);
else
return AppBar(...);
);
@override
Size get preferredSize => Size(appbarwidth, appbarheight);
并使用它,但请确保您在Scaffold
上方有BlocProvider<YourBloc>
:
return Scaffold(appBar: MyAppBar());
【讨论】:
以上是关于听 Bloc 时如何更改 appbar,我不想在脚手架上使用 bloc builder,而是希望在 AppBar 上使用 BlocBuilder?的主要内容,如果未能解决你的问题,请参考以下文章
Flutter:不使用AppBar时如何在Android和iOS上更改状态栏文本颜色[重复]