带有资产图像和文本的卡片
Posted
技术标签:
【中文标题】带有资产图像和文本的卡片【英文标题】:card with asset image and text in flutter 【发布时间】:2021-02-27 04:58:32 【问题描述】:我正在尝试复制 Iphone 的提示应用程序。这是页面:
我想在图片上的 ios 图像上添加文本“nouveautés”。我试过这样:
Card(
child: Column(
children: <Widget>[
Text('Nouveautés'),
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.asset('images/ios14.png')),
),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0,top : 5.0),
)
它不起作用,所以我会感谢某人的帮助或想法。 提前谢谢!
【问题讨论】:
【参考方案1】:你可以复制粘贴这个例子:
class MyWidget extends StatelessWidget
@override
Widget build(BuildContext context)
return Scaffold(
body: Column(
children: [
Card(
child: Container(
height: 300,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('images/ios14.png'))),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text('Nouveautés'),
),
),
margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 5.0),
)
],
),
);
【讨论】:
你可以使用 Alignment.topLeft 作为 Container 代替 margin 并设置 Padding @Reign 非常感谢,你知道圆角后面没有白色背景的方法吗?以上是关于带有资产图像和文本的卡片的主要内容,如果未能解决你的问题,请参考以下文章