Flutter中如何让含换行文本的Row在Column中居中

要实现你需要的效果，核心是让文本容器仅占用换行后实际需要的宽度，同时保证整个内容在Column中居中。以下是可行的解决方案：

关键思路 #

1. 移除Flexible/Expanded：这类组件会强制文本容器占满Row的剩余水平空间，这是导致红框过宽的根本原因。
2. 用Wrap替代Row：Wrap会根据子组件的实际尺寸自适应宽度，通过alignment: WrapAlignment.center可直接实现整体居中。
3. 动态限制文本最大宽度：通过LayoutBuilder获取父容器宽度，计算文本可用的最大宽度，确保文本在允许范围内自动换行，同时容器会收缩至文本换行后的实际宽度。

修改后的代码 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
        width: 300,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Wrap(
              alignment: WrapAlignment.center,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: [
                const Text('\u{1F603}', style: TextStyle(fontSize: 24.0)),
                const SizedBox(width: 8),
                LayoutBuilder(
                  builder: (context, constraints) {
                    return Container(
                      constraints: BoxConstraints(
                        maxWidth: constraints.maxWidth - 40, // 预留图标和间距的宽度
                      ),
                      decoration: BoxDecoration(border: Border.all(color: Colors.red)),
                      child: const Text(
                        'Some text that ends up taking_two_lines',
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
                        softWrap: true,
                      ),
                    );
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

效果说明 #

• Wrap组件会自动调整自身宽度以适配子组件，配合WrapAlignment.center让整个图标+文本组合在Column中居中。
• LayoutBuilder动态获取父容器宽度后，给文本容器设置合理的maxWidth，确保文本在该范围内自动换行，同时容器会收缩至文本换行后的实际宽度（红框仅包裹文本内容）。
• 移除Flexible后，文本容器不再强制扩展，完全根据内容大小调整尺寸。

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