场景:多个组件共用一个状态,子组件通过方法改变父组件状态
思路:状态和管理方法定义在父组件,通过构造函数传递给子组件
一、定义一个有状态父组件
class ParentsWidget extends StatefulWidget {
@override
_ParentsWidgetState createState() => _ParentsWidgetState();
}
class _ParentsWidgetState extends State<ParentsWidget> {
int _currentIndex = 0; //状态
void changeTab(i) { //管理状态方法
setState(() {
_currentIndex = i;
});
}
}
@override
Widget build(BuildContext context) {
return SonWidget(_currentIndex, changeTab); //传递给子组件
}
}
二、定义接收状态的子组件
class SonWidget extends StatelessWidget {
SonWidget(this._currentIndex, this.changeTab);
final int _currentIndex;
final Function changeTab;
void _handleTap(i) {
changeTab(i);
}
@override
Widget build(BuildContext context) {
return Center(
child: GestureDetector(
child: Container(
width: 200,
height: 200,
color: isActive ? Colors.amber : Colors.blue,
child:Text(_currentIndex) //在子组件中显示状态
),
onTap: _handleTap(1), //调用方法改变状态
),
);
}
}
其他子组件按照同样方法接收即可共用该父组件的状态。
网友评论