Flutter stack+positioned会摧毁整个页面的加载的问题

Question

Flutter stack+positioned会摧毁整个页面的加载，怎么办？

代码如下

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "俺的 First APP😊",
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(title: "my Hello World App Home😊"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("this is 我的 appBar 标题"),
      ),
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Positioned(
              //top: 10,
              child: Image.asset(
                "assets/Images/大哭.png",
                width: 500,
              ),
            ),
            Positioned(
              top: 50,
              left: 50,
              child: Container(
                width: 25,
                height: 50,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

问题：_MyHomePageState中注释了一个top:10，当它被注释时，岁月静好。
（图）

而它被放出来，就一片空白了
（图）

Answer 1

让【道友老李】来帮你解答，本回答参考通义千问大模型编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

### 问题分析

在你的代码中，Stack 和 Positioned 的使用导致了页面加载异常。具体来说，当你给第一个 Positioned 添加 top: 10 时，页面显示为空白。这主要是因为 Stack 中的子组件没有正确地设置约束（constraints），导致布局失效。

解决方案

1. 明确约束：确保 Stack 中的所有子组件都有明确的约束条件。Stack 是一个无约束的容器，它的子组件需要通过 Positioned 或其他方式来明确其位置和大小。
2. 使用 Align 或 Center：如果不需要精确的位置控制，可以考虑使用 Align 或 Center 来替代 Positioned，这样可以避免一些布局问题。
3. 包裹 Stack 在有约束的容器中：将 Stack 包裹在一个有固定高度或宽度的容器中，例如 Container 或 SizedBox。

修改后的代码

以下是修改后的代码示例，添加了明确的约束条件：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "俺的 First APP😉",
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(title: "my Hello World App Home😉"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("this is 我的 appBar 标题"),
      ),
      body: SingleChildScrollView(
        child: SizedBox(
          height: MediaQuery.of(context).size.height, // 设置一个明确的高度
          child: Stack(
            children: [
              Positioned(
                top: 10,
                left: 0,
                right: 0,
                child: Image.asset(
                  "assets/Images/大哭.png",
                  width: 500,
                ),
              ),
              Positioned(
                top: 50,
                left: 50,
                child: Container(
                  width: 25,
                  height: 50,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键点解释

1. SizedBox 的使用：通过 SizedBox 设置了 Stack 的高度为屏幕高度，确保 Stack 有一个明确的尺寸。
2. Positioned 的约束：为第一个 Positioned 添加了 left: 0 和 right: 0，确保图片在整个宽度范围内显示，并且顶部距离为 10。

案例展示

1. 注释掉 top: 10：

   • 此时 Stack 中的 Positioned 没有明确的位置约束，Image 会默认居中显示，但不会出现空白页的问题。

2. 取消注释 top: 10：

   • 由于 Stack 没有明确的高度，Positioned 子组件可能会超出屏幕范围，导致部分内容不可见。通过设置 SizedBox 高度，确保所有内容都在可见区域内。

总结

通过明确 Stack 和 Positioned 的约束条件，可以有效避免布局问题，确保页面正常加载和显示。如果你有更多的复杂布局需求，建议参考 Flutter 官方文档中的布局指南，以确保最佳实践。