带有资产图像和文本的卡片

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 非常感谢,你知道圆角后面没有白色背景的方法吗?

以上是关于带有资产图像和文本的卡片的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 资产图像无法正确显示

带有资产管道的背景图像

带有子域的 Rails 资产管道不检索图像

带有资产目录的 iOS 图像切片会创建奇怪的工件

如何以编程方式将矢量图像放入 iOS 资产目录

UIWebView 中的本地 html,带有来自资产目录的图像