5

我正在学习 Flutter 并尝试与 redux 集成以进行商店管理。

我看到商店的所有示例都是在小部件的渲染部分中访问的，例如：

Padding(
  padding: EdgeInsets.all(2.0),
  child: StoreConnector<AppState, List<Photo>>(
        converter: (store) => store.state.photos,
        builder: (_, photos) {
          return GridView.builder(
            itemCount: photos.length,
            itemBuilder: (BuildContext context, int index) {
              final photoUrl = photos[index].portrait;
              return Padding(
                padding: EdgeInsets.all(1.0),
                child: new Image.network(
                  photoUrl,
                  fit: BoxFit.cover,
                ),
              );
            },
            gridDelegate:                                    
            // .......

但是如何从 initState 中的存储中获取一个值，并检测该值是否发生变化，例如？我可以在渲染树之外为某个值设置一个监听器吗？

谢谢你。

为清楚起见进行编辑，我正在寻找的是一些 Flutter 等效于 react 的 useSelector 能够获得 useEffect 值的变化

编辑：我在想一个选项（尽管不是问题的答案）可能是从父级传递值，然后在子级中使用 didChangeDependencies()

4

1 回答 1

0

我对 react 的 useSelector 和 redux 了解不多，但在 Flutter 中，您可以将函数作为参数传递，这有助于更改不同小部件的值。

例子

  class MainClass extends StatefulWidget {
  MainClass({Key key}) : super(key: key);

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

class _MainClassState extends State<MainClass> {
  int value = 0;

  changeValue(int newValue) {
    setState(() {
      value = newValue;
    });
  }

  @override
  void initState() {
    print('value is $value');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          InnerClass2(
            value: value,
          ),
          InnerClass(
            changeValue: changeValue,
          ),
        ],
      ),
    );
  }
}

class InnerClass extends StatefulWidget {
  Function changeValue;

  InnerClass({@required this.changeValue, Key key}) : super(key: key);

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

class _InnerClassState extends State<InnerClass> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        onPressed: () {
          widget.changeValue(2);
        },
      ),
    );
  }
}

class InnerClass2 extends StatelessWidget {
  final int value;
  const InnerClass2({@required this.value, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(value.toString()),
    );
  }
}
于 2020-12-01T06:04:40.140 回答