使用循环或List.generate生成组件时如何获取每个Container的宽度

你不需要提前手动声明20个GlobalKey，也不需要跨文件传递GlobalKey，以下两种方案都可以满足需求：

方案1：动态生成GlobalKey + 帧回调获取真实渲染宽度 #

这个方案拿到的是Container实际渲染后的真实宽度，适配所有样式变化、内边距/边框等场景，也不需要手动维护每个key：

import 'package:flutter/material.dart';

class LetterRow extends StatefulWidget {
  final String displayWord;
  // 可以通过回调把宽度列表传给父组件，解决跨文件传值问题
  final Function(List<double>)? onWidthsGet;
  const LetterRow({super.key, required this.displayWord, this.onWidthsGet});

  @override
  State<LetterRow> createState() => _LetterRowState();
}

class _LetterRowState extends State<LetterRow> {
  final List<GlobalKey> _containerKeys = [];
  final List<double> _letterWidths = [];

  @override
  void initState() {
    super.initState();
    // 动态生成对应数量的GlobalKey，不用手动逐个声明
    _containerKeys.addAll(List.generate(widget.displayWord.length, (index) => GlobalKey()));
    // 第一帧渲染完成后获取所有尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _letterWidths.clear();
      for (var key in _containerKeys) {
        final renderBox = key.currentContext?.findRenderObject() as RenderBox?;
        if (renderBox != null) _letterWidths.add(renderBox.size.width);
      }
      // 通过回调把宽度传给父组件，不需要跨文件传递GlobalKey
      widget.onWidthsGet?.call(_letterWidths);
      debugPrint("实际渲染宽度列表：$_letterWidths");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: List.generate(widget.displayWord.length, (index) {
        return Container(
          key: _containerKeys[index],
          // 你可以自定义Container的内边距、边框等样式，获取的宽度都会包含这些
          padding: const EdgeInsets.symmetric(horizontal: 2),
          child: Text(widget.displayWord[index]),
        );
      }),
    );
  }
}

方案2：TextPainter预计算宽度（无需GlobalKey） #

如果你的Container只有Text内容、没有额外的内边距/边框样式，或者你不需要等渲染完成就想拿到宽度，可以用这个方案，完全不需要用到GlobalKey：

import 'package:flutter/material.dart';

class LetterRow extends StatelessWidget {
  final String displayWord;
  final Function(List<double>)? onWidthsGet;
  // 必须和实际Text用的样式完全一致，否则计算结果会有偏差
  final TextStyle textStyle;

  const LetterRow({
    super.key,
    required this.displayWord,
    this.onWidthsGet,
    this.textStyle = const TextStyle(fontSize: 14, color: Colors.black),
  }) {
    // 初始化的时候直接计算宽度，不需要等渲染
    final widths = <double>[];
    for (var char in displayWord.characters) {
      final painter = TextPainter(
        text: TextSpan(text: char, style: textStyle),
        textDirection: TextDirection.ltr,
      )..layout();
      widths.add(painter.size.width);
    }
    onWidthsGet?.call(widths);
    debugPrint("预计算宽度列表：$widths");
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: List.generate(displayWord.length, (index) {
        return Container(
          child: Text(displayWord[index], style: textStyle),
        );
      }),
    );
  }
}

适用场景对比 #

• 选方案1的场景：Container有内边距、边框等额外样式，或者后续会动态修改字母样式、需要真实渲染后的宽度
• 选方案2的场景：样式固定、不需要依赖渲染结果、想要更简洁的实现逻辑

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