如何使用键强制重绘有状态的小部件

Question

我正在制作一个应用程序，它从API中提取数据并在视图中显示(MVC样式(
我需要弄清楚如何强制视图小部件重新绘制自己。现在我尝试使用ValueKeys和ObjectKeys，但没有成功。

这里有很多很多代码，所以我将尽可能多地使用片段来保持它的清晰。(如果您需要查看更多代码，请随时询问(

这是我的视图小部件：

class view extends StatefulWidget{
view({
Key key,
this.count = 0,
}) : super(key: key);
int count;
String _action='';
var _actionParams='';
var _data;
Function(String) callback;
void setAction(String newAction){
_action = newAction;
}
void setActionParams(String params){
_actionParams = jsonDecode(params);
}
void setData(String data){
_data = jsonDecode(data);
}
void incrementCounter(){
count++;
}
@override
_viewState createState() => _viewState();
}
class _viewState extends State<view>{
Object redrawObject = Object();
@override
Widget build(BuildContext context) {
/*
switch(widget._action){
case '':
break;
default:
return null;
}
*/
return Text("Counter: "+widget.count.toString());
}
@override
void initState(){
this.redrawObject = widget.key;
super.initState();
}
}

您可以在注释的代码中看到，我正计划改变视图在传递给它的数据函数中构建自己的方式

到目前为止，我所尝试的是在构造函数中将ValueKey/ObjectKey从main.dart传递到视图，然后在运行时更改对象。不幸的是，这并没有奏效。

在我的主飞镖的顶部(可以从主飞镖内的任何地方访问(，我有这个：

Object redraw = Object();
final dataView = new view(key: ObjectKey(redraw));

然后在主页的主体中，我有一个视图和一个浮动按钮。如果我按下按钮，它应该会增加视图中的计数器，并强制它重新绘制。以下是我迄今为止尝试过的代码：

body: Center(
child: dataView
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.badge),
onPressed: (){
dataView.incrementCounter();
redraw = new Object();
},
),

据我所知，如果用作键的对象发生了更改，那么flutter应该重建小部件的状态。所以我将我的对象设置为一个新对象，但它不起作用。

我也试过这样的东西：

onPressed: (){
setState((){
dataView.incrementCounter();
redraw = new Object();
});
},

最后，我想将导航器与我的视图小部件结合使用(这样我们就有了一个后退按钮(，但我不知道这是否可行。

这感觉有点像我在与框架作斗争。我应该使用不同的范式吗(比如页面？(或者我可以这样做吗？

如何强制重新绘制视图小部件？

Answer 1

您可以检查flatter_phoenix的逻辑以获得重绘效果。我认为它非常有用，或者你可以直接使用包本身。基本上，它做的是你想要实现的。

它在状态中创建一个唯一的密钥。

Key _key = UniqueKey();

将其注入容器。

@override
Widget build(BuildContext context) {
return Container(
key: _key,
child: widget.child,
);
}

当你们称之为重生时，它只是刷新键，这会导致视图重建。

void restartApp() {
setState(() {
_key = UniqueKey();
});
}

Answer 2

使用GöktuğVatandaş的答案和GlobalKeys，我能够算出它。

我在状态中创建了一个reDraw((函数，然后使用GlobalKey从main调用它。

注意：包装在容器中并使用容器的密钥是不必要的。调用setState((就足以强制重绘。

这是新的视图小部件：

import 'dart:convert';
import 'package:flutter/cupertino.dart';
GlobalKey<_viewState> viewKey = GlobalKey();
class view extends StatefulWidget{
view({
Key key,
this.count = 0,
}) : super(key: key);
int count;
String _action='';
var _actionParams='';
var _data;
Function(String) callback;
void setAction(String newAction){
_action = newAction;
}
void setActionParams(String params){
_actionParams = jsonDecode(params);
}
void setData(String data){
_data = jsonDecode(data);
}
void incrementCounter(){
count++;
}
@override
_viewState createState() => _viewState();
}
class _viewState extends State<view>{
@override
Widget build(BuildContext context) {
/*
switch(widget._action){
case '':
break;
default:
return null;
}
*/
return Text("Counter: "+widget.count.toString());
}
@override
void initState(){
super.initState();
}
void reDraw(){
setState((){});
}
}

以下是我在主窗口中声明视图小部件的位置：

final dataView = new view(key: viewKey);

这里是我调用reDraw((函数的地方：

floatingActionButton: FloatingActionButton(
child: Icon(Icons.badge),
onPressed: (){
dataView.incrementCounter();
viewKey.currentState.reDraw();
},
),

感谢GöktuğVatandaş！