嵌套BlocBuilder以在同一小部件 上管理多个状态

Question

我想将文本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);
    }

  }

}

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

Answer 1

您正在一起使用两个块，并且对于状态，您具有相同的变量名。因此，在使用它时，它将仅考虑内部状态变量。

所以我认为，即使您只更改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,