如何从另一个小部件更改有状态小部件的变量？答案

【问题标题】：How to change variable of a stateful widget from another widget?如何从另一个小部件更改有状态小部件的变量？
【发布时间】：2021-12-26 07:25:13
【问题描述】：

如何从另一个小部件更改一个小部件的变量？这是名为HomePage 的主要有状态小部件：

class _HomePageState extends State<HomePage> {
  @override
  num counter = 0;

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Title")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [Text(counter.toString()), CardWidget()],
          ),
        ));
  }
}

这是添加到HomePage 的CardWidget：

class CardWidget extends StatefulWidget {
  const CardWidget({Key? key}) : super(key: key);

  @override
  _CardWidgetState createState() => _CardWidgetState();
}

class _CardWidgetState extends State<CardWidget> {
  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
      children: [
        Text("Press the button to increment the counter"),
        ElevatedButton(
          onPressed: () {
            //Something here to increment the counter in HomePage
          },
          child: const Text('Increment'),
        ),
      ],
    ));
  }
}

这是屏幕上显示的内容：

是否可以在两个小部件之间创建连接：如果我点击按钮，主页小部件中会发生某些事情？（类似于 UIKit 中的委托）

【问题讨论】：

请同时发布您的 HomePage 课程。
使用ValueNotifier 和ValueListenableBuilder。查看我对类似问题的回答here。

标签： flutter dart delegates widget flutter-layout

【解决方案1】：

您可以传递Function 参数。在您的CardWidget 中添加Function 参数。

class CardWidget extends StatefulWidget {
  //Add clicked function
  final Function onClicked;
  const CardWidget({Key? key, required this.onClicked}) : super(key: key);

  @override
  _CardWidgetState createState() => _CardWidgetState();
}

class _CardWidgetState extends State<CardWidget> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
      children: [
        Text("Press the button to increment the counter"),
        ElevatedButton(
          onPressed: () {
            //Something here to increment the counter in HomePage
            //Execute `onClicked` and pass parameter you want
            _count++;
            widget.onClicked(_count);
          },
          child: const Text('Increment'),
        ),
      ],
    ));
  }
}

然后在HomePage上添加onClicked参数

class _HomePageState extends State<HomePage> {
  @override
  num counter = 0;

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Fontanelle")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
               Text(counter.toString()),
               CardWidget(
                //Add onClicked
                 onClicked:(count){
                    print("Clicked "+count.toString());
                 }
               )
            ],
          ),
        ));
  }
}

【讨论】：

【解决方案2】：

对于这种情况，你有一些解决方案：

1、为StatefullWidget创建GlobalKey，即可从HomePage访问State

2、从Homepage创建Stream并传递给StatefullWidget

3、将参数传递给StatefullWidget并在状态上使用didUpdateWidget进行监听。

【讨论】：

【解决方案3】：

我记得这是我的第一个问题，我的第一步是什么时候开始的，@dangngocduc 是真的，但我的建议是阅读关于 BLOC 的信息

https://pub.dev/packages/flutter_bloc

这样做非常有帮助。

【讨论】：