嵌套 BlocBuilders 以管理同一个小部件上的多个状态

Posted 2023-02-23

【中文标题】嵌套 BlocBuilders 以管理同一个小部件上的多个状态

【英文标题】：Nesting BlocBuilders to Manage Multiple States on the same Widget

【发布时间】：2020-07-09 14:57:17

【问题描述】：

我想将文本 Update BlocBuilder 嵌套在另一个 BlocBuilder 中，该 BlocBuilder 通过滑块小部件控制其字体大小。但是，我无法让它工作。请帮忙！

BlocBuilder<SettingsBloc, SettingsState>(
            builder: (context, state) 
       return BlocBuilder<TextFieldBloc, TextFieldState>(
        builder: (context, state) 
          if (state is TextFieldInitState) 
            return Text(
                state.text.toString(),
              style: TextStyle(
                fontSize: state.fontSize,
                fontFamily: 'EthiopicWookianos',
                fontWeight: FontWeight.normal,
                color: Colors.blueGrey,
              ),
            );
           else if (state is TextFieldLaterState) 
            return Text(
              state.text.toString(),
              style: TextStyle(
                fontSize: state.fontSize,
                fontFamily: 'EthiopicWookianos',
                fontWeight: FontWeight.normal,
                color: Colors.blueGrey,
              ),
            );
           else 
            return Text("something wrong");
          
);
),

这是 TextField Bloc 的代码...（当然它们在单独的文件中）。

import 'package:flutter/widgets.dart';

abstract class TextFieldEvent 

class TextInit extends TextFieldEvent 



class TextChange extends TextFieldEvent 
  final String data;
  TextChange(@required this.data);


class TextFieldState 

class TextFieldInitState extends TextFieldState 
  String text;
  TextFieldInitState(this.text);


class TextFieldLaterState extends TextFieldState 
  String text;
  TextFieldLaterState(this.text);


class TextFieldBloc extends Bloc<TextFieldEvent, TextFieldState> 
  @override
  get initialState => TextFieldInitState(text: '');

  @override
  Stream<TextFieldState> mapEventToState(event) async* 
    if (event is TextInit) 
      yield TextFieldInitState(text: "");
     else if (event is TextChange) 
      yield TextFieldLaterState(text: event.data);
    
  

这是设置块的代码...（它们也在单独的文件中）。

part of 'settings_bloc.dart';

@immutable
abstract class SettingsEvent 
  final dynamic payload;
  SettingsEvent(this.payload);

  

class FontSize extends SettingsEvent 
FontSize(payload) : super(payload);


abstract class SettingsState 
  final double sliderFontSize;

  SettingsState(this.sliderFontSize);

  double get fontSize => sliderFontSize;




class InitialSettingsState extends SettingsState 
  InitialSettingsState() : super(
    sliderFontSize: 20,
  );



class NewSettingsState extends SettingsState 
  NewSettingsState.fromOldSettingsState(SettingsState oldState,
      double sliderFontSize)
      : super(
    sliderFontSize: sliderFontSize ?? oldState.sliderFontSize,
  );


class SettingsBloc extends Bloc<SettingsEvent, SettingsState> 


  @override
  SettingsState get initialState => InitialSettingsState();


  @override
  Stream<SettingsState> mapEventToState(SettingsEvent event) async* 
    if (event is FontSize) 
      SettingsState currentState;
      yield NewSettingsState.fromOldSettingsState(
          currentState, sliderFontSize: event.payload);
    

  

【问题讨论】：

添加 TextFieldInitState 和 TextFieldLaterState 类以及与这两个 bloc 相关的内容。

【参考方案1】：

您正在同时使用两个 bloc，并且对于 state，您具有相同的变量名。所以当你使用它时，它只会考虑内部状态变量。

所以我认为只要更改 settingstate 变量名，它应该可以工作。试一试。

BlocBuilder<SettingsBloc, SettingsState>(
            builder: (context, Settingstate)  //change variable name
       return BlocBuilder<TextFieldBloc, TextFieldState>(
        builder: (context, state) 
          if (state is TextFieldInitState) 
            return Text(
                state.text.toString(),
              style: TextStyle(
                fontSize: Settingstate.fontSize, // change variable name
                fontFamily: 'EthiopicWookianos',
                fontWeight: FontWeight.normal,
                color: Colors.blueGrey,

【讨论】：

成功了！！！非常感谢你，你为我节省了很多时间。 :-)