dart - 如何使用 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 并在没有海报的情况下进行完整布局。然后作为堆栈的第二个子级，添加以下组合：

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

通过创建堆栈，您可以添加多个容器，最后添加的将在顶部。

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

Answer 3

这很容易做到，您所要做的就是将您的图像包装在Positioned 小部件中并根据您的需要设置位置，做这样的事情

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          constraints: BoxConstraints.expand(),
          child: Stack(
            children: <Widget>[
              Positioned(
                height: 250,
                top: 0,
                child: Container(
                    height: double.infinity,
                    alignment: Alignment.center, // This is needed
                    child: Image.asset(
                      ironMan,
                      fit: BoxFit.contain,
                      height: 400,

                    ),
              )),
              Positioned(
                  top: 180.0,
                  left: 12.0,
                  child: Container(
                    child: Image.asset(
                      ironMan2,
                      fit: BoxFit.cover,
                      width: 150,
                      height: 220,
                    ),
                  ),
                  ),
            ],
          )),
    );
  }