如何使用Flutter中的Stack小部件部分叠加视图

Question

我正在使用Flutter进行应用开发。我想在背景图像上叠加海报图像视图，就像下面的截图一样。 下面的代码片段可以做到这一点，但是它还要求我根据海报的位置和背景图像的位置来定位每个其他小部件，包括电影标题，发布日期等，这在几个设备和方向上是不可靠的。有没有一个例子或建议来解决这个问题？

    @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new PlatformAdaptiveAppBar(
        title: new Text(widget.movie.title),
      ),
      body: new Container(
          constraints: new BoxConstraints.expand(),
          child: new Stack(
            children: <Widget>[
              new Container(
                child: new Image(
                    image: new AdvancedNetworkImage(
                        movieGridUtil.getUrlFromPath(widget.movie.backdrop_path,
                            MovieGridImageTypes.BACKDROP),
                        useMemoryCache: false,
                        useDiskCache: true)),
                constraints: new BoxConstraints.expand(height: 250.0),
              ),
              new Positioned(
                  left: 12.0,
                  top: 220.0,
                  child: new Image(
                    width: 100.0,
                    height: 150.0,
                    image: new AdvancedNetworkImage(
                        movieGridUtil.getUrlFromPath(widget.movie.poster_path,
                            MovieGridImageTypes.POSTER),
                        useMemoryCache: false,
                        useDiskCache: true),
                  )),
            ],
          )),
    );
  }

Answer 1

创建堆栈

比在Stack内部添加Column并在没有海报的情况下进行完整布局。比作为Stack的第二个孩子添加这个组合。

new Stack(
  children: [
    new Column(
      children: _layout()
    new Positioned(
      top:200,
      left:50,
      child: _child // or optionaly wrap the child in FractionalTranslation
    )]
  )
)

Answer 2

Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 200.0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0,right: 20.0, top:160.0),
            child: Container(
              color: Colors.pink,
              height: 150.0,
              width: 110.0,
            ),
          )
        ],
      ),

通过创建堆栈，您可以添加多个Container，无论哪个最后添加都将位于顶部。

Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 200.0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0,right: 20.0, top:160.0),
            child: Container(
              color: Colors.pink,
              height: 150.0,
              width: 110.0,
            ),
          )
        ],
      ),