在Flutter中如何创建带有定位文本和按钮的自适应卡片？

移动开发 2026-07-08

我想要实现的就是这样的：

我想了解在Flutter中应该如何着手实现这一点。控件太多，我不确定需要怎样的控件/属性组合才能实现。

我的意思是，我可以靠直觉来判断，这样做基本能运行：

@override
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsetsGeometry.fromLTRB(0, 10, 0, 0),
    child: Stack(
      children: [
        Image(image: AssetImage("assets/photos/budapest-hotel.png")),
        Positioned(
          top: 30,
          left: 40,
          child: Text(
            "Group name",
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ],
    ),
  );

}
}

上面代码中小部件的截图：

但在我看来，这样的做法并不太合理，无法在所有屏幕上都能正常工作。正确的实现方式应该是什么？

解决方案

如果文本是要覆盖在图片上，Stack是正确的小部件；尽量避免使用固定坐标，或者你也可以使用一个带装饰图片的容器

Container(
  padding: const EdgeInsets.only(top: 10),
  child: Stack(
    alignment: Alignment.topLeft,
    children: [
      Image.asset(
        "assets/photos/budapest-hotel.png",
        fit: BoxFit.cover,
        width: double.infinity,
      ),
      Padding(
        padding: const EdgeInsets.all(24.0),
        child: Text(
          "Group name",
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ],
  ),
)

Flutter