Question

我花了几个小时才创建一个可重用的窗口小部件。我的预期结果将是这样：

但是我被迫填充不透明宽度，具体取决于它的父级，如下所示：

这是我尝试过的代码：

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

有什么建议吗？

Answer 1

代替此

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

您可以在具有ListTile，title和subtitle的已定位容器中使用trailing小部件（可以在此处放置“立即预订”按钮）。并使容器的背景颜色变为不透明的黑色/白色。

Answer 2

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

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)),
              ],
            ),
          )
        ],
      ),
    ),
  );
}

如何创建卡片视图，并在图像中颤抖地显示文字？

2 个答案: