美文网首页
Flutter父宽度自适应子控件的宽度

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

作者: 三千烦恼风_eefa | 来源:发表于2022-09-08 17:12 被阅读0次

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


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父宽度自适应子控件的宽度

    需求: 控件随着金币进行自适应宽度 步骤:1、Container不设置宽度,需要设置约束padding;2、文本使...

  • Flutter 控件学习记笔记

    Flutter 控件学习记笔记 1 自适应宽度流式布局 也就是使用Wrap包裹的列表; 2 水波纹点击控件 使用I...

  • 宽高自适应及居中

    一、宽高自适应 1.宽度自适应 语法:width:100%; 注:1.块元素默认宽度为100%,继承父元素的宽度2...

  • 深入LinearLayout

    如果将weight设置为1 ,则子控件会平分父控件的剩余空间。 如果子控件想平分父控件的话。只要把宽度width设...

  • css圆角框学习

    宽度固定高度自适应 高度宽度自适应

  • css 居中总结

    水平居中 1、宽度固定: 子: margin:0 auto; 子: transform 2、父、子宽度都不固定 父...

  • 父子元素高度问题 踩坑

    1、父子元素高宽问题 未指定父元素宽度,指定子元素宽度后,chrome下父元素div的宽度等于子元素宽度撑起的宽度...

  • 元素自适应内容宽度

    需求: 要求元素的宽度能够自适应内容的宽度针对的是非内联元素,内联元素会自动的实现对内容宽度的自适应 这里是子元...

  • 子元素内容超出父元素时,padding-right失效,没有留白

    场景介绍 父元素内有数量不固定的子元素,当子元素宽度之和小于父元素时,子元素平均分配父元素宽度;当子元素宽度之和大...

  • iOS 父view宽度自适应子view宽度(masonry)

    1. 问题描述 子view有多个,宽度不一致;父view宽度需要取其最大宽度 2.代码 2.2 WPNewView...

网友评论

      本文标题:Flutter父宽度自适应子控件的宽度

      本文链接:https://www.haomeiwen.com/subject/oxuonrtx.html