Flutter如何实现文本胶囊容器动态排列及组件尺寸获取？

首先明确：Flutter中无法通过类似getSizeOfThisWidget的同步函数直接获取未渲染组件的尺寸——组件的尺寸是在布局阶段计算出来的，必须经过build和layout流程后才能拿到。你当前代码的问题在于MeasureSize的onChange回调是异步触发的，循环构建rowList时width还没被更新，导致行拆分逻辑完全失效。

下面提供两种可行的解决思路：

方案一：预计算胶囊宽度（手动拆分行） #

通过TextPainter提前计算文本宽度，加上容器的padding即可得到胶囊的总宽度，用这个预计算值来做行拆分判断：

1. 编写宽度计算函数 #

double calculatePillWidth(String text, TextStyle style, EdgeInsets padding) {
  final textPainter = TextPainter(
    text: TextSpan(text: text, style: style),
    textDirection: TextDirection.ltr,
  )..layout(minWidth: 0, maxWidth: double.infinity);
  // 文本宽度 + 左右padding（如果有边框还需加上边框宽度）
  return textPainter.width + padding.horizontal;
}

2. 修改循环逻辑 #

Consumer<CategoryProvider>(
  builder: (BuildContext context, value, Widget? child) {
    List<dynamic> data = value.categoryData;
    final screenWidth = MediaQuery.of(context).size.width;
    double limit = screenWidth - 40;
    double currentRowWidth = 0;
    List<Widget> mainList = [];
    List<Widget> rowList = [];

    // 提前定义胶囊的padding和文本样式
    final pillPadding = const EdgeInsets.symmetric(horizontal: 14, vertical: 6);
    final textStyle = KTextStyle.kNormalTextStyle;

    for (var index = 0; index < data.length; index++) {
      FolderModel folderModel = FolderModel(
        id: data[index]['id'],
        folderName: data[index]['folderName'],
        categoryLevel: data[index]['categoryLevel'],
      );

      // 预计算当前胶囊的宽度
      double pillWidth = calculatePillWidth(
        folderModel.folderName,
        textStyle,
        pillPadding,
      );

      // 判断当前行是否能放下这个胶囊
      if (currentRowWidth + pillWidth > limit) {
        // 放不下就把当前行加入主列表，重置行数据
        mainList.add(Row(children: rowList));
        rowList = [];
        currentRowWidth = 0;
      }

      // 添加胶囊到当前行
      rowList.add(Container(
        padding: pillPadding,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: KColors.kPillBgColor,
        ),
        child: Text(
          folderModel.folderName,
          style: textStyle,
        ),
      ));
      currentRowWidth += pillWidth;
    }

    // 把最后一行加入主列表
    if (rowList.isNotEmpty) {
      mainList.add(Row(children: rowList));
    }

    return Column(children: mainList);
  },
)

方案二：使用Wrap组件（推荐） #

Flutter内置的Wrap组件会自动处理子组件的换行逻辑，完全不需要手动计算尺寸，是实现这种流式布局的最优解：

Consumer<CategoryProvider>(
  builder: (BuildContext context, value, Widget? child) {
    List<dynamic> data = value.categoryData;
    return Wrap(
      spacing: 8, // 胶囊之间的水平间距
      runSpacing: 8, // 行与行之间的垂直间距
      children: data.map((item) {
        FolderModel folderModel = FolderModel(
          id: item['id'],
          folderName: item['folderName'],
          categoryLevel: item['categoryLevel'],
        );
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40),
            color: KColors.kPillBgColor,
          ),
          child: Text(
            folderModel.folderName,
            style: KTextStyle.kNormalTextStyle,
          ),
        );
      }).toList(),
    );
  },
)

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