Flutter 上面有图像，下面有文字的卡片

目前我有一张卡片，上面的图像填满了卡片，因为我有

fit:BoxFit.fill

。然而，我需要在我的图像下面的文本。我尝试了几种不同的方法来介绍文本、列等。。但是没有。从Internet加载的图像大小不同，因此fit属性可以很好地处理图像

这是我到目前为止所拥有的。我的构建方法：

@覆盖
小部件构建（构建上下文）{
返回列（子项：[
手势检测器(
onTap:（）{
},
子：容器(
宽度：335，
身高：174，
孩子：卡片(
clipBehavior:Clip.antiAliasWithSaveLayer，
孩子：Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit:BoxFit.fill，
),
形状：圆形矩形边框(
边界半径：边界半径。圆形（10.0），
),
标高：5，
保证金：所有（10），
),
),
),
]);
}

但是我想在图片下面有这样的文字：

---

进程条和计时器是不必要的。

这对我来说很有效，除非你想覆盖文本，那么你必须使用

堆栈（）

然后将文本包装到

定位（）小部件中：

         Card(
            clipBehavior: Clip.antiAliasWithSaveLayer,
            child: Column(
              children: [
                Image.network(
                  'https://via.placeholder.com/300?text=DITTO',
                  fit: BoxFit.fill,
                ),
                Text('Something'),
              ],
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            elevation: 5,
            margin: EdgeInsets.all(10),
          )

除了像这样指定图像尺寸外，还必须将图像和文本放置在
列
小部件中：

Column(children: [
          GestureDetector(
            onTap: () {},
            child: Container(
              width: 335,
              height: 174,
              child: Card(
                clipBehavior: Clip.antiAliasWithSaveLayer,
                child: Column(
                  children: [
                    SizedBox(
                      width: 335,
                      height: 110,
                      child: Image.network(
                        'https://via.placeholder.com/300?text=DITTO',
                        fit: BoxFit.fill,
                      ),
                    ),
                    SizedBox(height: 16,),
                    Column(children:[
                       Text('Title'),
                       Text('Subtitle')
                      ])
                  ],
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                elevation: 5,
                margin: EdgeInsets.all(10),
              ),
            ),
          ),
        ]);

可以使用
Stack
小部件解决上述问题，即给出渲染溢出错误的公认解决方案。我建议使用
MediaQuery
而不是硬编码的值

SizedBox(
    width: 335,
    height: 174,
    child: Stack(
      children: <Widget>[
        Card(
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Column(
            children: [
              SizedBox(
                width: 335,
                height: 110,
                child: Image.network(
                  'https://via.placeholder.com/300?text=DITTO',
                  fit: BoxFit.fill,
                ),
              ),
            ],
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(10),
        ),
        Positioned(
          bottom: 0,
          left: 10,
          child: SizedBox(
            height: 50,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Title'),
                Text('Subtitle')
              ],
            ),
          ),
        )
      ],
    ),
  ),

SizedBox(
宽度：335，
身高：174，
子：堆栈(
儿童：[
卡片(
clipBehavior:Clip.antiAliasWithSaveLayer，
子：列(
儿童：[
大小盒子(
宽度：335，
身高：110，
孩子：Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit:BoxFit.fill，
),
),
],
),
形状：圆形矩形边框(
边界半径：边界半径。圆形（10.0），
),
标高：5，
保证金：所有（10），
),
定位(
底部：0，
左:10,，
孩子：大小盒子(
身高：50，
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
文本（“标题”），
文本（“副标题”）
],
),
),
)
],
),
),

输出：

您是否尝试过使用堆栈小部件'？