526互联

11、层叠布局（Stack、Align、 Positioned）

发布时间 2023-11-17 21:13:38作者: 鲤斌

Flutter Stack组件

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

 

Alignment（对齐）类是用于表示相对于父容器的对齐方式的；

Alignment 类的常见用法：
  1. Alignment.topLeft: 左上对齐
  2. Alignment.topCenter: 居中顶部对齐
  3. Alignment.topRight: 右上对齐
  4. Alignment.centerLeft: 居中左侧对齐
  5. Alignment.center: 居中对齐 (默认值)
  6. Alignment.centerRight: 居中右侧对齐
  7. Alignment.bottomLeft: 左下对齐
  8. Alignment.bottomCenter: 居中底部对齐
  9. Alignment.bottomRight: 右下对齐

     Alignment 还可以使用偏移量进行微调。例如：

  1. Alignment(-1.0, -1.0): 左上角对齐
  2. Alignment(1.0, 0.0): 右侧居中对齐
  3. Alignment(0.0, 0.5): 父容器顶部中心对齐
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return  Stack(
      alignment: Alignment.center, //子元素显示的位置
      children: [
        Container(
          height: 150,
          width: 150,
          color: Colors.red,
        ),
        Text("你好")
      ],);
  }}

Flutter Stack Align

Align 组件可以调整子组件的位置 , Stack组件中结合Align组件也可以控制每个子元素的显示位置
1.Align结合Container的使用
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
          // alignment: Alignment.center,
          height: 150,
          width: 150,
          color: Colors.red,
          child:  const Align(  //  center是Align的子主键
            alignment: Alignment.center,
            child:  Text("你好"),)
        );
  }
}
2.Align结合Alignment 参数
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
          // alignment: Alignment.center,
          height: 150,
          width: 150,
          color: Colors.red,
          child:  const Align(  //  center是Align的子主键
            alignment: Alignment(0,1),  //(Alignment.x*childWidth/2+childWidth/2, Alignment.y*childHeight/2+childHeight/2)
            child:  Text("你好"),)
        );
  }
}
Alignment 可以通过其坐标转换公式将其坐标转为子元素的具体偏移坐标： 
(Alignment.x*childWidth/2+childWidth/2, Alignment.y*childHeight/2+childHeight/2) 
其中 childWidth 为子元素的宽度， childHeight 为子元素高度
3.Align结合Alignment 参数
Center 继承自 Align ，它比 Align 只少了一个 alignment 参数；由于 Align 的构造函数中
alignment 值为 Alignment.center ，所以，我们可以认为 Center 组件其实是对齐方式确定
4.Align结合Stack组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 200,
      color: Colors.red,
      child: const Stack(
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: Text("收藏"),
          ),
          Align(
            alignment: Alignment.topRight,
            child: Text("购买"),
          )
        ],
      ),
    );
  }
}

Flutter Stack Positioned

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

 

Stack 结合Positioned参数
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 400,
      color: Colors.yellow,
      child: Stack(   //注意:相对于外部容器进行定位 如果没有外部容器就相对于整个屏幕进行定位
        children: [
          Positioned(
            left: 0,
            width: 50,//配置子元素的宽度  无法使用double.infinity
            // right: 0,
            bottom: 0,
            child: Container(
              height: 300,
              width: 300,
              color: Colors.red,
            ),),
          const Positioned(right: 0, top: 190, child: Text("你好吗"))
        ],),
    );
  }}