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

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);
    }

  }

}

Answer 1

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

所以我认为如果你只是改变 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,