如何在图像前面创建带有文字的卡片视图?

How to create card view with text in front of the image in flutter?

我花了几个小时才在 flutter 中创建一个可重用的小部件。我的预期结果是这样的:

但我坚持要根据它的父项来填充不透明度宽度,如下所示:

这是我试过的代码:

Stack(
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(12),
      child: Image.network(
        "https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg",
        fit: BoxFit.cover
      )
    ),
    Positioned(
      left: 15,
      bottom: 15,
      child: Container(
        decoration: BoxDecoration(
          color: Color.fromRGBO(0, 0, 0, 0.5)
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
                new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
              ],
            ),
            FlatButton(
              color: Colors.red[400],
              highlightColor: Colors.red[900],
              onPressed: (){},
              child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
            )
          ],
        ),
      )
    )
  ],
)

有什么建议吗?

而不是这个

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
                new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
              ],
            ),
            FlatButton(
              color: Colors.red[400],
              highlightColor: Colors.red[900],
              onPressed: (){},
              child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
            )
          ],
        ),

您可以在具有 titlesubtitletrailing 的定位和容器内使用 ListTile 小部件(现在预订按钮可以放在此处)。并使容器的背景颜色为 black/white 不透明度。

简答: 您需要在 Positioned 小部件中添加 right 属性。像这样

Positioned(
  left: 15,
  bottom: 15,
  right: 0,
  ...)

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Title")),
    body: Container(
      width: 300,
      height: 300,
      child: Stack(
        alignment: Alignment.bottomLeft,
        children: <Widget>[
          Image.asset(
            "assets/images/chocolate_pic.png",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
          Container(
            color: Colors.black.withOpacity(0.5),
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text("Awesome", style: TextStyle(fontSize: 28)),
                Text("Chocolate", style: TextStyle(fontSize: 22)),
              ],
            ),
          )
        ],
      ),
    ),
  );
}