Flutter 10 - 页面布局之 Stack 层叠组件 Stack 与 Align、 Stack 与 Positioned 实现定位布局

一、Stack 组件

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

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

class StackAlignmentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: Alignment.bottomRight,
        // alignment: Alignment(1, 0.3),
        // alignment: Alignment(1, -0.2),
        children: [
          Container(
            width: 300,
            height: 400,
            color: Colors.red
          ),

          Text('我是一个文本', 
            style: TextStyle(
              fontSize: 40,
              color: Colors.white
            )
          )
        ]
      )
    );
  }
}

StackWidget.png

二、Stack 与 Align

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

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

class StackAlignWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 400,
        color: Colors.red,
        child: Stack(
          children: [
            Align(
              alignment: Alignment(1, -0.2),
              child: Icon(Icons.home, size: 30, color: Colors.white)
            ),

            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search, size: 30, color: Colors.white)
            ),

            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.settings_applications, size: 30, color: Colors.white)
            )
          ]
        )
      )
    );
  }
}

StackAlignWidget.png

三、Stack 与 Positioned

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

属性	说明
top	子元素距离顶部的距离
bottom	子元素距离底部的距离
left	子元素距离左侧的距离
right	子元素距离右侧的距离
child	子组件

class StackPositionedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 400,
        color: Colors.red,
        child: Stack(
          children: [
            Positioned(
              child: Icon(Icons.home, size: 40, color: Colors.white)
            ),

            Positioned(
              bottom: 0,
              left: 100,
              child: Icon(Icons.search, size: 30, color: Colors.white)
            ),

            Positioned(
              right: 0,
              child: Icon(Icons.settings_applications, size: 30, color: Colors.white)
            )
          ]
        )
      )
    );
  }
}

StackPositionedWidget.png