Flutter实现单词列表居中显示并自动换行超出内容

你当前的代码问题在于每个单词都被单独放在一个Wrap组件里，导致每个单词独占一行，无法实现多行自动换行的效果。直接把所有单词子组件放到同一个Wrap中，同时设置Wrap的对齐方式为居中，就能实现你想要的效果。

修改后的代码示例：

Expanded(
  child: FutureBuilder<WordModel>(
    future: alphabetsList(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        // 将所有单词组件统一放入同一个Wrap
        return Wrap(
          alignment: WrapAlignment.center,
          spacing: 18.0, // 单词间的水平间距
          runSpacing: 18.0, // 行与行之间的垂直间距
          children: snapshot.data.words.map((word) {
            return Text(word.name.toString());
          }).toList(),
        );
      } 
      // 补充数据未加载时的占位UI，避免布局异常
      return const Center(child: CircularProgressIndicator());
    },
  ),
)

关键调整说明：

• 移除ListView.builder，直接用Wrap作为FutureBuilder的返回组件，让所有单词在同一个容器内排列
• 通过map方法将单词列表批量转换为Text组件，一次性传入Wrap的children属性
• 用spacing和runSpacing控制单词间距，也可以保留Padding包裹Text，根据视觉需求调整
• 补充数据加载中的默认UI，完善页面状态逻辑

这样修改后，Wrap会自动根据屏幕宽度排列单词，超出一行时自动换行，且整体内容居中对齐，完全匹配你的需求。

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