保存状态并防止 initState 被多次调用

Question

我有 3 个页面（所有有状态小部件）：

主页
天气页面
设置页面

事情是当我从主页转到天气页面时[=59] =]" 并从 天气页面 转到主页 "Navigator.pop “，下一次我试图从主页、 转到 天气页面 initState method 再次调用... 我如何设法让它只在第一次调用而不是每次我进入天气页面时都被调用？

这是我的 app.dart 代码：

import 'package:exomind/src/core/views/home_view.dart';
import 'package:exomind/src/features/weather/presentation/views/weather_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import '../injection_container.dart';
import 'core/styles/colors.dart';
import 'features/settings/presentation/bloc/settings_bloc.dart';
import 'features/settings/presentation/views/settings_view.dart';
import 'features/weather/presentation/bloc/weather_bloc.dart';

/// The Widget that configures your application.
class MyApp extends StatelessWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Glue the SettingsController to the MaterialApp.
    //
    // The AnimatedBuilder Widget listens to the SettingsController for changes.
    // Whenever the user updates their settings, the MaterialApp is rebuilt.

    return MultiBlocProvider(
        providers: [
          BlocProvider<WeatherBloc>(
              create: (_) => serviceLocator<WeatherBloc>()),
          BlocProvider<SettingsBloc>(
              create: (_) => serviceLocator<SettingsBloc>()
                ..add(
                  const SettingsLoaded(),
                )),
        ],
        child:
            BlocBuilder<SettingsBloc, SettingsState>(builder: (context, state) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,

            // Providing a restorationScopeId allows the Navigator built by the
            // MaterialApp to restore the navigation stack when a user leaves and
            // returns to the app after it has been killed while running in the
            // background.
            restorationScopeId: 'app',

            // Provide the generated AppLocalizations to the MaterialApp. This
            // allows descendant Widgets to display the correct translations
            // depending on the user's locale.
            localizationsDelegates: const [
              AppLocalizations.delegate,
              GlobalMaterialLocalizations.delegate,
              GlobalWidgetsLocalizations.delegate,
              GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: const [
              Locale('en', ''), // English, no country code
            ],

            // Use AppLocalizations to configure the correct application title
            // depending on the user's locale.
            //
            // The appTitle is defined in .arb files found in the localization
            // directory.
            onGenerateTitle: (BuildContext context) =>
                AppLocalizations.of(context)!.appTitle,

            // Define a light and dark color theme. Then, read the user's
            // preferred ThemeMode (light, dark, or system default) from the
            // SettingsController to display the correct theme.
            theme:
                ThemeData(fontFamily: 'Circular', primaryColor: kPrimaryColor),
            darkTheme: ThemeData.dark(),
            themeMode: state.themeMode,

            // Define a function to handle named routes in order to support
            // Flutter web url navigation and deep linking.
            onGenerateRoute: (RouteSettings routeSettings) {
              return MaterialPageRoute<void>(
                settings: routeSettings,
                builder: (BuildContext context) {
                  switch (routeSettings.name) {
                    case SettingsView.routeName:
                      return const SettingsView();
                    case WeatherView.routeName:
                      return const WeatherView();
                    case HomeView.routeName:
                      return const HomeView();
                    default:
                      return const HomeView();
                  }
                },
              );
            },
          );
        }));
  }
}

这是我的 home_view.dart 代码：

import 'package:flutter/material.dart';

import '../../features/weather/presentation/views/weather_view.dart';

class HomeView extends StatefulWidget {
  const HomeView({Key? key}) : super(key: key);
  static const routeName = '/home';

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView>
    with SingleTickerProviderStateMixin {
  late AnimationController rotationController;

  @override
  void initState() {
    rotationController =
        AnimationController(duration: const Duration(seconds: 1), vsync: this)
          ..repeat();
    super.initState();
  }

  @override
  void dispose() {
    rotationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.of(context).size.height;
    final double width = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: (height / 2),
            child: RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(rotationController),
              child: IconButton(
                icon: const Icon(Icons.wb_sunny),
                color: Colors.yellow,
                iconSize: (width * 0.2),
                onPressed: () {
         Navigator.of(context).pushNamed(WeatherView.routeName);
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

这是我的 weather_view.dart 代码：

import 'dart:async';
import 'package:exomind/src/features/weather/presentation/bloc/weather_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:percent_indicator/percent_indicator.dart';

class WeatherView extends StatefulWidget {
  const WeatherView({Key? key}) : super(key: key);
  static const routeName = '/weather';

  @override
  State<WeatherView> createState() => _WeatherViewState();
}

class _WeatherViewState extends State<WeatherView>
    with SingleTickerProviderStateMixin {

  @override
  void initState() {
    print("initcalled")
    super.initState();
  }

  @override
  void dispose() {
    rotationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    final double width = MediaQuery.of(context).size.width;
    final double height = MediaQuery.of(context).size.height;

    return Scaffold();
  }
}

任何帮助和解释将不胜感激:)

Answer 1

我想不出不执行 _WeatherViewState 中的 initState 的“干净”方式。您是否试图避免将同一个城市多次添加到 WeatherBloc？如果是这样，我会在添加之前检查 WeatherBloc 中是否存在 'city'。

Answer 2

在您的 onGenerateRoute 中，您每次都调用 WeatherView 构造函数：

case WeatherView.routeName:
  return const WeatherView();

这又会调用 initState。您需要做的是创建一次 WeatherView 页面小部件并在 onGenerateRoute:

中使用它

final _weatherView = const WeatherView();

在你的onGenerateRoute中：

case WeatherView.routeName:
  return _weatherView;

Answer 3

只需向天气页面添加一个参数：一个布尔值，指定 rebuild 是 true 还是 false。（如果为真，它将调用 initState()）

这段代码工作正常。

class WeatherView extends StatefulWidget {
  final bool rebuild;
  static const routeName = '/weather';

  WeatherView({
    Key? key,
    required this.rebuild,
  }) : super(key: key);

  @override
  State<WeatherView> createState() => _WeatherViewState();
}

WeatherViewState 的 initState() 将是：

@override
void initState() {
  if (widget.rebuild) {
    print("initcalled");
    super.initState();
  } else {
    print("Not called");
  }
}

因此，在您的 app.dart 中，您现在应该通过

路由到该页面

case WeatherView.routeName:
     return const WeatherView(rebuild: true); //Choose if rebuild or not by true and false

Answer 4

正如@RoslanAmir 所说，每次我们推入有状态小部件时，都无法阻止调用 initstate。因此，为了防止每次我们推入有状态小部件时我的事件都被添加到我的集团中，我向每个状态添加了一个 bool 变量，以了解是否应该再次添加该事件。想要准确答案的小伙伴不要犹豫。

保存状态并防止 initState 被多次调用

Preserve state and prevent initState of been called more than once

flutter

state-management

flutter-navigation