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

Posted 2023-02-23

【中文标题】如何使用 Flutter 中的 Stack 小部件部分覆盖视图

【英文标题】：How to overlay a view partially using the Stack widget in Flutter

【发布时间】：2018-10-30 16:35:07

【问题描述】：

我正在使用 Flutter 进行应用开发。 我想在背景图像上叠加一个海报图像视图，就像下面的截图一样。 下面的代码 sn-p 执行此操作，但它还需要我根据海报的位置和背景图像的位置定位所有其他小部件，包括电影标题、发布日期等，这在多个设备和方向上并不可靠。有解决这个问题的例子或建议吗？

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

【问题讨论】：

github.com/FlutterRocks/movie-details-ui

在 Column 中进行所有布局，然后将该列包装在 Stack 中，并将 Poster 添加为 stack 的第二个子项。

【参考方案1】：

这很容易做到，你所要做的就是把你的图片包裹在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,
                    ),
                  ),
                  ),
            ],
          )),
    );
  

【参考方案2】：

创建堆栈

然后在 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
    )]
  )
)

【参考方案3】：

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