首页 > 解决方案 > 如何在 Flutter 的 Stack 中实现负责任的容器?

问题描述

所以这里堆放了两个容器。第一个容器有一个背景图像。第二个容器具有固定容器大小的文本。但如果屏幕大小不同,第二个容器文本看起来就不好。所以应该按照规定负责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),
          ),
        )
        ,
      ],
    )

在此处输入图像描述

标签: flutterflutter-layout

解决方案


  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(""))))]))

推荐阅读