Flutter中子组件如何更新父组件的状态？Vue的事件方法不生效了
在用Flutter做列表项点击时遇到状态同步问题。我按照Vue的思路，在子组件通过回调修改父组件的变量，但页面就是不更新。已经试过用setState包裹回调，但控制台提示setState() called after dispose。
// 父组件简化代码
class Parent extends StatefulWidget {
bool isClicked = false;
void handleClick() {
setState(() {
isClicked = true; // 这里报错
});
}
@override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
@override
Widget build(BuildContext context) {
return Column(
children: [
ChildComponent(onTap: widget.handleClick),
Text(widget.isClicked ? '已点击' : '未点击')
],
);
}
}
之前在Vue里直接用事件触发父组件方法就能搞定，但Flutter这样写就报错。是不是状态管理的方式完全不一样？该用Provider还是直接重构组件结构？
1 条解答
另外，你调用setState的时候组件可能已经被销毁了，所以才会报setState() called after dispose。这不是Provider的问题，是基本的状态管理方式问题。
直接拿去改改这个写法：
class Parent extends StatefulWidget {
@override
_ParentState createState() => _ParentState();
}
class _ParentState extends State
bool isClicked = false;
void handleClick() {
setState(() {
isClicked = true;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
ChildComponent(onTap: handleClick),
Text(isClicked ? '已点击' : '未点击')
],
);
}
}
然后子组件触发的时候直接调用onTap就行。如果子组件需要传参，记得定义好参数类型：
class ChildComponent extends StatelessWidget {
final Function() onTap;
const ChildComponent({Key? key, required this.onTap}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Text('点我'),
);
}
}
要是状态要跨很多层组件共享，这时候才考虑用Provider或者Riverpod。单个组件层级不深的话，这种回调方式完全够用。