修复小部件在行中的位置
修复小部件在行中的位置
提问于 2021-11-03 08:26:32
我的行中有两个小部件，一个文本小部件和一个计数器小部件。文本小部件包含的值随着计数器的增加/减少而增加和减少。现在，当这个值增加的时候，它把计数器推到右边。我怎样才能防止这种情况发生？我想让柜台呆在固定位置。
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: [
Text('- \Tsh. $loyaltyPrice ',style:TextStyle(color:Colors.red)),
SizedBox(width:120),
LoyaltyCounterView(),
]),
],
)
),
);
}
}
回答 6
Stack Overflow用户
回答已采纳
发布于 2021-11-08 04:55:16
不要在小部件之间使用大小大小的框，而是用容器包装文本小部件，并为此设置宽度。
Row(
children: [
Container(width:your width,child: Text('- \Tsh. $loyaltyPrice ',style:TextStyle(color:Colors.red)),)
LoyaltyCounterView(),
]), 另外一种方法是为行小部件使用MainAxisAlignment.spaceBetween。我建议用第二种方法来解决你的问题。
Stack Overflow用户
发布于 2021-11-03 08:36:58
对于您的Row，添加参数mainAxisAlignment
mainAxisAlignment: MainAxisAlignment.spaceBetween,并移除线：
SizedBox(width:120),这将使文本向左刷新，计数器小部件向右刷新。其他要使用的值是MainAxisAlignment.spaceEvenly和MainAxisAlignment.spaceAround。
Stack Overflow用户
发布于 2021-11-06 18:23:24
按照以下步骤行事：
- 删除SizedBox(宽度:120)
- 将文本Widget放在'- \Tsh。$loyaltyPrice‘inside a SizedBox
- 确保SizedBox的宽度大于120，因为您希望按钮和文本之间的空空间是120，而现在SizedBox=的宽度是文本+ 120的大小。
SizedBox(子)：文本( '- \Tsh.$_counter '，样式: const TextStyle(颜色: Colors.red)，宽度: 150，
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69821672
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号