Flutter如何隐藏溢出Widget？按优先级显示Row子组件

方案一：用CustomMultiChildLayout实现（更推荐） #

这个组件专门用来自定义多子组件的布局逻辑，正好能满足你“按优先级累加宽度，空间不够就隐藏低优先级组件”的需求，而且是在布局阶段直接处理，不会有预渲染的闪烁问题。

具体实现步骤：

1. 写一个MultiChildLayoutDelegate的子类，在performLayout方法里处理核心逻辑：
   • 先拿到父容器的可用宽度
   • 按你设定的优先级遍历子组件，跳过条件不满足的
   • 逐个测量子组件的尺寸，累加已用宽度
   • 一旦加上当前组件的宽度超过可用空间，就停止布局后面的组件，相当于直接隐藏它们
   • 对能放下的组件，设置好位置让它们显示在Row里

示例代码：

class PriorityRowDelegate extends MultiChildLayoutDelegate {
  final List<bool> visibilityChecks;

  PriorityRowDelegate(this.visibilityChecks);

  @override
  void performLayout(Size size) {
    double usedWidth = 0;
    for (int i = 0; i < visibilityChecks.length; i++) {
      // 跳过条件不满足的组件
      if (!visibilityChecks[i]) continue;
      final childId = i;
      if (!hasChild(childId)) continue;

      // 测量当前组件的最小所需宽度
      final childSize = layoutChild(childId, BoxConstraints.loose(size));
      // 空间不够就停止，后面的组件都不布局
      if (usedWidth + childSize.width > size.width) break;
      // 把组件放到Row的对应位置
      positionChild(childId, Offset(usedWidth, 0));
      usedWidth += childSize.width;
    }
  }

  @override
  bool shouldRelayout(PriorityRowDelegate oldDelegate) {
    return visibilityChecks != oldDelegate.visibilityChecks;
  }
}

// 调用方式
Container(
  width: 200,
  child: CustomMultiChildLayout(
    delegate: PriorityRowDelegate([userCan1, userCan2, userCan3, userCan4]),
    children: [
      LayoutId(id: 0, child: const Text("test")),
      LayoutId(id: 1, child: const Icon(Icons.circle)),
      LayoutId(id: 2, child: Container(width: 300)),
      LayoutId(id: 3, child: const Placeholder()),
    ],
  ),
);

方案二：LayoutBuilder+GlobalKey预测量尺寸 #

这个方案需要先预获取每个子组件的宽度，再决定哪些显示：

• 用LayoutBuilder拿到父容器的可用宽度
• 给每个子组件绑定GlobalKey，通过key.currentContext?.size获取组件宽度（注意要等组件渲染后才能拿到）
• 按优先级累加宽度，超过可用空间就不再渲染后面的组件

不过这个方案有个小问题：第一次渲染时拿不到尺寸，需要等下一帧更新状态，可能会有短暂的闪烁，适合简单场景。

示例代码：

class PriorityRow extends StatefulWidget {
  final List<Widget> children;
  final List<bool> visibilityChecks;
  final double maxWidth;

  const PriorityRow({
    super.key,
    required this.children,
    required this.visibilityChecks,
    required this.maxWidth,
  });

  @override
  State<PriorityRow> createState() => _PriorityRowState();
}

class _PriorityRowState extends State<PriorityRow> {
  final List<GlobalKey> _childKeys = [];
  List<double> _childWidths = [];

  @override
  void initState() {
    super.initState();
    // 给每个子组件生成GlobalKey
    _childKeys.addAll(List.generate(widget.children.length, (_) => GlobalKey()));
    // 等第一帧渲染完再获取尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _childWidths = _childKeys.map((key) => key.currentContext?.size?.width ?? 0).toList();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    double usedWidth = 0;
    final visibleChildren = <Widget>[];

    for (int i = 0; i < widget.children.length; i++) {
      if (!widget.visibilityChecks[i]) continue;
      final width = _childWidths.isNotEmpty ? _childWidths[i] : 0;
      if (usedWidth + width > widget.maxWidth) break;
      visibleChildren.add(Container(key: _childKeys[i], child: widget.children[i]));
      usedWidth += width;
    }

    return Row(children: visibleChildren);
  }
}

// 调用方式
Container(
  width: 200,
  child: PriorityRow(
    maxWidth: 200,
    children: [
      const Text("test"),
      const Icon(Icons.circle),
      Container(width: 300),
      const Placeholder(),
    ],
    visibilityChecks: [userCan1, userCan2, userCan3, userCan4],
  ),
);

额外提醒 #

• 如果子组件之间有间距（比如SizedBox(width: 8)），记得在累加宽度时把间距的宽度也算进去，不然会出现提前溢出的情况
• 对于文本组件，建议设置softWrap: false，避免文本自动换行导致测量的宽度不准确

内容的提问来源于stack exchange，提问作者Neut