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

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

Flutter父宽度自适应子控件的宽度_第1张图片

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

你可能感兴趣的:(flutter,javascript,开发语言)