Flutter如何固定Row内Counter widget的位置不随左侧文本长度偏移

实现方案 #

偏移问题是因为固定宽度的SizedBox间隔会被长度增加的Text组件挤压，导致后续Counter组件位置右移，你可以通过Expanded组件限制Text的最大可用宽度解决这个问题。

修改后的核心代码 #

Widget build(BuildContext context) {
  var loyaltyPrice =  Provider.of<Cart>(context, listen: false).loyaltyPrice;
  return Card(
    color:Colors.red[100],
    margin: EdgeInsets.symmetric(
      horizontal: 15,
      vertical: 4,
    ),
    child: Padding(
      padding: const EdgeInsets.all(5),
      child:Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Row(
            children: [
              // 用Expanded包裹Text，限制其最大宽度为Row剩余可用空间
              Expanded(
                child: Text(
                  '- Tsh. $loyaltyPrice ',
                  style:TextStyle(color:Colors.red),
                  // 可选配置：文字超出宽度时显示省略号，也可删除该行让文字自动换行
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                ),
              ),
              // 原有的固定间隔保留，不会被Text挤压
              SizedBox(width:120),
              LoyaltyCounterView(),
            ]
          ),                 
        ],
      )
    ),         
  );
}

原理解释 #

• Expanded会自动计算Row内除固定宽组件外的剩余可用空间，并强制其子组件（这里是Text）只能在这个空间内渲染
• 当Text数值长度增加时，只会在Expanded分配的区域内展示，不会挤占后面SizedBox和LoyaltyCounterView的固定宽度区域，自然不会出现Counter被推走的情况

可选拓展方案 #

如果你需要让Counter固定在Row的最右侧，不需要固定120的间隔，可以把SizedBox(width:120)替换为Spacer()组件，适配不同宽度的屏幕。

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