Flutter速来系列14：层叠布局 Stack和Posi

在Flutter中，层叠布局是一种常用的布局方式，用于实现多个组件的重叠排列。

Flutter提供了两个用于层叠布局的组件：Stack和Positioned。

Stack: Stack组件用于将子组件按照层叠顺序进行排列，可以实现多个组件的重叠布局。
Positioned: Positioned组件用于在Stack中定位子组件的位置。Positioned组件必须作为Stack的直接子组件使用

Positioned是只能，必须跟着 Stack 玩的，别人，不要它！也要不起！

Stack组件

Stack组件用于将子组件按照层叠顺序进行排列，可以实现多个组件的重叠布局。Stack组件具有以下常见属性：

alignment（对齐方式）：指定子组件在Stack内的对齐方式，默认为左上角对齐。
fit（未定位子组件的布局方式）：指定未定位子组件如何布局，可以是填充父容器（StackFit.expand）或根据子组件大小自适应（StackFit.loose）。
overflow（溢出处理）：指定当子组件超出Stack范围时的处理方式，默认为裁剪溢出部分。

Stack常用场景

Stack组件在开发中常用于以下场景：

1. 叠加效果：当需要将多个组件叠加在一起时，使用Stack组件可以方便地实现叠加效果。
1. 背景图与内容叠加：在设计中，有时候需要将背景图与内容进行叠加显示。使用Stack组件可以将背景图和内容组合在一起，并按照指定的层叠顺序进行排列。

下面是一个可直接运行的示例代码，展示了Stack组件的基本用法：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack布局示例'),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            Text(
              '叠加文本',
              style: TextStyle(
                fontSize: 24,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个Stack布局，其中包含一个蓝色的正方形容器和一个居中显示的文本组件。Stack的alignment属性设置为Alignment.center，使得子组件在Stack中居中对齐。

Positioned组件

Positioned组件用于在Stack中定位子组件的位置。Positioned组件必须作为Stack的直接子组件使用。

属性

Positioned 组件具有以下常见属性：

left、top、right、bottom（边距）：用于指定子组件相对于Stack的边距。left和top指定左上角的偏移量，right和bottom指定右下角的偏移量。

Positioned 使用场景

Positioned组件在开发中常用于以下场景：

精确定位：当需要将子组件精确定位在Stack中的特定位置时，使用Positioned组件可以方便地控制子组件的偏移量。
图层叠加：与Stack组件结合使用，可以在叠加的组件中精确定位子组件，实现复杂的图层叠加效果。

下面是一个可直接运行的示例代码，展示了Positioned组件的基本用法：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Positioned布局示例'),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              width: 300,
              height: 300,
              color: Colors.blue,
            ),
            Positioned(
              top: 50,
              left: 50,
              child: Text(
                '定位文本',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们使用Positioned组件将文本组件定位在蓝色容器的左上角，实现了精确的定位效果。

演示stack的不同属性的不同作用

来吧。上个大招

show time，演示不同的属性

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack布局示例'),
        ),
        body: Stack(
          alignment: Alignment.center,
          fit: StackFit.expand,  // 将未定位的子组件填充满整个Stack的空间
          overflow: Overflow.visible,  // 超出Stack范围的子组件可见
          children: <Widget>[
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            Positioned(
              top: 50,
              left: 50,
              child: Text(
                'Positioned文本',  // Positioned定位的子组件
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white,
                ),
              ),
            ),
            Positioned(
              bottom: 50,
              right: 50,
              child: Text(
                '底部右侧',  // Positioned定位的子组件
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.yellow,
                ),
              ),
            ),
            Text(
              '居中文本',  // Stack的子组件，在Stack中居中对齐
              style: TextStyle(
                fontSize: 30,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项和常见问题

在使用Stack和Positioned进行层叠布局时，需要注意以下几点：

层叠顺序：组件在Stack中的层叠顺序由其在children列表中的顺序决定。后面的子组件将覆盖前面的子组件。
定位偏移量：在使用Positioned组件时，需要注意指定子组件的边距（left、top、right、bottom属性），以确保子组件在Stack中定位正确。
溢出处理：如果子组件超出Stack的范围，可以通过设置Stack的overflow属性来控制溢出的处理方式。

层叠布局适用于许多场景，如实现复杂的图层叠加效果、创建自定义的悬浮按钮、实现覆盖式的弹出框等。

Align和Stack的对比

Align和Stack都是在Flutter中用于布局的组件，它们有一些相似之处，也有一些不同之处。下面是Align和Stack之间的异同点：

相同点：

层叠布局：Align和Stack都支持层叠布局，可以将多个子组件进行叠加排列。
对齐功能：Align和Stack都提供了对子组件的对齐功能，可以通过设置对齐参数来控制子组件在父组件中的位置。

不同点：

层级管理：Stack是一个可以管理多个子组件的容器，可以通过Stack的层叠顺序来控制子组件的显示顺序。而Align只能包含一个子组件，并且不涉及层叠顺序。
子组件尺寸：在Stack中，子组件可以具有不同的尺寸，并且可以通过Positioned组件来精确控制子组件的位置。而在Align中，子组件的尺寸会受到Align组件的约束，并且无法通过属性直接控制子组件的位置。
父组件尺寸：在Stack中，父组件的尺寸默认由子组件的尺寸决定，可以通过设置fit属性来调整子组件对父组件的适应方式。而Align会根据子组件的尺寸来调整自身的尺寸，并将子组件放置在中心或指定的位置。

适用场景：