Flutter Stack

Flutter Stack

主要概念

• 定位概念

  • 有位置组件
    widget 用 Positioned 包裹, 并且 横轴(left,right) 和 纵轴(top,bottom) 有填写

    1. 横轴/纵轴 必填之一 理解为部分定位
    2. 横轴/纵轴 全部填写 理解为完全定位

  • 没有位置组件

    1. widget 没用 Positioned 包裹,
    2. widget 用 Positioned 包裹, 但是 横轴(left,right) 和 纵轴(top,bottom) 都没有配置
• 讲解demo

Container(
  constraints: BoxConstraints(minWidth: 100, 
                              minHeight: 100, 
                              maxWidth: 200, 
                              maxHeight: 200), // 父控件的约束
  child: LayoutBuilder(
    builder: (_, one) {
      print(one); // BoxConstraints(100.0<=w<=200.0, 100.0<=h<=200.0)
      return Stack(
        fit: StackFit.passthrough, //父控件传递给没有位置的子组件的约束情况
        children: [
          Container(width: 50, height: 50, color: Colors.cyan), // 没有位置组件
          Positioned( 
                top: 10,// 有位置组件
                width: 30, //这个约束向下传递
                child: LayoutBuilder(
                  builder: (_, two) {
                    print(two); //BoxConstraints(w=30.0, 0.0<=h<=Infinity)
                    return Container(width: 30, height: 30, color: Colors.red);
              },
            ),
          ),
        ],
      );

主要参数

• alignment

  • 此属性决定如何去对齐没有定位（没有使用Positioned包裹）的位置
  • 或部分定位的子组件(使用了Positioned包裹, 但是只确定了left,right = 横轴或者 top,bottom = 纵轴 之一 ) 的位置

• fit
  看 demo 父控件的约束参数 传递给 没有位置组件的约束

  • StackFit.loose (传递宽约束 0 <= <= 200) 默认参数
  • StackFit.expand (传递紧约束 == 200)
  • StackFit.passthrough (约束原样传递 )100.0<=w<=200.0, 100.0<=h<=200.0

• Stack 占据的空间大小

  • 有位置的组件 Stack 大小等于 所有有位置组件中的最大宽和最大高
  • 没有任何 有位置的组件 Stack 大小等于 尽量大的占用父组件的空间

参考

1. Flutter 布局控件篇-->Stack、Positioned