需求: 控件随着金币进行自适应宽度
image.png文章来源:https://www.toymoban.com/news/detail-633430.html
步骤:
1、Container不设置宽度,需要设置约束padding;
2、文本使用Flexible形式;文章来源地址https://www.toymoban.com/news/detail-633430.html
Container(
height: 24.dp,
padding: EdgeInsetsDirectional.only(start: 8.dp, end: 5.dp),
decoration: BoxDecoration(
color: Color(0XFFFFFFFF).withOpacity(0.1),
borderRadius: BorderRadius.circular(12.dp),
),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsetsDirectional.only(end: 3.dp),
child: R.img(
'gift_star_coin.png',
width: 16.dp,
height: 16.dp,
package: ComponentManager.MANAGER_GIFT,
),
),
Flexible(
child: Text(
_data.totalMoney.toString(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12.0,
color: Color(0XFF858585),
),
),
),
Container(
child: R.img(
'gift_in_price.png',
width: 13.dp,
height: 13.dp,
package: ComponentManager.MANAGER_GIFT,
),
),
],
),
),
到了这里,关于Flutter父宽度自适应子控件的宽度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!