- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
简介:我认为这个问题原则上可能是共享的,但我觉得这个具体的应用程序不是。我谦虚地提交它供考虑,所以请温柔。我的代码在这里陷入了一个明显的陷阱,而且我根本不知道如何修复它。想了几个小时后,我什至不知道该怎么做。
问题:InheritedWidget没有更新其上方小部件中的状态。
期望:我希望当我在HomePage的PageView上滑动时,Text BottomAppBar 将更新。然而,这并没有发生。
描述:我正在尝试使用 InheritedWidget (InheritedPageIndex),我在根小部件 (MaterialApp) 通过一个Provider方法(请参阅下面的代码)。其中,有一个值向下传递到小部件树中其下方的小部件 (MenuPage)。我希望这个值在状态改变时更新;我尝试通过在小部件树中位于其下方的小部件中滑动 PageView (HomePage) 来进行修改。
代码:我重新编写并简化了我的代码,以便我们可以更轻松地诊断和修复问题,如下所示:
page_index_model.dart
import 'package:flutter/material.dart';
class PageIndex {
PageIndex({@required this.index});
double index = 0;
}
page_index_provider.dart
import 'package:flutter/cupertino.dart';
import 'package:testinginheritedwidget/models/page_index_model.dart';
class InheritedPageIndex extends InheritedWidget {
InheritedPageIndex({Key key, @required this.indexData, Widget child})
: super(key: key, child: child);
final PageIndex indexData;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static PageIndex of(BuildContext context) => context
.dependOnInheritedWidgetOfExactType<InheritedPageIndex>()
.indexData;
}
main.dart
import 'package:flutter/material.dart';
import 'package:testinginheritedwidget/models/page_index_model.dart';
import 'package:testinginheritedwidget/pages/menu_page.dart';
import 'package:testinginheritedwidget/providers/page_index_provider.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return InheritedPageIndex(
indexData: PageIndex(index: 0),
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Testing Inherited Widgets',
home: MenuPage(),
),
);
}
}
menu_page.dart
import 'package:flutter/material.dart';
import 'package:testinginheritedwidget/models/page_index_model.dart';
import 'package:testinginheritedwidget/pages/home_page.dart';
import 'package:testinginheritedwidget/providers/page_index_provider.dart';
class MenuPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
PageIndex _pageIndex = InheritedPageIndex.of(context);
return DefaultTabController(
length: 3,
child: Scaffold(
//TODO: dot indicator
resizeToAvoidBottomInset: false,
appBar: AppBar(
backgroundColor: Colors.black,
title: Center(
child: Text('Testing Inherited Widgets',
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
),
bottom: TabBar(
onTap: (tabIndex) {},
labelColor: Colors.white,
indicatorColor: Colors.white,
tabs: const <Widget>[
Tab(icon: Icon(Icons.flight), child: Text('Flight')),
Tab(icon: Icon(Icons.map), child: Text('Map')),
Tab(icon: Icon(Icons.print), child: Text('Print')),
],
),
),
body: SafeArea(
child: TabBarView(
children: <Widget>[
HomePage(),
HomePage(),
HomePage(),
],
),
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// *** PROBLEM 1 IS HERE ***
Text('${_pageIndex.index}'),
],
),
),
),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:testinginheritedwidget/models/page_index_model.dart';
import 'package:testinginheritedwidget/providers/page_index_provider.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Widget> cards = [];
@override
Widget build(BuildContext context) {
PageIndex _pageIndex = InheritedPageIndex.of(context);
for (var index = 0; index < 7; index++) {
cards.add(
Center(
child: Text(
'$index',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
);
print(index);
}
return PageView(
onPageChanged: (index) {
setState(() {
//*** PROBLEM 2 IS HERE ***
_pageIndex.index = index.toDouble();
print('page index: ${_pageIndex.index}');
});
},
children: cards,
);
}
}
假设:经过大量研究和反射(reflection)。我相信我无法更新 Provider 的值;因为它位于第一个实例化的 InheritedWidget 和更改状态的方法之间。也许另一种说法是我想要改变的 State 就在它的正上方;并且,它采用第二个提供程序的状态而不是使用第一个提供程序的状态?
问题:
1)为了我的利益,我的假设是否正确,或者这里还有其他情况吗?
2) 如何解决我的问题?我不认为实现 BLoC 方法可以解决这个问题,因为它也使用提供程序?
在这种情况下,如果没有 InheritedWidget,我不知道如何将状态传递到 widget 树。
最佳答案
为此您根本不需要软件包。一个有点hacky的方法是围绕inheritedWidget创建一个Wrapper,因为继承的widget不会自行重建,所以您需要在有状态的widget内部使用它。
class MyWrapper extends StatefulWidget {
const MyWrapper({this.child});
final Widget child;
@override
_MyWrapperState createState() => _MyWrapperState();
}
class _MyWrapperState extends State<MyWrapper> {
int index = 0;
changePageIndex(int newIndex) {
setState(() {
index = newIndex;
});
}
@override
Widget build(BuildContext context) {
return InheritedPageIndex(indexData: index , child: widget.child, state: this);
}
}
class InheritedPageIndex extends InheritedWidget {
InheritedPageIndex(
{Key key, @required this.indexData, @required this.state, Widget child})
: super(key: key, child: child);
final _MyWrapperState state;
final int indexData;
@override
bool updateShouldNotify(InheritedPageIndex oldWidget) =>
indexData != oldWidget.indexData;
static InheritedPageIndex of(BuildContext context) =>
context.dependOnInheritedWidgetOfExactType<InheritedPageIndex>();
}
然后像这样使用它
MyWrapper(
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Testing Inherited Widgets',
home: MenuPage(),
),
);
最后像这样访问它/更改它
int indexData = InheritedPageIndex.of(context).indexData; //we access the variable
InheritedPageIndex.of(context).state.changePageIndex(1); //We change it, and all the widgets that accessed the data with InheritedPageIndex.of(context).indexData rebuild themselves
关于Flutter:我应该如何使用 InheritedWidget?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61187248/
简介:我认为这个问题原则上可能是共享的,但我觉得这个具体的应用程序不是。我谦虚地提交它供考虑,所以请温柔。我的代码在这里陷入了一个明显的陷阱,而且我根本不知道如何修复它。想了几个小时后,我什至不知道该
flutter documentation for InheritedWidget说 Base class for widgets that efficiently propagate informa
我想知道是否有人知道如何知道 InheritedWidget 何时被释放? 这个问题的原因是我正在做一些实验,并且我正在使用 InheritedWidget 作为 BLoC 的提供者。此 BLoC 在
我是不是错了,或者如果我们只是想将一个值传递到 Widget 树下,Provider只是一个带有 dispose 方法的 InheritedWidget 吗? 最佳答案 是的。 Provider 确实
我正在使用继承的 Widget 来访问具有一些长时间运行任务(例如搜索)的 Bloc。我想在第 1 页触发搜索并在完成后继续到下一页。因此,我正在监听流并等待结果发生,然后导航到结果页面。现在,由于使
我有以下设置: MaterialApp(home:SplashScreen) SplashScreen( ///do some auth checks then Navigator.of(contex
我正在使用 Rx_command、Rx_dart 使用响应式组件流/可观察对象进行开发 问题: 在我的 Flutter 应用中,我继承了可以在任何地方调用的小部件: FooProvider.of(co
我正在尝试将数据从一个小部件传递到树下的另一个小部件。这是我从一个屏幕导航到另一个屏幕的代码: final page = LanguagePreferenceProvider(child: UserN
我正在尝试查看是否可以添加一些在我的应用程序周围传递的通用导航行为,并且我发现 InheritedWidget 是避免在小部件树周围传递特定回调的绝佳选择,但是我越来越注意到我只能拥有特定类类型的 I
我是 Flutter 的新手,对 InheritedWidget 如何与路由一起工作感到困惑。我正在使用带有 sqflite 库的 SQLite 数据库。基本上,我想要实现的是,当我的应用程序启动时,
我看到我可以像这样在 build() 方法中访问 InheritedWidgets:final inheritWidget = ChronoApp.of(context); 但是如果我想访问它在其他地
我正在调用 InheritedWidget 的 of 函数,但是当您在上面看到我的小部件位于顶部时,我的函数返回 null那个树。调用来自被推送到导航器堆栈的页面,而不是该页面。有谁知道为什么?我的
可重现代码: void main() => runApp(MaterialApp(home: CountInheritedWidget(child: HomePage()))); class Coun
我在flutter中的代码实现InheritedWidget/InheritedModel是推荐的。但是我有一个小问题。 假设我有一个名为 MyInheritedWidget 的继承小部件其中包含一些
我希望在我的 Flutter 应用程序的根级别使用 InheritedWidget,以确保所有子小部件都可以使用经过身份验证的用户的详细信息。基本上让 Scaffold 成为 IW 的子节点,如下所示
我希望在我的 Flutter 应用程序的根级别使用 InheritedWidget,以确保所有子小部件都可以使用经过身份验证的用户的详细信息。基本上让 Scaffold 成为 IW 的子节点,如下所示
我的应用程序根目录中有一个 InheritedWidget,基本上位于我的第一个 Scaffold 的第一个构建函数的顶部。我可以使用 .of(context) 函数从第一页的所有子小部件中引用小部件
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 4 年前。 Improve
在将 InheritedWidget 添加到应用程序后,当我使用 Pop() 从详细信息屏幕返回列表时,我发现 ListView 失去了滚动位置(所选项目索引)。 我知道小部件可以随时重建,但也许有人
在导航到新小部件后尝试访问 InheritedWidget 时遇到问题。 我有这样的顶级小部件 class App extends StatelessWidget{ build(context){
我是一名优秀的程序员,十分优秀!