更新高度时,Flutter Wrap微件呈现问题

iyr7buue  于 2023-02-13  发布在  Flutter
关注(0)|答案(1)|浏览(118)

我正在Flutter中创建一个表单(不使用Form小部件),用户可以在其中添加任意数量的项目(治疗),这些项目在Wrap小部件中呈现为InputChip小部件列表。
表格使用按钮(AddButton小部件)打开表格对话框,该对话框本身返回添加到 selectedItems 的新创建项目(治疗):

class TreatmentsWidget extends StatefulWidget {
  const TreatmentsWidget({super.key, required this.selectedItems});

  final List<Treatment> selectedItems;

  @override
  State<TreatmentsWidget> createState() => _TreatmentsWidgetState();
}

class _TreatmentsWidgetState extends State<TreatmentsWidget> {
  @override
  Widget build(BuildContext context) {
    var chips = widget.selectedItems.map(
      (item) {
        return InputChip(
          label: Text('${item.name} - ${item.frequency}/${item.frequencyUnit.name})',
        );
      },
    ).toList();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Wrap(
          children: chips,
        ),
        AddButton(onPressed: () {
          showDialog(
              context: context,
              builder: (BuildContext context) {
                return const TreatmentDialog();
              }).then((value) {
            if (value != null) {
              Treatment item = value;
              setState(() {
                widget.selectedItems.add(item);
              });
            }
          });
        }),
      ],
    );
  }
}

出于某种原因,当向 selectedItem 添加新项并且该项溢出当前行时,不会重新计算布局,从而Wrap小部件溢出按钮:

但是,只要用户滚动(整个屏幕内容都在SingleChildScrollView内),布局就会重新计算,Wrap会占用正确的空间量:

当添加新项目时,如何强制重绘以防止此问题?

bbuxkriu

bbuxkriu1#

问题似乎是,当Column的一个子帧大小发生变化时,Column不会在当前帧上重新计算其大小。
最后,每当chips.length发生更改时,我都使用ValueKey强制重新构建Column

class _TreatmentsWidgetState extends State<TreatmentsWidget> {
  @override
  Widget build(BuildContext context) {
    var chips = ...;

    return Column(
      key: ValueKey(chips.length),
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Wrap(
          children: chips,
        ),
        AddButton(...),
      ],
    );
  }
}

我仍然对一个更干净的解决方案感兴趣,如果它存在的话。使用提供程序对于这种情况似乎大材小用。

相关问题