Question

我已经在首页上添加了卡片，并使用了“ Image.asset”作为背景图片。我现在想在此卡的顶部添加一些文字，但一直无法弄清楚该怎么做...任何帮助将不胜感激！

Card(  
    semanticContainer: true,  
    clipBehavior: Clip.antiAliasWithSaveLayer,  
        child: Image.asset(  
            'assets/images/image.png',  
            fit: BoxFit.cover,  
        ),  
            shape: RoundedRectangleBorder(  
            borderRadius: BorderRadius.circular(10.0),  
        ),  
            elevation: 5,  
            margin: EdgeInsets.symmetric(vertical: 9, horizontal: 10),  
),

上面是我到目前为止的代码（没有我要添加的任何文本）。

Answer 1

用装饰结帐Stack或Container。

您可以将小部件与Stack重叠。

您可以将AssetImage中的BoxDecoration设置为Container。

Answer 2

例如，该工具Stack

Stack(
    children: <Widget>[
      Card(
        semanticContainer: true,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: Image.network(
          'https://source.unsplash.com/WLUHO9A_xik/900x900',
          fit: BoxFit.cover,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        elevation: 5,
        margin: EdgeInsets.symmetric(vertical: 9, horizontal: 10),
      ),
      Positioned(
        right: 0.0,
        bottom: 0.0,
        child: Text('Example'),
      )
    ],
  ),

如何向填充有背景图像的卡中添加文本？

2 个答案: