如何在 Flutter 的 Stack 中实现负责任的容器？答案

【问题标题】：How to implement responsible container in Stack in Flutter?如何在 Flutter 的 Stack 中实现负责任的容器？
【发布时间】：2021-07-17 15:42:35
【问题描述】：

所以这里堆放了两个容器。第一个容器有一个背景图像。第二个容器具有固定容器大小的文本。但是如果屏幕大小不同，第二个容器文本看起来就不好。所以应该按照1st container负责。有什么方法可以定义它，1st container 应该有 70% 和 2nd container 应该有 30% 的占用？

Stack(
      children: [
        Container(
            decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(backgroudImg),
            fit: BoxFit.cover,
          ),
        )),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            height: 45,
            color: const Color(0xFF0E3311).withOpacity(0.5),
            child: Text(title),
          ),
        )
        ,
      ],
    )

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

  Container(
        height: "your height",
        width: "your width",
         decoration: BoxDecoration(
              borderRadius: BorderRadius.circular("INT 15 or 20 your choice"),
                  image: DecorationImage(
                    image: NetworkImage(backgroudImg),
                    fit: BoxFit.cover,
                  ),
                )),
            child: Stack(
            children: [
            Align(
          child: Alignment.bottomCenter or bottom,
        child : Container(
       height: "your height",
        width: "your width",
        decoration : BoxDecoration(
        borderRadius: BorderRadius.only(bottomleft and bottomright)
    ),
    child: Center(
    child: Text(""))))]))

【讨论】：

但是容器不会负责吧？
如果您担心尺寸问题，请获取可自动计算尺寸的软件包。比如你容器文本上的flutter_screenutil或任何你想放置一些尺寸的东西