布局 Stack 小部件时遇到问题

Question

我在 flutter 中布局堆栈小部件时遇到问题，不过我可能做了一些糟糕的嵌套，您可以在您的计算机中运行此代码。 我真的很糟糕布局堆栈小部件。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Stack(
            fit: StackFit.loose,
            children: [
              SizedBox(
                height: Get.height * 0.29,
                width: double.infinity,
                child: Stack(
                  fit: StackFit.loose,
                  children: [
                    Image.asset(
                      ImagesConstants.map_two_image,
                    ),
                    Container(
                      height: Get.height * 0.28,
                      color: const Color(0xFF0346A0).withOpacity(.5),
                    ),
                    Column(
                      children: [
                        Spaces.mid,
                        GlobalAppBar(
                          actionImage: ImagesConstants.filterListLight,
                          bgActionColor: const Color(0xFF1D406E),
                          appBarColor: Colors.transparent,
                          title: "Select Location",
                          actionButton: () {},
                          titleColor: Colors.white,
                        ),
                      ],
                    ),
                    Positioned(
                      child: Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          height: 90, 
                          width: Get.width * 0.5, 
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

你好，我正在尝试制作一个单页用户界面。我希望红色容器位于底部中心，并且它应该比背景图像更下方。

这就是我的目标。

这就是我的代码的作用。请帮我解决一下(:

Answer 1

您需要计算整个堆栈大小，包括底部空白区域。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth;
          final height = constraints.maxHeight;

          const redContainerHeight = 100.0;
          return Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: height * 0.4, //with bottom white space
                width: double.infinity,
                child: Stack(
                  clipBehavior: Clip.none,
                  fit: StackFit.loose,
                  children: [
                    // Image.asset(
                    //   ImagesConstants.map_two_image,
                    // ),
                    Positioned(
                      top: 0,
                      right: 0,
                      left: 0,
                      bottom: redContainerHeight,
                      child: Placeholder(),
                    ),
                    Container(
                      height: height * 0.3,
                      width: width,
                      color: const Color(0xFF0346A0).withOpacity(.5),
                    ),
                    Column(
                      children: [],
                    ),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        height: redContainerHeight,
                        width: width * 0.5,
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}