Flutter块状态未更新

wfsdck30  于 2023-02-05  发布在  Flutter
关注(0)|答案(3)|浏览(136)

在天气应用程序中,我正在制作一个根据城市天气情况改变主题颜色的应用程序。在应用程序中,我想用api的数据改变主题,但是主题没有改变。问题在哪里?我也没有得到任何错误。我使用的是bloc 8.0.1

集团

class ThemeBloc extends Bloc<ThemeEvent, ThemeState> {
  ThemeBloc() : super(ThemeApp(color: Colors.blue, theme: ThemeData.light())) {
    on<ThemeEvent>((event, emit) {
     if (event is ThemeChangeEvent) {
    ThemeApp? appTheme;

    switch (event.weatherStateAbbr) {
      case "sn": //karlı
      case "sl": //sulu kar
      case "h": //dolu
      case "t": //fırtına
      case "hc": //çok bulutlu
        appTheme = ThemeApp(
            theme: ThemeData(primaryColor: Colors.blueGrey),
            color: Colors.grey);
        break;

      case "hr": //ağır yagmurlu
      case "lr": //hafif yagmurlu
      case "s": // sağanak yagıs
        appTheme = ThemeApp(
            theme: ThemeData(primaryColor: Colors.indigoAccent),
            color: Colors.indigo);
        break;

      case "lc": //az bulutlu
      case "c": //açık güneşli hava
        appTheme = ThemeApp(
            theme: ThemeData(primaryColor: Colors.orangeAccent),
            color: Colors.yellow);
        break;
    }
    emit(appTheme!);
    }
   });
  }
 }

事件

abstract class ThemeEvent extends Equatable {
   const ThemeEvent();

  @override
 List<Object> get props => [];
 }

 class ThemeChangeEvent extends ThemeEvent {
  final String weatherStateAbbr;

 const ThemeChangeEvent({required this.weatherStateAbbr});
}

国家

abstract class ThemeState extends Equatable {
 const ThemeState();

 @override
 List<Object> get props => [];
 }

 class ThemeApp extends ThemeState {
 final ThemeData theme;
 final MaterialColor color;

 const ThemeApp({required this.theme, required this.color});
}

主省道

final locator = GetIt.instance;

 void setUp() {
 locator.registerLazySingleton<WeatherRepository>(() => 
  WeatherRepository());
  locator.registerLazySingleton(() => WeatherApiClient());
}

void main() {
 setUp();
 runApp(BlocProvider<ThemeBloc>(
 create: (context) => ThemeBloc(),
 child: const MyApp(),
  ));
 }

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

 @override
Widget build(BuildContext context) {
 return BlocBuilder(
   bloc: BlocProvider.of<ThemeBloc>(context),
   builder: (context, ThemeState state) => MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Weather App',
    theme: (state as ThemeApp).theme,
    home: BlocProvider<WeatherBloc>(
      create: (context) => WeatherBloc(),
      child: WeatherApp(),
    ),
  ),
  );
 }
}
b1payxdu

b1payxdu1#

具体类还需要覆盖与Equatable包相关的props,然后将对象放入逗号分隔的方括号中,然后从Equatable包中比较对象。
事件

abstract class ThemeEvent extends Equatable {
   const ThemeEvent();

  @override
 List<Object> get props => [];
 }

 class ThemeChangeEvent extends ThemeEvent {
  final String weatherStateAbbr;

 const ThemeChangeEvent({required this.weatherStateAbbr});

    List<Object> get props => [weatherStateAbbr];
}

abstract class ThemeState extends Equatable {
 const ThemeState();

 @override
 List<Object> get props => [];
 }

 class ThemeApp extends ThemeState {
 final ThemeData theme;
 final MaterialColor color;

 const ThemeApp({required this.theme, required this.color});

    List<Object> get props => [theme,color];
}

如果两个相似的状态相继出现,则块不会对第二个状态做出响应;如果我们将两个状态都作为当前状态和前一个状态,则块不会对当前状态做出响应。
有关详细信息,请参阅此块文档。https://bloclibrary.dev

tv6aics1

tv6aics12#

您忘记在UI/屏幕上调用事件。
在initState bloc.add(ThemeChangeEvent());中调用此行

class WeatherApp extends StatefulWidget {
  const WeatherApp();

  @override
  State<WeatherApp> createState() => _WeatherAppState();
}

class _WeatherAppState extends State<WeatherApp> {
  final ThemeBloc bloc = BlocProvider.of<ThemeBloc>(context);

  @override
  void initState() {
    bloc.add(ThemeChangeEvent());
    super.initState();
  }

  @override
  void dispose() {
    bloc.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

推荐使用statefulWidget,因为它有dispose和instate,只要不使用内置的setState就没有问题。

mbyulnm0

mbyulnm03#

试着在你的子类中添加一个等价的覆盖,就像这样,并把其中一个项目添加到 prop 中,所以在这个例子中,如果颜色改变了,状态会再次发出新的数据。

abstract class ThemeState extends Equatable {
 const ThemeState();

 @override
 List<Object> get props => [];
 }

 class ThemeApp extends ThemeState {
 final ThemeData theme;
 final MaterialColor color;

 const ThemeApp({required this.theme, required this.color});
 @override
 List<Object> get props => [color];
}

相关问题