Flutter 学习：层叠组件 Stack、Stack与Alig

一.复习上一节

1.Padding组件
Padding( padding: xx child :xx )

2.Row组件横向排列
Row( child : child[xx,xx ] )

3.Column组件竖向排列
Column( child : child[xx,xx ] )

4.Expanded组件可设置权重
Expaned( flex:xx, child :xx )

二.Flutter Stack组件

• Stack

Stack 表示堆得意思，我们可以用Stack或Stack结合Align或者Stack结合Positioned来实现页面的定位布局

• 常用属性

alignment :配置所有子元素的显示位置
children :子组件

• Stack类似于Android中的相对布局

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: Stack(
        alignment: Alignment(1,-1),
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: Colors.pink,
          ),
          Text("我")
        ],
      ),
    );
  }
}

• 注意

• 代码中Text组件是叠在Container组件上的
• alignment:是对Stack组件内所有组件位置调整
• alignment:可以Alignment.center 也可以写坐标Alignment(1,-1) 。(-1,-1)右上角 ，(1,1)右下角 纵坐标是反过来的
• Stack组件中的alignment属性是不能对单独子view做调整的

三.Flutter Stack +Allign 控制子元素

• Stack组件中结合Align组件可以控制每个子元素的显示位置

• 常用属性

alignment :配置所有子元素的显示位置
children :子组件

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      width: 100,
      height: 100,
      color: Colors.pink,
      alignment: Alignment.center,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Align(
            alignment: Alignment.topLeft,
            child: Text("左上"),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Text("右下"),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Text("左下"),
          ),
          Align(
            alignment: Alignment.topRight,
            child: Text("右上"),
          )
        ],
      ),
    );
  }
}

• 注意

• Align可以控制组件在父组件中的位置。
• 一般Container+Stack+Align 是结合使用。
• Align中alignment 可以Alignment.topLeft 也可以使用坐标Alignment(0,0)。

• 效果图

  
  image.png

四.Flutter Stack +Positioned 控制子元素

• Stack组件结合Positioned组件也可以控制每个子元素的显示位置，用法和Align一样

• 常用属性

• top:子元素距离顶部的距离
• bottom:子元素距离底部的距离
• left:子元素距离左侧的距离
• right:子元素距离右侧的距离

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      width: 100,
      height: 100,
      color: Colors.pink,
      alignment: Alignment.center,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            left: 0,
            top: 0,
            child: Text("左上"),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Text("右下"),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            child: Text("左下"),
          ),
          Positioned(
            right: 0,
            top: 0,
            child: Text("右上"),
          )
        ],
      ),
    );
  }
}

• 注意

Positioned 一般结合两个属性方位来控制位置

五.总结

1. Stack组件中的alignment属性是不能对单独子view做调整的
2. 结合Stack+Align 组件控制子view的位置。
3. 结合Stack+Positioned 组件控制子view的位置。