0

新来的颤动并试图重新创建一个网站，但无法弄清楚如何在我的卡片上放置文本并在文本后面包含全宽不透明度。我还尝试在卡片上添加圆角，但我注意到仍然有白色的尖角。任何建议将不胜感激！。

这就是我的目标

这是我目前拥有的

  Card(
    elevation: 5,
    child: Container(
      height: 300,
      width: double.infinity,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(urlImage),
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.1), BlendMode.softLight),
          )),
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Expanded(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                backgroundColor: Colors.black.withOpacity(0.6),
              ),
            ),
          ),
        ),
      ),
    ),
    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
  );
4

3 回答 3

1

边框半径的关键是在与卡片边框半径相同ClipRRect的内容中使用a 。Card

要将徽章放置在图像上，请使用 aStack和 aAlign

可重用的小部件可能是这样的：

class MenuItem extends StatelessWidget {
  const MenuItem({
    Key? key,
    required this.imageUrl,
    required this.label,
  }) : super(key: key);

  final String imageUrl;
  final String label;

  static const double cornerRadius = 100;

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(cornerRadius),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(cornerRadius),
        child: Stack(
          fit: StackFit.expand,
          children: [
            Image.network(
              imageUrl,
              fit: BoxFit.cover,
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                color: Colors.black.withOpacity(0.4),
                height: 100,
                child: Center(
                  child: Text(
                    label,
                    style: const TextStyle(
                      fontSize: 26,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

结果看起来像这样

于 2022-01-25T20:24:19.953 回答
1

您收到白色角的原因是因为您在 Card 元素和 Container 上具有不同的半径，您可以通过使用您的首选半径设置 RoundedRectangleBorder 的形状来解决此问题。

关于文本背景，如果将文本包装在全宽容器中并将背景设置为容器而不是文本，则可以获得所需的内容。

这是一个例子：

  Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    elevation: 5,
    child: Container(
      height: 300,
      width: double.infinity,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(urlImage),
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.1), BlendMode.softLight),
          )),
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(15.0),
              bottomRight: Radius.circular(15.0)),
            color: Colors.black.withOpacity(0.6),
          ),
          width: double.infinity,
          padding: EdgeInsets.all(10.0),
          child: Text(
            text,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
      ),
    ),
    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
  );
于 2022-01-25T19:47:31.190 回答
0

如果您注意到您的图像，您可以在图像上方看到一个文本。在这种情况下，我们Stack在颤振中使用小部件。第一项Stack将在底部，下一项将在其上方。我们使用Position将第二个项目的位置设置在第一个项目之上。在这里，我发布了您预期的输出格式的代码

Stack(
        children: <Widget>[
          ClipRRect(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(15),
              topRight: Radius.circular(15),
            ),
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
              height: 250,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            bottom:0,
            left: 0,
            right: 0,
            child: Container(
              color: Colors.black54,
              padding: const EdgeInsets.symmetric(
                vertical: 5,
                horizontal: 20,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children:const [ Text(
                    'Spahegeti',
                    style: TextStyle(
                      fontSize: 26,
                      color: Colors.white,
                    ),
                    softWrap: true,
                    overflow: TextOverflow.fade,
                  ),
                ]
              ),
            ),
          )
        ],
      ),
于 2022-01-25T19:51:32.700 回答