时间戳

首页 > 解决方案 > 上面有图片，下面有文字的卡片

flutter - 上面有图片，下面有文字的卡片

问题描述

目前我有一张卡片，其中图像填充卡片，因为我有fit: BoxFit.fill. 但是我需要图片下方的文字。我尝试了几种不同的方法来介绍文本，列等。但没有可用。这些图像具有从 Internet 加载的不同大小，因此 fit 属性适用于图像。

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

@override
  Widget build(BuildContext context) {
    return Column(children: [
      GestureDetector(
        onTap: () {
         
        },
        child: Container(
          width: 335,
          height: 174,
          child: Card(
            clipBehavior: Clip.antiAliasWithSaveLayer,
            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),
          ),
        ),
      ),
    ]);
  }

但我想在像这样设计的图像下有文字：

在此处输入图像描述

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

标签： flutterflutter-layout

解决方案

这对我有用，除非你想要覆盖文本，然后你必须使用 aStack()然后将你的文本包装在一个Positioned()小部件中：

         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),
          )

推荐阅读