我有下面的代码和一个附加的图像.我如何圆的角落的圆圈部分的形象?我曾试图圆角的形象和底部部分的容器,但无法实现一个顺利的圆形边界。tia
class NewsCardWidget extends StatelessWidget {
final News news;
const NewsCardWidget({
Key? key,
required this.news,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 10,
),
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 3,
blurRadius: 7,
offset: const Offset(0, 3),
)
],
),
alignment: Alignment.center,
child: Column(
children: [
Flexible(
child: Container(
decoration: BoxDecoration(
image: news.image != ''
? DecorationImage(
image: NetworkImage('${news.image}'),
fit: BoxFit.cover,
)
: const DecorationImage(
image: AssetImage('assets/image/newspaper.png'),
fit: BoxFit.fill,
),
),
),
),
Container(
padding: const EdgeInsets.all(15),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
child: Row(),
),
],
),
);
}
}
1条答案
按热度按时间whlutmcx1#
使用ClipRRect Package 包含图像的Container小部件,向父容器添加填充以创建边框效果并将颜色更改为黑色。
看起来是这样的。