flutter - 如何在 Flutter 中的不同有状态小部件之间向前和向后移动数据？

Question

第一个stateful widget中有count变量，我把它传给了Setting class。并且，Setting class 将其传递给SettingStateBuilder。然后，它的值在 SettingStateBuilder 的 incrementing() 中改变。我希望更新后的值返回到 HomePageBody 以进行进一步的工作。我该怎么做？

第一个有状态小部件创建如下:

class HomePage extends StatefulWidget {
  @override
  HomePageBody createState() => HomePageBody();
}

class HomePageBody extends State<HomePage> {
   int count=0;
   @override
   Widget build(BuildContext context) {
       ...
       new Setting(count);
   }
}

第二个有状态小部件创建如下:

class Setting extends StatefulWidget {
   int count;
   Setting(this.count);

   @override
   SettingStateBuilder createState() => SettingStateBuilder(count);
}

class SettingStateBuilder extends State<Setting> {
   int count;
   SettingStateBuilder(this.count);
  
  @override
  Widget build(BuildContext context) {
    return new Container( 
       new Text(count.toString());
       ....
       onPressed: () => setState(() => incrementing(context))),
    );
  }
  incrementing(context) { count += 1; }
}

Answer 1

您可以将 Function 属性添加到 Settings 小部件，当计数器递增时将调用该属性，并在您创建小部件时传递该函数，因此在 HomePage 你可以更新计数器:

class HomePage extends StatefulWidget {
  @override
  HomePageBody createState() => HomePageBody();
}

class HomePageBody extends State<HomePage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          MaterialButton(
            child: Text('Settings'),
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context) => Settings(
                        count,
                        (newCount) {
                          setState(
                            () {
                              count = newCount;
                            },
                          );
                        },
                      ),
                ),
              );
            },
          )
        ],
      ),
      body: Center(
        child: Text('$count'),
      ),
    );
  }
}

class Settings extends StatefulWidget {
  final int count;
  final Function(int) onCounterChanged;

  Settings(this.count, onCounterChanged);

  @override
  SettingsStateBuilder createState() => SettingsStateBuilder(count);
}

class SettingsStateBuilder extends State<Settings> {
  int count;
  SettingsStateBuilder(this.count);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$count'),
            MaterialButton(
              child: Text('Increment'),
              onPressed: () => setState(
                    () {
                      increment();
                    },
                  ),
            ),
          ],
        ),
      ),
    );
  }

  increment() {
    count += 1;
    widget.onCounterChanged(count);

  }
}

如果您正在处理更复杂的用例，我建议您阅读有关如何在 Flutter 中进行状态管理的一些资源:

https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro https://flutter.dev/docs/development/data-and-backend/state-mgmt/options