flutter 基本组件之Stack叠加

Stack 这个是Flutter中布局用到的组件，跟Android中FrameLayout很像，都是可以叠加的现实View

常用属性

属性名	功能
alignment	配置所有子元素的显示位置
textDirection	子组件排列方向 TextDirection.ltr：从左往右排列。TextDirection.rtl：从右往左排列
fit	如何确定没有使用 Position 包裹的子组件的大小，可选值有StackFit.loose：子组件宽松取值，可以从 min 到 max。 StackFit.expand：子组件取最大值.StackFit.passthrough：不改变子组件约束条件。

/*
 *Stack 组件基本属性
 */

class StackView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment:
          AlignmentDirectional.bottomStart, //指的是子Widget的对其方式，默认情况是以左上角为开始点
      fit: StackFit
          .loose, // expand使子Widget的大小和父组件一样大,StackFit.loose 指的是子Widget 多大就多大
      children: <Widget>[
        Container(
          width: 120.0,
          height: 120.0,
          color: Colors.blue,
        ),
        Container(
          width: 100.0,
          height: 100.0,
          color: Colors.red,
        ),
        Container(
          width: 80.0,
          height: 80.0,
          color: Colors.grey,
        )
      ],
    );
  }
}

image.png

STack Positioned 的基本属性

/*
 * STack  Positioned  的基本属性  
 */
class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        Positioned(
          top: 0,
          left: 0,
          child: Container(
            width: 60,
            height: 60,
            color: Colors.red,
          ),
        ),
        Positioned(
          top: 0,
          right: 0,
          child: Container(
            width: 60,
            height: 60,
            color: Colors.green,
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          child: Container(
            width: 60,
            height: 60,
            color: Colors.blue,
          ),
        ),
        Positioned(
          bottom: 0,
          right: 0,
          child: Container(
            width: 60,
            height: 60,
            color: Colors.yellow,
          ),
        ),
      ],
    );
  }
}

image.png

STack Align 的基本属性

/*
 * STack  Align  的基本属性  
 */
class StackAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Align(
            alignment: Alignment(-1, -1),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.yellow,
            )),
        Align(
            alignment: Alignment(1, 1),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.red,
            )),
        Align(
            alignment: Alignment(0, 0),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.green,
            )),
        Align(
            alignment: Alignment(0, 1),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.blue,
            )),
        Align(
            alignment: Alignment(1, 0),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            )),
        Align(
            alignment: Alignment(-1, 0),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.grey,
            )),
        Align(
            alignment: Alignment(0, -1),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.pink,
            )),
              Align(
            alignment: Alignment(1, -1),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.amberAccent,
            )),

               Align(
            alignment: Alignment(-1, 1),
            child: Container(
              width: 60,
              height: 60,
              color: Colors.purple,
            )),
      ],
    );
  }
}

image.png