听 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&lt;YourBloc&gt;

return Scaffold(appBar: MyAppBar());

【讨论】:

以上是关于听 Bloc 时如何更改 appbar,我不想在脚手架上使用 bloc builder,而是希望在 AppBar 上使用 BlocBuilder?的主要内容,如果未能解决你的问题,请参考以下文章

bloc eventController 意外关闭

使用flutter_bloc提交时如何验证表单?

Flutter:不使用AppBar时如何在Android和iOS上更改状态栏文本颜色[重复]

如何更改 Material-UI AppBar 的明暗主题颜色?

在对话框中使用 BLoC:找不到正确的提供程序

如何使用主题通用更改AppBar的文本颜色,FAB的图标颜色?