Flutter如何用背景图片创建卡片？ [英] Flutter How to create Card with background Image?

问题描述

我正在尝试创建一张以图片为背景的卡片。问题是，图像溢出了卡，因此没有出现四角。

I'm trying to create a Card with an Image as a background. The problem is, the Image overflows the Card, so the Corners of the don't show up.

我需要将图像设置为卡的背景或将卡溢出行为设置为无溢出。

I need to either set the Image as a background of the card or set the cards overflow behavior to no overflow. But I couldn't find any properties for that.

这是我的卡：

Widget _buildProgrammCard() {
  return Container(
    height: 250,
    child: Card(
      child: Image.asset(
        'assets/push.jpg',
        fit: BoxFit.cover,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      elevation: 5,
      margin: EdgeInsets.all(10),
    ),
  );

它看起来像这样：

推荐答案

不使用- ClipRRect 小部件的其他方法-设置 semanticContainer：true，的卡小部件。

Other Way Without using - ClipRRect Widget - is To set semanticContainer: true, of Card Widget.

示例代码如下：

Card(
          semanticContainer: true,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Image.network(
            'https://placeimg.com/640/480/any',
            fit: BoxFit.fill,
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(10),
        ),

输出：

这篇关于Flutter如何用背景图片创建卡片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！