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

Posted 2023-02-23

技术标签:

【中文标题】如何从另一个小部件更改有状态小部件的变量？【英文标题】：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。 【参考方案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

这样做非常有帮助。

【讨论】：