Flutter Stack


简介

用于将多个childs相对于其框的边缘定位，多用于以简单方式重叠children

  • 当第一个child置于底部时，堆栈按顺序绘制其子项。如果更改子项绘制顺序，可以使用新顺序重新建立堆栈
  • 注意：stack的每一个子节点都已定位或未定位，定位子项必须至少一个非null属性的定位。

基本用法

1.alignment → AlignmentGeometry

  • 对齐方式，默认是右上角,详情请点击Layout-row页面，类似
  • 多个positioned叠加图层，Alignment.center事例

fit → StackFit

  • loose:放开了子节点宽高的约束，可以让子节点从0到最大尺寸
  • expand: 子节点最大可能的占用空间，允许最大大小
  • passthrough：不改变子节点约束

textDirection → TextDirection

  • 文本方向

overflow → Overflow

  • 超过的部分是否裁剪掉
  • overflow: Overflow.clip/visible

实例演示

class StackDefault extends StatelessWidget {
  const StackDefault() : super();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
         Stack(
          //fit :定义如何设置non-positioned节点尺寸
          fit: StackFit.loose,
          overflow: Overflow.clip,
          textDirection: TextDirection.ltr,
          alignment: Alignment.center,
          children: [
             Container(
              color:  Color(0xfff48fb1),
              width: 100.0,
              height: 50.0,
            ),
             Text("stack demo",
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 5.0,
                    color: Colors.white)),
          ],
        ),
      ],
    );
  }
}

class StackDefault2 extends StatelessWidget {
  const StackDefault2() : super();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
         Stack(
          //fit :定义如何设置non-positioned节点尺寸
          fit: StackFit.loose,
          overflow: Overflow.clip,
          textDirection: TextDirection.ltr,
          alignment: Alignment.center,
          children: [
             Text("stack demo",
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 5.0,
                    color: Colors.white)),
             Container(
              color:  Color(0xfff48fb1),
              width: 100.0,
              height: 50.0,
            ),
          ],
        ),
      ],
    );
  }
}

class StackPositioned extends StatelessWidget {
  const StackPositioned() : super();

  @override
  Widget build(BuildContext context) {
    return  Stack(
      alignment: Alignment.center,
      children: <Widget>[
         Positioned(
            child:  Icon(
          Icons.monetization_on,
          size: 40.0,
          color: Colors.yellow[300],
        )),
         Positioned(
            left: 40.0,
            child:  Icon(
              Icons.monetization_on,
              size: 40.0,
              color: Colors.yellow[600],
            )),
         Positioned(
            left: 60.0,
            child:  Icon(
              Icons.monetization_on,
              size: 40.0,
              color: Colors.yellow[600],
            )),
         Positioned(
            left: 80.0,
            child:  Icon(
              Icons.monetization_on,
              size: 40.0,
              color: Colors.yellow[600],
            )),
      ],
    );
  }
}

class StackLayout extends StatelessWidget {
  const StackLayout() : super();

  @override
  Widget build(BuildContext context) {
    return  Stack(
      overflow: Overflow.visible,
      alignment: const Alignment(0.2, 0.6),
      children: <Widget>[
        CircleAvatar(
          backgroundColor:  Color(0xfff48fb1),
          radius: 140.0,
        ),
        Container(
          decoration: BoxDecoration(color: Colors.black45),
          child: Text(
            'Min',
            style: TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.bold,
                color: Colors.white),
          ),
        )
      ],
    );
  }
}