Flutter布局基础-单子项部件（二）

目录

 

1.LimitedBox

2.Offstage 

3.OverflowBox 

4.SizedBox 

5.SizedOverflowBox 

6.Transform 

7.CustomSingleChildLayout 

---

1.LimitedBox

一个当自身不受约束时才会限制子部件大小的部件

文档

属性

maxHeight → double:当自身高度不受限制时 子部件的最大高度

maxWidth → double:当自身宽度不受限制时 子部件的最大宽度

child → Widget：子部件

示例

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children:<Widget>[LimitedBox(
        maxWidth: 100,
        maxHeight: 100,
        child: Container(
          color: Colors.red,
        ),
      ),]
    ),

示例中Column高度不受限制宽度受限制所以对于子部件“Container”  maxWidth是不起作用的而maxHeight是起作用的

运行结果

                                                                       

 

2.Offstage 

一个完全隐藏子部件的部件  不会绘制

文档

属性

offstage → bool：子部件是否隐藏

child → Widget：子部件

示例

Offstage(
         offstage: false,
           child: Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
        )

示例中offstage 属性为false 子部件可见且可选中

offstage改为true Container部件变为不可见  不可选中

                                         

 

注：当子部件Animations在运行时无论offstage true或false 都会继续消耗CPU和电量

 

3.OverflowBox 

一个对子部件添加不同于从父级获得的约束的部件，允许子部件不再父级范围内

文档

属性

alignment → AlignmentGeometry：子部件对齐方式

maxHeight → double：子部件最大高度

maxWidth → double：子部件最大宽度

minHeight → double：子部件最小高度

minWidth → double：子部件最小宽度

child → Widget：子部件

示例

Container(
             width: 50,
             height: 50,
             alignment: Alignment.center,
             child:OverflowBox(
               maxWidth: 300,
               maxHeight: 300,
               minHeight: 100,
               minWidth: 100,
               child: Container(
                 width: 200,
                 height: 200,
                 color: Colors.red,
               ),
             ),
       ),

                                                                                       

 

4.SizedBox 

一个可以固定子部件大小的部件

文档

属性

height → double：子部件高度

width → double：子部件宽度

child → Widget：子部件

示例

SizedBox(
         width: 200,
         height: 200,
         child: Container(color: Colors.red),
       ),

                                                                    

 

 

5.SizedOverflowBox 

一个指定子部件大小但是将父部件约束传递给子部件的部件，允许溢出父部件

文档

属性

alignment → AlignmentGeometry：子部件对齐方式

size → Size：此部件优先选择的大小

示例

Container(
         alignment: Alignment.bottomLeft,
         color: Colors.white,
         width: 200,
         height: 200,
         child:SizedOverflowBox(
           alignment: Alignment(0, 0),
           size: Size(50,50),
           child: Container(width:200,height: 200,color: Colors.red),
         ),
       )

这里的size类似坐标的概念通过下图运行结果帮助我们理解该组件用法                 

                                   

SizedOverflowBox 在父部件左下角

SizedOverflowBox 子部件以aligment规则（居中）绘制

SizedOverflowBox 子部件按宽高绘制后溢出父部件

至此可以了解SizedOverflowBox的基本用法

 

 

6.Transform 

一个在绘制其子项之前应用转换的部件

文档

属性

alignment → AlignmentGeometry：子部件对齐方式

origin → Offset：变换原点

transform → Matrix4：绘制过程中转换子部件

transformHitTests → bool：点击事件是否应用在转换之后的部件上

示例

Container(
         alignment: Alignment.bottomLeft,
         color: Colors.white,
         width: 200,
         height: 200,
         child:Transform(
           alignment: Alignment.center,
           transformHitTests: true,
           transform: Matrix4.rotationZ(20),
           child: Container(width:200,height: 200,color: Colors.red),
         ),
       )

                                                           

 

7.CustomSingleChildLayout 

一个可以自定义子级部件大小和位置的部件

文档

属性

delegate → SingleChildLayoutDelegate：控制子项大小和位置

child → Widget:子部件

示例

Container(
         alignment: Alignment.center,
         color: Colors.white,
         width: 200,
         height: 200,
         child:CustomSingleChildLayout(
           delegate: MyDelegate(),
           child: Container(width:100,height: 100,color: Colors.red),
         ),
       )



class MyDelegate extends SingleChildLayoutDelegate{

  @override
  Size getSize(BoxConstraints constraints) {
    return constraints.constrain(Size(0,0));
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    // TODO: implement getPositionForChild
    return Offset.lerp(Offset(0, 0),Offset(0, 0),0);
  }

  @override
  bool shouldRelayout(SingleChildLayoutDelegate oldDelegate) {
    // TODO: implement shouldRelayout
    return true;
  }

}