You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中SliverList内Text组件溢出文本显示省略号问题求助

解决SliverList中Text组件溢出截断不生效的问题

问题核心是Row布局里的Column没有宽度约束——Row会默认给子元素分配足够的空间,导致你的Text组件可以无限延伸,根本触发不了maxLines和overflow的规则。

直接改两处就能解决:

  • 把包含姓名和文本的Column用Expanded包裹,让它占据Row里除了头像和右侧时间之外的所有剩余空间
  • 如果要显示省略号,把Text的overflow改成TextOverflow.ellipsis(你当前用的fade只会淡出不会显示省略号)

修改后的完整代码:

SliverList(
  delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: screenWidth*0.05, vertical: screenHeight*0.01),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            CircleAvatar(
              backgroundImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScuQGyYbgV9HFyiunO9mF6_lnB6MYwcx6t3w&usqp=CAU"),
              radius: screenWidth*0.08,
            ),
            SizedBox(width: screenWidth*0.05,),
            // 添加Expanded包裹Column,限制宽度
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Adam John",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(height: 5.0),
                  Container(
                    padding: const EdgeInsets.all(1),
                    child: Text(
                      "hello! my name is adam john and i'm your new tariner",
                      maxLines: 1,
                      // 修改为ellipsis显示省略号
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: AppColors().darKShadowColor,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Text(
              "10:30pm",
              style: TextStyle(
                color:  AppColors().darKShadowColor,
                fontSize: 16.0,
              ),
            ),
          ],
        ),
      );
    },
    childCount: 3,
  ),
),

内容的提问来源于stack exchange,提问作者Zubair Naeem

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 13:04:57