flutter - 如何在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("无内容"));
}else if(state.articleLoadingStatus == LoadingStatus.loading){
return Center(child: CircularProgressIndicator());
}else{
return Center(child: Text("无内容"));
}
}
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("无更多数据");
}
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
},
),
);
}
我想要的是按下按钮,关闭调试,再次按下按钮,打开调试。
解决方案
推荐阅读
- python - 如何使用python删除excel中的所有零值
- android - 自定义操作栏内容被选项菜单项部分隐藏
- ssl - 如何让 nginx 为多个虚拟主机做 SSL 透传?
- c++ - c2027 使用未定义类型“v8::internal::Object”
- javascript - 如何使用 Plupload 上传 zip.js 解压缩的文件
- javascript - 如何将数组的某些值作为 CSS 样式属性插入到动态表中?
- python - 在 TensorFlow 模型中的每一行上输出带有 softmax 激活的矩阵
- reactjs - JEST:无法访问道具中的功能
- python - python函数执行后浏览器自动退出?
- spring - 通过spring控制器获取jsp中的值