Flutter父宽度自适应子控件的宽度

最新推荐文章于 2024-05-30 16:40:06 发布

油焖茄子

最新推荐文章于 2024-05-30 16:40:06 发布

阅读量1.2k

点赞数 1

文章标签： flutter javascript 开发语言

本文链接：https://blog.csdn.net/qq_27981847/article/details/132151721

版权

需求：控件随着金币进行自适应宽度

image.png

步骤：
1、Container不设置宽度，需要设置约束padding；
2、文本使用Flexible形式；

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,
               ),
             ),
           ],
         ),
       ),