AutosizeText无法调整文本大小，自定义ListTile布局求助

一、修复AutosizeText失效问题 #

你的代码里中间的Column未用Expanded包裹，导致它在父Row中仅占内容宽度，AutosizeText没有足够的宽度约束来调整字体大小。同时嵌套Row的空间分配也不合理，容易引发溢出。

修改核心点：

• 给中间的Column添加Expanded，让它占据Row的剩余空间
• 给需要自动调整的AutosizeText外层套Expanded（确保父组件提供宽度约束）
• 给Column设置crossAxisAlignment: CrossAxisAlignment.start，保证文本左对齐（可根据需求调整）

二、实现多行内容展开/收起功能 #

通过StatefulWidget维护展开状态，控制AutosizeText的maxLines参数：

• 声明bool isExpanded状态变量，默认值为false
• 点击文本区域切换状态，展开时maxLines设为null，收起时设为2或3（按需调整）
• 在文本末尾添加展开/收起图标，提示用户可交互

三、判断文本是否超过指定行数 #

用TextPainter预计算文本行数，示例方法：

Future<bool> isTextOverflows(String text, TextStyle style, double maxWidth, int maxLines) async {
  final textPainter = TextPainter(
    text: TextSpan(text: text, style: style),
    maxLines: maxLines,
    textDirection: TextDirection.ltr,
  )..layout(maxWidth: maxWidth);
  
  return textPainter.didExceedMaxLines;
}

可在initState或didUpdateWidget中调用该方法，判断是否需要显示展开按钮。

修改后的完整代码示例 #

class ExpandableListTile extends StatefulWidget {
  final User otherUser; // 假设你的用户模型为User

  const ExpandableListTile({super.key, required this.otherUser});

  @override
  State<ExpandableListTile> createState() => _ExpandableListTileState();
}

class _ExpandableListTileState extends State<ExpandableListTile> {
  bool isExpanded = false;
  bool _showExpandButton = false;
  final double _maxTextWidth = 250; // 根据布局调整宽度

  @override
  void initState() {
    super.initState();
    _checkTextOverflow();
  }

  Future<void> _checkTextOverflow() async {
    final style = Theme.of(context).textTheme.subtitle2!;
    final locationText = widget.otherUser.location!;
    final textPainter = TextPainter(
      text: TextSpan(text: locationText, style: style),
      maxLines: 2,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: _maxTextWidth);
    
    setState(() {
      _showExpandButton = textPainter.didExceedMaxLines;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center, // 保持图片垂直居中
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  width: 70.0,
                  height: 70.0,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: Image.asset(
                      'assets/images/photo.jpg',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                const SizedBox(width: 24),
                Expanded( // 关键：让Column占满剩余宽度
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      AutoSizeText(
                        '${widget.otherUser.name} ${widget.otherUser.lastName}',
                        maxLines: 1,
                        style: Theme.of(context).textTheme.bodyText1!,
                      ),
                      const SizedBox(height: 8),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Container(
                                  margin: const EdgeInsets.symmetric(horizontal: 2),
                                  child: Image.asset(
                                    'assets/icons/icon2.png',
                                    height: 20,
                                  ),
                                ),
                                const SizedBox(width: 4),
                                Expanded(
                                  child: AutoSizeText(
                                    widget.otherUser.country![0],
                                    maxLines: 2,
                                    style: Theme.of(context).textTheme.subtitle2!,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(width: 16),
                          Expanded(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                const FaIcon(
                                  FontAwesomeIcons.locationDot,
                                  size: 20,
                                  color: Colors.black45,
                                ),
                                const SizedBox(width: 4),
                                Expanded(
                                  child: GestureDetector(
                                    onTap: _showExpandButton ? () {
                                      setState(() {
                                        isExpanded = !isExpanded;
                                      });
                                    } : null,
                                    child: AutoSizeText(
                                      widget.otherUser.location!,
                                      maxLines: isExpanded ? null : 2,
                                      overflow: TextOverflow.ellipsis,
                                      style: Theme.of(context).textTheme.subtitle2!,
                                    ),
                                  ),
                                ),
                                if (_showExpandButton)
                                  Icon(
                                    isExpanded ? Icons.expand_less : Icons.expand_more,
                                    size: 18,
                                  ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const Row(
              children: [Icon(Icons.star_half_outlined), Text("4.5")],
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

1. Expanded的作用：给中间Column和AutosizeText外层加Expanded，确保它们获得足够宽度约束，AutosizeText才能正常计算字体大小
2. 展开状态控制：通过isExpanded变量切换maxLines值，点击文本或图标触发状态变更
3. 文本行数判断：用TextPainter预计算文本是否超出指定行数，决定是否显示展开按钮
4. 图片居中：外层Row设置crossAxisAlignment: CrossAxisAlignment.center，保证图片在垂直方向居中

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