如何在活动时从父级更新 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 在PaperSelect 的父 Widget 中更新。 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 是 List<String>，因为您根本没有指定。 （在大多数情况下，您通常不应该使用dynamic，因为它根本不进行任何类型检查）。总之，

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

// 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 = ... ) 将更新值推迟到当前构建阶段之后。