如何测量Widget宽度并判断其是否适配非滚动水平容器？

要实现这种“只显示能完全适配的Widget，剩余用计数标签替代”的需求，核心是提前测量每个子Widget的宽度，结合父容器可用空间动态筛选可见元素，避免先渲染所有Widget再移除的无效操作。具体实现步骤如下：

核心思路 #

1. 用LayoutBuilder获取父容器的可用宽度，作为总布局空间。
2. 预测量所有子Widget的宽度（通过GlobalKey+RenderBox，用Offstage包裹避免占用布局空间）。
3. 计算能容纳的Widget数量：累加子Widget宽度，直到加上下一个的宽度超过可用空间，同时预留计数标签的宽度。
4. 动态构建最终布局：显示前N个适配的Widget，加上剩余数量的计数标签（若有剩余）。

代码示例 #

import 'package:flutter/material.dart';

class HorizontalFitLayout extends StatefulWidget {
  final List<Widget> children;
  final Widget Function(int remainingCount) countLabelBuilder;

  const HorizontalFitLayout({
    super.key,
    required this.children,
    required this.countLabelBuilder,
  });

  @override
  State<HorizontalFitLayout> createState() => _HorizontalFitLayoutState();
}

class _HorizontalFitLayoutState extends State<HorizontalFitLayout> {
  final List<GlobalKey> _childKeys = [];
  int _visibleCount = 0;
  double _countLabelWidth = 0;

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < widget.children.length; i++) {
      _childKeys.add(GlobalKey());
    }
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _measureCountLabelWidth();
      _calculateVisibleChildren();
    });
  }

  @override
  void didUpdateWidget(covariant HorizontalFitLayout oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.children != oldWidget.children) {
      _childKeys.clear();
      for (var i = 0; i < widget.children.length; i++) {
        _childKeys.add(GlobalKey());
      }
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _measureCountLabelWidth();
        _calculateVisibleChildren();
      });
    }
  }

  void _measureCountLabelWidth() {
    final countLabel = widget.countLabelBuilder(widget.children.length);
    final key = GlobalKey();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderBox = key.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        setState(() {
          _countLabelWidth = renderBox.size.width;
        });
      }
    });
    WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));
  }

  void _calculateVisibleChildren() {
    if (widget.children.isEmpty || _countLabelWidth == 0) return;

    final layoutWidth = context.size?.width ?? 0;
    double totalWidth = 0;
    int visibleCount = 0;

    for (var i = 0; i < widget.children.length; i++) {
      final renderBox = _childKeys[i].currentContext?.findRenderObject() as RenderBox?;
      if (renderBox == null) continue;

      final childWidth = renderBox.size.width;
      final maxAllowedWidth = i == widget.children.length - 1 
          ? layoutWidth 
          : layoutWidth - _countLabelWidth;

      if (totalWidth + childWidth <= maxAllowedWidth) {
        totalWidth += childWidth;
        visibleCount++;
      } else {
        break;
      }
    }

    setState(() {
      _visibleCount = visibleCount;
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 显示适配的子Widget
            for (var i = 0; i < _visibleCount; i++)
              KeyedSubtree(key: _childKeys[i], child: widget.children[i]),
            // 显示计数标签
            if (_visibleCount < widget.children.length)
              widget.countLabelBuilder(widget.children.length - _visibleCount),
            // 临时测量用的Offstage子Widget
            if (_visibleCount == 0 && widget.children.isNotEmpty)
              for (var i = 0; i < widget.children.length; i++)
                Offstage(
                  child: KeyedSubtree(key: _childKeys[i], child: widget.children[i]),
                ),
            // 临时测量计数标签的Offstage Widget
            if (_countLabelWidth == 0)
              Offstage(
                child: KeyedSubtree(
                  key: GlobalKey(),
                  child: widget.countLabelBuilder(widget.children.length),
                ),
              ),
          ],
        );
      },
    );
  }
}

// 使用示例
void main() {
  runApp(const MaterialApp(home: HomePage()));
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final children = List.generate(5, (index) => Container(
      width: 100,
      height: 50,
      margin: const EdgeInsets.symmetric(horizontal: 4),
      color: Colors.blue[(index+1)*200],
      child: Center(child: Text('$index')),
    ));

    return Scaffold(
      appBar: AppBar(title: const Text('Horizontal Fit Layout')),
      body: Center(
        child: SizedBox(
          width: 250, // 模拟父容器宽度，仅能放下2个Widget+标签
          child: HorizontalFitLayout(
            children: children,
            countLabelBuilder: (remaining) => Container(
              margin: const EdgeInsets.symmetric(horizontal: 4),
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text('+$remaining'),
            ),
          ),
        ),
      ),
    );
  }
}

关键细节说明 #

• Offstage的作用：包裹需要测量的Widget，既不显示在界面上，又能让Flutter计算其尺寸，避免无效渲染。
• GlobalKey+RenderBox：通过GlobalKey获取Widget的RenderBox实例，拿到准确的宽度值。
• postFrameCallback：确保在Widget布局完成后再进行尺寸测量，避免获取到null的RenderBox。
• 动态更新处理：在didUpdateWidget中重新计算可见数量，保证子列表变化时布局能正确更新。

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