Flutter--Stack、Align、Positioned组件学习

一、介绍

stack 层叠组件
一般Stack和Align组件或者Stack和Positioned组件结合使用，实现页面的定位布局

二、Stack源码

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,//子组件的对齐方式
    this.textDirection,//排序方式
    this.fit = StackFit.loose,//如何确定没有使用 Position 包裹的子组件的大小
    this.overflow = Overflow.clip,//超出部分的处理方式
    this.clipBehavior = Clip.hardEdge,
    List children = const [],//子组件
  }) : assert(clipBehavior != null),
       super(key: key, children: children);

三、Stack的属性

属性	说明
alignment	子组件的对齐方式 AlignmentDirectional.topCenter垂直靠顶部水平居中对齐 AlignmentDirectional.topRight垂直靠顶部水平靠右对齐 AlignmentDirectional.centerLeft垂直居中水平靠左对齐 AlignmentDirectional.center垂直和水平居中都对齐 AlignmentDirectional.centerRight垂直居中水平靠右对齐 AlignmentDirectional.bottomLeft垂直靠底部水平靠左对齐 AlignmentDirectional.bottomCenter垂直靠底部水平居中对齐 AlignmentDirectional.bottomRight垂直靠底部水平靠右对齐 AlignmentDirectional(double,double)组件的中心为原点，取值范围[-1,1],根据取值进行偏移
textDirection	子组件排序方向 TextDirection.ltr从左往右排列 TextDirection.rtl从右往左排列
fit	如何确定没有使用 Position 包裹的子组件的大小 StackFit.loose子组件宽松取值，可以从 min 到 max StackFit.expand子组件取最大值 StackFit.passthrough不改变子组件约束条件
overflow	超出部分的处理方式 Overflow.clip超出部分剪切 Overflow.visible超出部分可见
children	子组件数组

四、Stack的demo

Stack(
      alignment: AlignmentDirectional(-0.5,0.5),
        fit: StackFit.loose,
        textDirection: TextDirection.rtl,
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
          Text(
            "我是文本"
          ),
          Text(
              "222222222"
          ),
        ],
    );

企业微信截图_16069263638073.png

五、Align源码

const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child,
  }) : assert(alignment != null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);

六、Align属性

属性	说明
alignment	子组件的对齐方式 Alignment.topCenter垂直靠顶部水平居中对齐 Alignment.topRight垂直靠顶部水平靠右对齐 Alignment.centerLeft垂直居中水平靠左对齐 Alignment.center垂直和水平居中都对齐 Alignment.centerRight垂直居中水平靠右对齐 Alignment.bottomLeft垂直靠底部水平靠左对齐 Alignment.bottomCenter垂直靠底部水平居中对齐 Alignment.bottomRight垂直靠底部水平靠右对齐 Alignment(double,double)组件的中心为原点，取值范围[-1,1],根据取值进行偏移
widthFactor	宽度系数，double
heightFactor	高度系数，double
child	子组件

七、Stack Align结合的demo

return Container(
      height: 400,
      width: 400,
      color: Colors.red,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Icon(Icons.account_circle,size: 40,color: Colors.white,)
          ),
          Align(
              alignment: Alignment.topLeft,
            child: Icon(Icons.cached_outlined,size: 40,color: Colors.white,)
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Icon(Icons.baby_changing_station,size: 40,color: Colors.white,)
          )
        ],
      ),
    );

企业微信截图_16069291654716.png

八、Positioned的源码

const Positioned({
    Key key,
    this.left,//
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  }) : assert(left == null || right == null || width == null),
       assert(top == null || bottom == null || height == null),
       super(key: key, child: child);

九、Positioned的属性

属性	说明
left	左间距
top	上间距
right	右间距
bottom	下间距
width	子组件的宽度
height	子组件的高度

十、Stack Positioned结合使用demo

return Container(
      height: 400,
      width: 400,
      color: Colors.red,
      child: Stack(
        children: [
          Positioned(
            left: 10,
            top: 10,
            width: 60,
            height: 60,
            child: Container(
              color: Colors.black,
            ),
          ),

          Positioned(
            right: 10,
            top: 10,
            width: 60,
            height: 60,
            child: Container(
              color: Colors.blue,
            ),
          ),
          Positioned(
            left: 10,
            bottom: 10,
            width: 40,
            height: 40,
            child: Container(
              color: Colors.yellow,
            ),
          ),
          Positioned(
            bottom: 10,
            right: 10,
            width: 40,
            height: 40,
            child: Container(
              color: Colors.deepPurple,
            ),
          )
        ],
      ),
    );

企业微信截图_16069298614958.png