flutter应用开发--1.Stack组件的尺寸规则:根据父组件或者子组件的尺寸；2.定位规则:alignment: Alignment.center指定 Stack 中非定位子组件的对齐方式

原始代码

import 'package:flutter/material.dart';

class StackComp extends StatelessWidget {
  const StackComp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('堆叠容器'), backgroundColor: Colors.pink,),
      body: Center(
        child: Stack(
          // 超出部分处理
          // 1. 不裁剪超出部分
          clipBehavior: Clip.none,
          // 2. 组件对齐方式
          alignment: Alignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.cyan,
            ),
            // Image组件参照Container四个角定位
            Positioned(
              top: -105,
              child: Image.asset('assets/open_eyes.png')
            )
          ],
        ),
      ),
    );
  }
}

1. Container 是否决定 Stack 的宽高

在你提供的代码中，Container 并不直接决定 Stack 的宽高。

Stack 的尺寸规则

Stack 组件的尺寸默认由其内容和布局约束共同决定。具体来说：

• 如果 Stack 有父组件且父组件对其有明确的尺寸约束（例如 Center 组件会尽量让子组件在可用空间内居中，但没有强制的尺寸约束），Stack 会根据这些约束来确定自身尺寸。
• 如果 Stack 没有父组件或者父组件没有明确的尺寸约束，Stack 会根据其包含的子组件的大小来确定自身尺寸。

代码情况分析

在代码里，Stack 被 Center 组件包裹，Center 组件没有对 Stack 施加固定的尺寸约束。Stack 中的 Container 有固定的宽高（width: 200 和 height: 200），但 Stack 还包含一个 Positioned 组件，该组件的 top 值为 -105，可能会使 Stack 的高度超出 Container 的高度。所以，Stack 的最终尺寸是由所有子组件的布局和位置共同决定的，而不是仅由 Container 决定。

2. alignment: Alignment.center 的作用

alignment 是 Stack 组件的一个属性，用于指定 Stack 中非定位子组件（即没有使用 Positioned 包裹的子组件）的对齐方式。Alignment.center 表示将这些非定位子组件在 Stack 中居中对齐。

代码情况分析

在你的代码中，Stack 有两个子组件：一个 Container 和一个 Positioned 组件包裹的 Image。Positioned 组件包裹的 Image 是定位子组件，它的位置由 Positioned 的 top 属性决定，不受 alignment 属性的影响。而 Container 是非定位子组件，alignment: Alignment.center 会将 Container 在 Stack 中水平和垂直方向都居中对齐。

以下是一个简单修改后的代码示例，添加了一个非定位的文本组件，以更直观地展示 alignment 的作用：

import 'package:flutter/material.dart';

class StackComp extends StatelessWidget {
  const StackComp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('堆叠容器'), backgroundColor: Colors.pink,),
      body: Center(
        child: Stack(
          // 超出部分处理
          // 1. 不裁剪超出部分
          clipBehavior: Clip.none,
          // 2. 组件对齐方式
          alignment: Alignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.cyan,
            ),
            // 新增非定位文本组件
            const Text('居中的文本'),
            // Image组件参照Container四个角定位
            Positioned(
              top: -105,
              child: Image.asset('assets/open_eyes.png')
            )
          ],
        ),
      ),
    );
  }
}

在这个修改后的代码中，const Text('居中的文本') 是非定位子组件，它会在 Stack 中居中显示。而 Image 由于被 Positioned 包裹，其位置由 Positioned 的属性决定。