我在Flutter中有一个带有按钮的StatefulWidget，它使用Navigator.push()将我导航到另一个StatefulWidget。在第二个小部件上，我正在更改全局状态(一些用户首选项)。当我从第二个小部件回到第一个时，使用Navigator.pop()，第一个小部件处于旧状态，但我想强制它重新加载。知道怎么做吗?我有一个想法，但看起来很难看:
弹出以删除第二个小部件(当前小部件) 再次弹出以删除第一个小部件(前一个) 推送第一个小部件(它应该强制重绘)
当前回答
需要强制重建我的一个无状态小部件。不想使用有状态的。我想出了这个解决方案:
await Navigator.of(context).pushNamed(...);
ModalRoute.of(enclosingWidgetContext);
注意，context和enclosingWidgetContext可以是相同的上下文，也可以是不同的上下文。例如，如果你从StreamBuilder内部推送，它们将是不同的。
我们在这里没有用ModalRoute做任何事情。仅订阅行为就足以强制重新构建。
其他回答
onTapFunction(BuildContext context) async {
final reLoadPage = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => IdDetailsScreen()),
);
if (reLoadPage) {
setState(() {});
}
}
现在在做Navigator的时候。从第二页弹出到第一页只是返回一些值，在我的情况下是bool类型
onTap: () {
Navigator.pop(context, true);
}
这里有几件事你可以做。@Mahi的回答虽然正确，但可以更简洁一点，实际上使用push而不是showDialog，因为OP正在询问。这是一个使用Navigator.push的例子:
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('back'),
),
],
),
);
}
}
class FirstPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new FirstPageState();
}
class FirstPageState extends State<FirstPage> {
Color color = Colors.white;
@override
Widget build(BuildContext context) {
return new Container(
color: color,
child: Column(
children: <Widget>[
RaisedButton(
child: Text("next"),
onPressed: () async {
final value = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage()),
),
);
setState(() {
color = color == Colors.white ? Colors.grey : Colors.white;
});
},
),
],
),
);
}
}
void main() => runApp(
MaterialApp(
builder: (context, child) => SafeArea(child: child),
home: FirstPage(),
),
);
但是，还有另一种方法可以很好地满足您的用例。如果使用全局参数来影响第一个页面的构建，那么可以使用InheritedWidget来定义全局用户首选项，每次更改时，FirstPage都会重新构建。这甚至可以在无状态小部件中工作，如下所示(但也应该可以在有状态小部件中工作)。
在flutter中inheritedWidget的一个例子是应用程序的Theme，尽管他们在小部件中定义了它，而不是像我这里这样直接构建它。
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
ColorDefinition.of(context).toggleColor();
Navigator.pop(context);
},
child: new Text("back"),
),
],
),
);
}
}
class ColorDefinition extends InheritedWidget {
ColorDefinition({
Key key,
@required Widget child,
}): super(key: key, child: child);
Color color = Colors.white;
static ColorDefinition of(BuildContext context) {
return context.inheritFromWidgetOfExactType(ColorDefinition);
}
void toggleColor() {
color = color == Colors.white ? Colors.grey : Colors.white;
print("color set to $color");
}
@override
bool updateShouldNotify(ColorDefinition oldWidget) =>
color != oldWidget.color;
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var color = ColorDefinition.of(context).color;
return new Container(
color: color,
child: new Column(
children: <Widget>[
new RaisedButton(
child: new Text("next"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondPage()),
);
}),
],
),
);
}
}
void main() => runApp(
new MaterialApp(
builder: (context, child) => new SafeArea(
child: new ColorDefinition(child: child),
),
home: new FirstPage(),
),
);
如果您使用继承的小部件，则不必担心查看所推送的页面是否弹出，这适用于基本用例，但在更复杂的场景中可能最终会出现问题。
简单的技巧就是使用导航器。pushReplacement方法
第1页
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Page2(),
),
);
第二页
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Page1(),
),
);
简而言之，您应该让小部件监视状态。为此，您需要进行状态管理。
我的方法是基于Flutter架构示例和Flutter文档中解释的提供者。请参考他们更简洁的解释，但或多或少的步骤是:
用小部件需要观察的状态定义状态模型。
你可以有多个状态，比如data和isLoading，来等待一些API进程。模型本身扩展了ChangeNotifier。
用监控器类包装依赖于这些状态的小部件。
这可以是消费者或选择器。
当你需要“重新加载”时，你基本上需要更新这些状态并传播这些变化。
对于状态模型，类大致如下所示。注意notifyListeners，它广播更改。
class DataState extends ChangeNotifier{
bool isLoading;
Data data;
Future loadData(){
isLoading = true;
notifyListeners();
service.get().then((newData){
isLoading = false;
data = newData;
notifyListeners();
});
}
}
现在来看小部件。这将是一个非常基本的代码。
return ChangeNotifierProvider(
create: (_) => DataState()..loadData(),
child: ...{
Selector<DataState, bool>(
selector: (context, model) => model.isLoading,
builder: (context, isLoading, _) {
if (isLoading) {
return ProgressBar;
}
return Container(
child: Consumer<DataState>(builder: (context, dataState, child) {
return WidgetData(...);
}
));
},
),
}
);
状态模型的实例由ChangeNotifierProvider提供。选择器和消费者分别监视isLoading和data的状态。它们之间没有太大的区别，但就个人而言，如何使用它们取决于它们的构建者提供的内容。Consumer提供了对状态模型的访问，因此对于它下面的任何小部件来说，调用loadData更简单。
如果不是，那么可以使用Provider.of。如果我们想在从第二个屏幕返回时刷新页面，那么我们可以这样做:
await Navigator.push(context,
MaterialPageRoute(
builder: (_) {
return Screen2();
));
Provider.of<DataState>(context, listen: false).loadData();
简短的回答:
在第一页使用这个:
Navigator.pushNamed(context, '/page2').then((_) => setState(() {}));
在第二页
Navigator.pop(context);
有两个东西，传递数据
第一页至第二页 在第一页使用这个 //从第一个发送“Foo 导航器。push(context, MaterialPageRoute(builder: (_) => Page2("Foo"))); 在第二页使用这个。 类Page2扩展StatelessWidget 字符串; 所以Page2 (this.string);//在第二帧接收“Foo” .．. ｝
第二页至第一页 在第二页使用这个 //从第二发送“Bar” 导航器。流行(上下文,“酒吧”); 在第一页使用这个，它是相同的，但有一点修改。 //第1位接收“Bar” 字符串received = await Navigator。push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
