flutter - 如何在事件时从父级更新 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/等等。所以如果是这种情况，你可以使用 WidgetsBinding.instance.addPostFrameCallback(() => itemsNotifier.value = ... )将更新值推迟到当前构建阶段之后。