Flutter 卡顶半径被 Image 覆盖 [英] Flutter card top radius is covered by Image

问题描述

当我向卡片添加图像时，卡片顶部的半径会被覆盖.我该如何解决?

当我向卡片添加图像时，卡片顶部的半径会被覆盖.我该如何解决?

When I add a image to the card, the Radius at the top of the card are covered. How can I solve it?

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,),
                  ],
                ),
              ))),
    );
  }
}

这是渲染

推荐答案

您可以为卡片设置clipBehavior:

Card(
      clipBehavior: Clip.antiAliasWithSaveLayer, ...

或者您可以将图像包装在 ClipRRect

Or you can wrap your image in ClipRRect

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

这篇关于Flutter 卡顶半径被 Image 覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！