美文网首页
【Flutter】多组件共用状态,父组件状态传递给子组件

【Flutter】多组件共用状态,父组件状态传递给子组件

作者: Piemon_Jay | 来源:发表于2021-11-29 11:43 被阅读0次

场景:多个组件共用一个状态,子组件通过方法改变父组件状态
思路:状态和管理方法定义在父组件,通过构造函数传递给子组件

一、定义一个有状态父组件
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), //调用方法改变状态
      ),
    );
  }
}

其他子组件按照同样方法接收即可共用该父组件的状态。

相关文章

网友评论

      本文标题:【Flutter】多组件共用状态,父组件状态传递给子组件

      本文链接:https://www.haomeiwen.com/subject/biakxrtx.html