小菜鸡开始学习flutter之二十四

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

今日目标

今天主要学习下Flutter里的层叠组件Stack,通过学习使用Stack与Align，Stack与Positioned实现定位布局。

Stack

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

组件属性

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

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      children: [
        Container(
          height: 300.0,
          width: 300.0,
          color: Colors.red,
        ),
        Text('文本文本')
      ],
    );
  }
}

可以很直观的看到文本和红色方框是地方在一起的，之前我们写这样的布局的时候，文本是不会和红色格子地方在一起的，这里我们用Stack进行包裹就实现了两者的堆叠效果， 我们再添加属性alignment就可以去控制我们的子元素再堆叠的时候放的位置在哪里Alignment(x,y)通过这个属性可以实现子元素任意摆放的位置，要注意x,y的取值范围是-1到1。 上述是只有两个元素，这个时候我们只用stack是可以看起来控制了text的位置，如果有多个子组件的时候，值通过stack就无法控制到每一个组件，这时候就需要结合使用align或者positioned

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
            height: 400,
            width: 300,
            color: Colors.red,
            child: Stack(
              children: [
                Align(
                  alignment: Alignment(0.8, 0.5),
                  child: Icon(
                    Icons.abc,
                    size: 40,
                    color: Colors.blue,
                  ),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Icon(
                    Icons.home,
                    size: 60,
                    color: Colors.yellow[700],
                  ),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Icon(
                    Icons.search,
                    size: 30,
                    color: Colors.green[700],
                  ),
                ),
              ],
            )));
  }
}

通过align我们就控制了每一个子元素再container中的具体位置。同样我们也可以使用positioned来控制 positioned是通过top,left,right,bottom这4个属性来控制其子元素的方位的。
上述基本上就和web端的position定位大同小异，多加练习就能掌握啦~~

ending

持续学习，如有不正确的地方还请指正~~