Flutter卡片顶部的圆角被图像遮挡。

Question

当我在卡片中添加一个图片时，卡片顶部的圆角被遮挡了。我应该如何解决这个问题？

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
          backgroundColor: Colors.grey[200],
          appBar: AppBar(title: Text('Demo'),),
          body: SizedBox(
              height: 310.0,
              child: Card(
                elevation: 3.0,
                color: Colors.white,
                margin: EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(height: 0.0,),
                    Image.network('https://img.zcool.cn/community/012157578c405f0000012e7e69e7cd.jpg@1280w_1l_2o_100sh.jpg'),
                    SizedBox(height: 16.0,),
                    Row(
                      children: <Widget>[
                        SizedBox(width: 16.0,),
                        Text('素雪', style: Theme.of(context).textTheme.headline,),
                        SizedBox(width: 16.0,),
                        Text('吉时已到', style: Theme.of(context).textTheme.subhead,),
                      ],
                    ),
                    SizedBox(height: 16.0,),
                  ],
                ),
              ))),
    );
  }
}

这是渲染效果

- zhengliang

Answer 1

您可以为卡片设置clipBehavior：

Card(
      clipBehavior: Clip.antiAliasWithSaveLayer, ...

或者你可以使用 ClipRRect 包裹你的图片。

ClipRRect(
  borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),
  child: Image.network(...),
)

- Andrii Turkovskyi

---

将 clipBehavior: Clip.antiAliasWithSaveLayer 添加到卡片中对我没有起作用。 - Sat Mandir Khalsa

什么也说不了 - 在我的代码中它是可以工作的。你可以尝试第二个解决方案。 - Andrii Turkovskyi

不知何故，clipBehavior 在热重载时无效，但在手动重载时有效。 - DazChong

将两者结合在一起对于卡片中的webView子视图运作良好。 - Morteza Rastgoo

对于小的边角半径最好使用clipBehavior: Clip.hardEdge，因为它比其他剪裁模式更快速和高效。 - Vishal

没错，Visal是正确的，clip.antiAliasWithSaveLayer在性能方面非常昂贵。请改用Clip.hardEdge。您可以从这里的文档中查看https://flutter.dev/docs/release/breaking-changes/clip-behavior#migration-guide - Alexa289

Answer 2

您需要将图片放置在Container或DecoratedBox中，并在BoxDecoration上设置BorderRadius。

     children: <Widget>[
        .....
        Container(
          width: double.maxFinite,
          height: 220.0,
          decoration: BoxDecoration(
            borderRadius:
                BorderRadius.vertical(top: Radius.circular(5.0)),
            image: DecorationImage(
              image: NetworkImage(
                  'https://img.zcool.cn/community/012157578c405f0000012e7e69e7cd.jpg@1280w_1l_2o_100sh.jpg'),
            fit: BoxFit.cover,
            ),
          ),
        ),
        ...
      ]

- chemamolins

Answer 3

您可以将图像放置在 材质 中，并设置 边框半径 和 剪辑行为。

    Material(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10.0),
            elevation: 2.0,
            clipBehavior: Clip.antiAliasWithSaveLayer,
            type: MaterialType.transparency,
            child: Image.asset(
              "images/user.png",
              height: 150,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
          ),

- MOhan

Answer 4

如果你真的在意性能，请不要使用clipBehavior: Clip.antiAliasWithSaveLayer。可以使用一个Container或者DecoratedBox和BorderRadius，如chemamolins的答案所述。请参考性能最佳实践。

- Rami

---

如果您提供所指的性能信息，那么会更好。感兴趣的人将决定访问您提供的链接。 - yardstick17