0

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

这是我的初步方法

  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 自适应。有什么帮助吗？

4

2 回答 2

0

为什么不将图像作为 BoxDecoration 放入容器中，如下所示：

Stack(
   children: <Widget>[
      Container(
         decoration: BoxDecoration(
            image: DecorationImage(
               image: NetworkImage(url), fit: BoxFit.cover,
            ),
         ),
      ),
      Align(
         alignment: Alignment.bottomLeft,
         child: getNameAndDeleteSection(context),
      )
   ],
),
于 2020-02-12T16:38:26.217 回答
0

我决定使用将容器包裹起来的卡片，而不是使用似乎总是被网络映像隐藏的容器。它奏效了。

因此，更改是在 getNameAndDeleteSection 中完成的，并且基本上将整个代码包装在 Card 中。宾果游戏，它奏效了。

于 2020-02-13T05:21:56.543 回答