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

Flutter实现Row行末位置图标文本适配:短文本居右、长文本省略

解决方案

核心是通过Expanded+Flexible组合分配Row的布局空间,同时控制文本溢出逻辑,调整后代码如下:

locationView() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 20, 16, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 左侧标题区域保持不变
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  bellazTitle("Hey, Emily", 22),
                ],
              ),
              const SizedBox(width: 10,),
              // 改动1:用Expanded包裹右侧整个位置区域,仅占用左侧标题剩下的可用宽度
              Expanded(
                child: Row(
                  // 改动2:右侧区域内容右对齐,短文本时图标+文本整体靠最右展示
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image.asset(
                      "lib/Assets/location.png",
                      height: 22,
                      width: 16,
                    ),
                    if (featureName != null)
                      Padding(
                        padding: const EdgeInsets.only(left: 8.0),
                        // 改动3:用Flexible包裹文本,限制文本最大宽度不超出父容器剩余空间
                        child: Flexible(
                          child: Text(
                            "${featureName}, ${locality}",
                            style: TextStyle(
                              color: apptitleColor,
                              fontSize: t4Size,
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      )
                  ],
                ),
              )
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 2.0),
            child: Text(
              "Welcome to Bellaz!",
              style: TextStyle(
                color: extraLightColor,
                fontSize: t5Size,
              ),
            ),
          )
        ],
      ),
    );
  }
适配逻辑说明
  • 地址较短时:Expanded分配的剩余宽度足够完整展示图标+文本,MainAxisAlignment.end让整体内容靠右侧展示
  • 地址较长时:Flexible限制文本最大宽度为Expanded分配宽度减去图标宽度,超出部分自动触发省略号,不会挤压左侧标题区域,也不会出现布局溢出

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.09.27 10:45:02