Flutter带图标文本自适应布局：空间充足居中，不足时换行

要同时实现空间充足时中间组居中、空间不足时文本换行且Icon与Text不分离的效果，你可以参考以下实现方式：

核心思路 #

• 外层Row通过MainAxisAlignment.spaceBetween让左右两组固定在两端，中间组填充剩余空间
• 中间组用Flexible包裹，确保它能根据可用空间自适应收缩
• 中间组内部用Wrap承载Icon和Text，保证两者始终作为一个整体布局：空间充足时水平并排居中，空间不足时文本自动换行

完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 左侧 Icon + Text 组
                const Row(
                  children: [
                    Icon(Icons.add),
                    SizedBox(width: 4),
                    Text("A text"),
                  ],
                ),
                // 中间 Icon + Text 组：兼容两种场景的核心
                Flexible(
                  child: Wrap(
                    alignment: WrapAlignment.center,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    children: const [
                      Icon(Icons.add),
                      SizedBox(width: 4),
                      Text(
                        "a possibly very long text that will wrap when space is limited",
                        softWrap: true,
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                ),
                // 右侧 Icon + Text 组
                const Row(
                  children: [
                    Icon(Icons.add),
                    SizedBox(width: 4),
                    Text("another text"),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

代码说明 #

1. 外层Row的spaceBetween属性确保左右两组固定在屏幕两端，中间组自动填充剩余空间
2. Flexible让中间组在空间不足时可以收缩，同时不会像Expanded那样强制占据全部可用空间
3. Wrap组件会自动处理子元素布局：空间充足时Icon与Text水平并排并居中；空间不足时文本自动换行，且Icon始终与Text保持关联不分离
4. textAlign: TextAlign.center让换行后的文本保持居中，优化视觉体验
5. 加入SizedBox给Icon和Text增加间距，提升布局美观度

旧代码问题分析 #

• 代码1给中间组的Text添加了Expanded，导致Icon与Text被拆分为独立的可扩展元素，空间不足时会分离
• 代码2未将中间的Icon和Text作为整体包裹，空间不足时Icon会被挤到文本旁甚至分离

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