卡片上的 Flutter Text 叠加层

【问题标题】：Flutter Text overlay on Card卡片上的 Flutter Text 叠加层
【发布时间】：2020-08-28 09:09:04
【问题描述】：

我正在尝试在卡片小部件中的图像上叠加标题。我正在尝试使用 Stack 小部件来实现这一点，它似乎与我的约束相混淆。我原来的小部件：

当我添加堆栈时：

如您所见，文本出现了，但它破坏了布局。知道为什么会这样吗？据我所知，堆栈不应该影响任何约束（？），它应该浮动在现有小部件之上。

我的代码：

 return Card(
  clipBehavior: Clip.antiAlias,
  elevation: 3,
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(kDefaultPadding / 2)),
  child: Stack(
    children: [
      ClipRRect(
        borderRadius: BorderRadius.circular(kDefaultPadding / 2),
        child: FittedBox(
          fit: BoxFit.cover,
          child: Image.network(widget.data.imageUrl),
        ),
      ),
      Text("Test")
    ],
  ),
);

【问题讨论】：

标签： flutter dart mobile

【解决方案1】：

将fit: StackFit.expand 添加到Stack：

Card(
  clipBehavior: Clip.antiAlias,
  elevation: 3,
  shape:
  RoundedRectangleBorder(borderRadius: BorderRadius.circular(kDefaultPadding / 2)),),
  child: Stack(
    fit: StackFit.expand, // this is new
    children: [
      ClipRRect(
...

注意：您可以使用Container 代替Stack，并将图像设置为其装饰图像，并将文本设置为其子图像：

Card(
  clipBehavior: Clip.antiAlias,
  elevation: 3,
  shape:
  RoundedRectangleBorder(borderRadius: BorderRadius.circular(kDefaultPadding / 2)),),
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.cover,
        image: NetworkImage(widget.data.imageUrl),
      ),
    ),
    child: Center(child: Text("Test"))),
  ),
...

【讨论】：