Flutter容器,其网络图像和底部的对齐容器

问题描述 投票:0回答:2

因此,我必须在容器中显示图像,并在容器底部显示一些说明。该图像应填满整个屏幕。正在从网络获取图像。

这是我的初始方法

  Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Container(
        child: ClipRRect(
          child: Image.network(category.imageURL,
              height: maxHeight * 1, fit: BoxFit.cover),
        ),
      ),
      Align(
        alignment: Alignment.bottomLeft,
        child: getNameAndDeleteSection(context),
      )
    ],
  ),
),

其中getNameAndDeleteSection基本上是这个

 return Container(
      color: Colors.yellow,
      margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            category.name,
            maxLines: 1,
            style: TextStyle(color: Colors.white),
          ),
          Spacer(),
          IconButton(
            icon: Icon(Icons.delete, size: 18.0, color: Colors.white,),
            onPressed: () {
              deleteTap(category);
            },
          )
        ],
      ),
    );
  }

加载网络映像时,它隐藏了黄色容器,但保留了子容器。我想要的是图像保留在背景中,黄色容器保留在背景之上。这个想法是,黄色容器将具有某种透明的颜色,以使其看起来漂浮在图像上。

最大高度是listView提供的高度。我正在尝试使UI具有适应性。有帮助吗?

flutter flutter-layout flutter-container
2个回答
0
投票

为什么不像这样将图像作为BoxDecoration放在容器中:

Stack(
   children: <Widget>[
      Container(
         decoration: BoxDecoration(
            image: DecorationImage(
               image: NetworkImage(url), fit: BoxFit.cover,
            ),
         ),
      ),
      Align(
         alignment: Alignment.bottomLeft,
         child: getNameAndDeleteSection(context),
      )
   ],
),

0
投票

我决定使用Card来包围容器,而不是使用似乎总是被网络映像隐藏的容器。而且有效。

因此,更改是在getNameAndDeleteSection中完成的,基本上将整个代码包装在Card中。宾果游戏也有效。

© www.soinside.com 2019 - 2024. All rights reserved.