如何使用 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的第二个Child，添加这个组合：

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

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

如何使用 Flutter 中的 Stack 小部件部分覆盖视图

How to overlay a view partially using the Stack widget in Flutter

dart

flutter

flutter-layout