flutter 约束盒子组件ConstrainedBox、透明度组件Opacity(可以设置幕布效果)

秒速五厘米 2021-07-24 18:40 591阅读 0赞

约束盒子组件
        ConstrainedBox( 约束盒子,添加额外的约束条件到子组件上
          constraints: BoxConstraints.expand(),   随着子元素扩展
          child:xx
       )
       
    透明度组件
    	设置子组件的背景色为灰色，同时设置透明度，可以达到幕布效果
    	Opacity(
          opacity: 透明度,
          child: 组件
        ),

约束盒子详解:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
代码示例:

ConstrainedBox(
            constraints: const BoxConstraints.expand(),
            // constraints: BoxConstraints(minHeight: 100),
            // constraints: BoxConstraints(minWidth: 100),
            // constraints: BoxConstraints.lerp(BoxConstraints(minHeight: 0), BoxConstraints(minHeight: 150), 0.5),
            // constraints: BoxConstraints.loose(Size(30,120)),
            // constraints: BoxConstraints.tight(Size(30,120)),
            // constraints: BoxConstraints.lerp(a, b, t),
            // constraints: BoxConstraints.expand(width: 150,height: 150),
            // constraints: BoxConstraints.tightForFinite(),
            child: Container(
              color: Colors.green,
              child: Text('Hello World!')
              ),
          
          ),

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/c257d90230d54f489f8a5d28ad925d1e.png