首页 > 解决方案 > 如何在flutter中更改parant组件钩子小部件状态值并触发重新渲染

问题描述

现在我定义showDebugInfo在我的 MaterialApp 中关闭或打开性能调试窗口,如下所示:

class CruiseApp extends HookWidget {
  CruiseApp({required this.theme, required this.view});

  final ThemeData theme;
  final ViewType view;

  @override
  Widget build(BuildContext context) {
    final currentTheme = ThemeManager.fromThemeName("lightTheme");
    final AbstractRoutes routes = CommonUtils.buildRoute();
    var showDebugInfo = useState(false);

    return MaterialApp(
      title: 'Cruise',
      theme: currentTheme,
      navigatorKey: NavigationService.instance.navigationKey,
      checkerboardOffscreenLayers: showDebugInfo.value,
      checkerboardRasterCacheImages: showDebugInfo.value,
      showPerformanceOverlay: showDebugInfo.value,
      localizationsDelegates: [
        // ... app-specific localization delegate[s] here
        // TODO: uncomment the line below after codegen
        // AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        AppLocalizations.delegate
      ],
      supportedLocales: [
        const Locale('en', ''), // English, no country code
        const Locale('ar', ''), // Arabic, no country code
        const Locale.fromSubtags(languageCode: 'zh'), // Chinese *See Advanced Locales below*
        // ... other locales the app supports
      ],
      routes: {
        "login": (BuildContext context) => LoginPage(),
      },
      home: routes.buildPage('home', null),
      onGenerateRoute: (RouteSettings settings) {
        return MaterialPageRoute<Object>(builder: (BuildContext context) {
          return routes.buildPage(settings.name, settings.arguments);
        });
      },
    );
  }
}

在子组件中,我添加了一个按钮来将showDebugInfo值更改为打开或关闭showDebugInfo值。如何更改CruiseApp状态值并触发重新渲染动作以从子组件打开或关闭调试窗口?这是我使用的子组件代码fish-redux

Widget buildView(HomeListDefaultState state, Dispatch dispatch, ViewService viewService) {
  ArticleRequest articleRequest = state.articleRequest;
  articleRequest.storiesType = state.currentStoriesType;
  if (state.isScrollTop) {
    dispatch(HomeListDefaultActionCreator.onResumeScrollTop());
    if(scrollController.hasClients) {
      scrollController.animateTo(.0, duration: Duration(milliseconds: 200), curve: Curves.ease);
    }
  }


  return Scaffold(
    body: SafeArea(
        top: false,
        bottom: false,
        child: Builder(
          builder: (context) {
            if (state.articleListState.articles.length == 0) {
              if(state.articleLoadingStatus == LoadingStatus.complete) {
                // when the article not fetched, show loading animation
                return Center(child: Text("无内容&quot;));
              }else if(state.articleLoadingStatus == LoadingStatus.loading){
                return Center(child: CircularProgressIndicator());
              }else{
                return Center(child: Text("无内容&quot;));
              }
            }

            return NotificationListener(
                onNotification: (scrollNotification) {
                  if (scrollNotification is! ScrollNotification) {
                    return false;
                  }
                  autoPreloadMoreArticles(scrollNotification);
                  return true;
                },
                child: CupertinoScrollbar(
                    child: SmartRefresher(
                        onRefresh: _onRefreshLoadingNewestArticle,
                        enablePullUp: true,
                        enablePullDown: true,
                        header: WaterDropMaterialHeader(),
                        controller: _refreshController,
                        onLoading: _loadingMoreArticle,
                        footer: CustomFooter(
                          builder: (BuildContext context, LoadStatus mode) {
                            Widget body;
                            if (mode == LoadStatus.idle) {
                              body = Text("上拉加载更多");
                            } else if (mode == LoadStatus.loading) {
                              body = CupertinoActivityIndicator();
                            } else if (mode == LoadStatus.failed) {
                              body = Text("加载失败!点击重试!");
                            } else if (mode == LoadStatus.canLoading) {
                              body = Text("放开加载更多");
                            } else {
                              body = Text("无更多数据&quot;);
                            }
                            return Container(
                              height: 55.0,
                              child: Center(child: body),
                            );
                          },
                        ),
                        child: CustomScrollView(
                          controller: scrollController,
                          slivers: <Widget>[
                            SliverOverlapInjector(
                              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                                context,
                              ),
                            ),
                            if (state.articleListState.articles.length > 0)
                              SliverPadding(
                                padding: const EdgeInsets.symmetric(vertical: 8.0),
                                sliver: viewService.buildComponent("articlelist"),
                              )
                          ],
                        ))));
          },
        )),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.remove_red_eye),
      onPressed: () => {
        showDebugInfo.value = showDebugInfor
      },
    ),
  );
}

我想要的是按下按钮,关闭调试,再次按下按钮,打开调试。

标签: flutter

解决方案


推荐阅读