flutter - Flutter 卡顶半径被 Image 覆盖
问题描述
当我向卡片添加图像时,卡片顶部的半径被覆盖。我该如何解决?
当我向卡片添加图像时,卡片顶部的半径被覆盖。我该如何解决?
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
ClipRRect(
borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),
child: Image.network(...),
)
推荐阅读
- webpack - Webpack 错误:来自 UglifyJs 的 index.bundle.js 中的错误
- spring - 在我的情况下,如何从 Table hibernate 中检索数据?
- visual-studio-code - 如何修复构建失败,您要继续吗?在 vscode 中
- javascript - 在 Typescript 中过滤数组
- r - 带有 r-caret 错误 x 的 CHAID 不是一个因素
- sql - 选择现有值或插入新行的功能
- java - JSON 模式验证对 PropertyName 没有按预期工作
- python - 如何使用networkx检索没有目标节点的源节点的所有路径
- redux - 无法读取未定义的属性“绑定”
- sql-server - 为什么 django 中的 indpectdb 没有创建所有表模型?