Flutter学习之Stack层叠组件（ Stack与Align，Stack与Positioned实现定位布局。）

Stack层叠组件

所有放在Stack内部的组件都会摞在一起。也就是说他们上下级关系。后添加的在上面

Stack属性	说明
alignment	配置所有子元素的显示位置
children	子组件

Align属性	说明
alignment	配置所有子元素的显示位置
children	子组件

Positioned属性	说明
left top right bottom	配置子元素的显示位置
children	子组件

Stack与Align组合使用实现定位布局

Center(
  child: Container(
    height: 200,
    width: 300,
    color: Colors.red,
    child: Stack(
      // alignment: Alignment.center,
      children: [
        Align(
          alignment: Alignment(-0.5, 1),
          child: Icon(Icons.home),
        ),
        Align(
          alignment: Alignment(0, 1),
          child: Icon(Icons.search),
        ),
        Align(
          alignment: Alignment(0.5, 1),
          child: Icon(Icons.settings_accessibility),
        ),
      ],
    ),
  ),
);

实现效果如下

图一

Alignment中x y 值设置示意图。

Stack与Positioned组合使用实现定位布局

还拿图一当做例子。通过 Stack与Positioned来实现图一效果

Center(
  child: Container(
    height: 200,
    width: 300,
    color: Colors.red,
    child: Stack(
      // alignment: Alignment.center,
      children: [
        Positioned(
          left: 60,
          bottom: 0,
          child: Icon(Icons.home),
        ),
        Positioned(
          left: 135,
          bottom: 0,
          child: Icon(Icons.search),
        ),
        Positioned(
          right: 60,
          bottom: 0,
          child: Icon(Icons.settings_accessibility),
        ),
      ],
    ),
  ),
);

这里使用方式就和iOS中的某些布局框架使用方式类似了。需要计算距离