Flutter自定义LineItem组件Text右侧溢出，使用Expanded报错如何解决？

问题根因 #

溢出和Expanded报错的核心是宽度约束缺失：

1. 最外层Row的右侧内容区域没有宽度限制，文本过长时会撑开Row超出父容器边界，触发溢出提示
2. 你之前直接给内层Text套Expanded时，Expanded要求父级必须是Row/Column/Flex类组件且父级本身有明确的宽度约束，嵌套在无约束内层Row里的Expanded找不到合法约束就会报错。

修复步骤 #

• 给最外层Row内的Padding组件套上Expanded，让右侧内容区域仅占用最外层Row的剩余可用宽度，不会超出边界
• 给长文本Text组件添加溢出控制属性，按需配置换行/省略规则

修复后完整代码 #

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:wound/Themes/Themes.dart';

class LineItem extends StatelessWidget {
  const LineItem({
    Key? key,
    @required this.title,
    @required this.icon,
    @required this.name,
    @required this.iconColor,
  }) : super(key: key);

  final String? title;
  final IconData? icon;
  final String? name;
  final Color? iconColor;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          height: 48,
          width: 2,
          decoration: BoxDecoration(
            color: Themes.darkGreen.withOpacity(0.5),
            borderRadius: const BorderRadius.all(Radius.circular(4.0)),
          ),
        ),
        // 改动1：给右侧Padding套Expanded，限制内容最大宽度
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    FaIcon(
                      icon,
                      size: 21,
                      color: iconColor,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 4, bottom: 2),
                      child: Text(
                        title ?? "",
                        textAlign: TextAlign.left,
                        softWrap: true,
                        // title如果也可能过长也可以加下方的溢出配置
                        style: TextStyle(
                          fontFamily: Themes.fontName,
                          fontWeight: FontWeight.w500,
                          fontSize: 14,
                          letterSpacing: -0.1,
                          color: Themes.grey.withOpacity(0.5),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 2,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 4, bottom: 3),
                  // 改动2：name文本加溢出控制
                  child: Text(
                    name ?? "",
                    textAlign: TextAlign.left,
                    softWrap: true,
                    // 配置1：超出1行显示省略号
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    // 配置2：如果需要自动换行，去掉overflow和maxLines设为你需要的最大行数即可
                    style: TextStyle(
                      fontFamily: Themes.fontName,
                      fontWeight: FontWeight.w400,
                      fontSize: 16,
                      color: Themes.darkerText,
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }
}

可选配置说明 #

• 单行省略：设置maxLines: 1 + overflow: TextOverflow.ellipsis
• 多行换行：设置maxLines: 你需要的最大行数 + softWrap: true，不设maxLines默认无限换行
• 针对title也可能过长的场景，同样给title对应的Text组件加上上述配置即可。

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