听 Bloc 时如何更改 appbar，我不想在脚手架上使用 bloc builder，而是希望在 AppBar 上使用 BlocBuilder？

Posted 2023-02-23

【中文标题】听 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());