Flutter页面文本右侧溢出，添加Flexible/Expanded组件报错求解

问题根源 #

你遇到的核心问题是布局约束冲突：

• 外层SingleChildScrollView让内部Column的垂直方向约束无界（支持无限滚动），直接给Column内的Text添加Flexible/Expanded时，这两个组件会试图在垂直方向占据无限空间，触发约束错误。
• 同时，Row内部的Column默认没有水平宽度约束，导致长文本无法自动换行，出现右侧溢出。

解决方案 #

正确的做法是给Row里的Column包裹Flexible/Expanded，让Column在水平方向获得明确的宽度约束，内部长文本就能自动换行，无需给单个Text添加Flexible/Expanded。

修改后的完整代码 #

import 'package:flutter/material.dart';

class InfoPage extends StatefulWidget {
  const InfoPage({super.key});

  @override
  State<InfoPage> createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("My App"),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text("Title Here", style: TextStyle(fontSize: 20)),
              Row(
                children: [
                  // 示例ImageIcon，可替换为你的图标
                  const Icon(Icons.info_outline),
                  // 给Column包裹Flexible，获取水平方向约束
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start, // 可选：让文本左对齐更美观
                      children: const [
                        Text("Text 1"),
                        Text("REALLY LONG TEXT REALLY LONG TEXT REALLY LONG TEXT REALLY LONG TEXT REALLY LONG TEXT REALLY LONG TEXT")
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

补充说明 #

• 若希望Column占据Row的全部剩余水平空间，可将Flexible替换为Expanded，效果基本一致。
• crossAxisAlignment: CrossAxisAlignment.start是可选配置，用于避免文本默认居中导致的布局空隙，可根据需求调整为CrossAxisAlignment.center或其他值。

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