Flutter问题：长文本无法自动换行至多行的解决方案咨询

问题根源 #

你的代码里，内层Row设置了mainAxisSize: MainAxisSize.min，它会完全根据子元素的固有尺寸决定自身宽度，而长文本Text没有任何宽度约束，导致它会一直横向延伸，无法触发自动换行；同时外层的Container没有宽度限制，无法给文本提供换行的边界。

解决方案 #

需要同时做两个调整：

• 给承载长文本的Text包裹Flexible，让文本能在可用空间内自动换行；
• 给外层的Container添加宽度约束，确保文本区域不会无限延伸。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.white
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: TestWidget()
        )
      )
    );
  }
}

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

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Test')
            ),
            body: ListView.builder(
                itemCount: 3,
                itemBuilder: (context, index) {
                    return Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          // 添加ConstrainedBox限制最大宽度
                          ConstrainedBox(
                            constraints: BoxConstraints(
                              maxWidth: MediaQuery.of(context).size.width * 0.75,
                            ),
                            child: Container(
                                decoration: const BoxDecoration(
                                    color: Colors.grey
                                ),
                                padding: const EdgeInsets.all(8), // 优化UI内边距
                                child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: [
                                      // 用Flexible包裹长文本Text
                                      Flexible(
                                        child: Text(longText),
                                      ),
                                      const SizedBox(width: 8), // 两个文本间添加间距
                                      const Text('shortText')
                                    ]
                                )
                            ),
                          )
                        ]
                    );
                } 
            )
        );
    }

    static const longText = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, '
      'sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, '
      'sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.';
}

关键调整说明 #

1. ConstrainedBox：通过maxWidth限制容器的最大宽度（这里设为屏幕宽度的75%，可根据需求调整），给文本提供明确的换行边界。
2. Flexible：包裹长文本的Text组件，让文本在容器的宽度范围内自动换行，同时不会挤压旁边的短文本。
3. 额外添加的padding和SizedBox是为了优化UI美观度，属于可选调整。

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