如何在活动时从父级更新 ModalBottomSheet 的内容

Question

我有一个自定义按钮，其中包含项目列表。当按下它时，它会打开一个模态底部工作表并将该列表传递到底部工作表。

但是，当按钮项目更改时，它不会更新底部工作表中的项目。

我怎样才能达到这个效果。

简单的例子

ButtonsPage
     |
Button(items: initialItems)
     |
BottomSheet(items: initialItems)

** After a delay, setState is called in ButtonsPage with newItems, thereby sending newItems to the button

ButtonsPage
     |
Button(items: newItems)
     | ## Here, the bottom sheet is open. I want it to update initialItems to be newItems in the bottom sheet

BottomSheet(items: initialItems -- should be newItems)

代码示例

这是我的选择字段，如图所示，它接收一个列表items，当按下它时，它会打开一个底部工作表并将收到的项目发送到底部工作表。

class PaperSelect extends StatefulWidget {
  final List<dynamic> items;

  PaperSelect({
    this.items,
  }) : super(key: key);

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

class _PaperSelectState extends State<PaperSelect> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      onTap: widget.disabled ? null : () => _showBottomSheet(context),
        child: Container(
            
        ),
    );
  }

  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) => BottomSheet(
        items: widget.items,
       ),
      )
    );
  }
}

一段时间后（网络调用），items在 的父 Widget 中更新PaperSelect。PaperSelect然后更新并接收新项目。

class BottomSheet extends StatefulWidget {
  final dynamic items;

  BottomSheet({
    this.items,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _BottomSheetState();
  }
}

class _BottomSheetState extends State<BottomSheet> {
  dynamic items;

  @override
  void initState() {
    print(widget.items);
    items = widget.items;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if(items==null) return Center(
      child: SizedBox(
          width: 140.0,
          height: 140.0,
          child: PaperLoader()
      ),
    );

    if(items==-1) return Text("Network Error");

    return Column(
      children: <Widget>
        Expanded(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: items.length,
            itemBuilder: (BuildContext context, int i) => ListTile(
              onTap: () => Navigator.pop(context),
              title: Text('')
            )
          ),
        ),
      ],
    );
  }

}

现在，我想将更新的数据发送到底部工作表。但是，它不起作用，因为 ModalBottomSheet 已经打开。

我该如何解决这个问题？

Answer 1

我在这里假设 items 是 a List<String>，因为您根本没有指定。（在大多数情况下您通常不应该使用dynamic，因为它根本不执行任何类型检查）。反正，

您可以做的一件事（除了无数其他事情之外）是传递 aValueNotifier<List<String>>而不是 a List<String>，然后ValueListenableBuilder在底部工作表中使用 a 来使用它。喜欢：

// in the caller
    final itemsNotifier = ValueNotifier(items);


// in your bottom sheet
    ValueListenableBuilder<List<String>>(
      valueListenable: itemsNotifier,
      builder: (context, snapshot, child) {
        final items = snapshot.data;
        // build your list
      },
    )

那么每次你改变itemsNotifier.value = [...]你的物品都会重建。

更新时请注意itemsNotifier.value：不能在build/ didUpdateWidget/etc 内完成。因此，如果是这种情况，您可以将WidgetsBinding.instance.addPostFrameCallback(() => itemsNotifier.value = ... )更新值推迟到当前构建阶段之后。