如何使用Flutter中的Stack小部件部分覆盖视图 [英] How to overlay a view partially using the Stack widget in Flutter

问题描述

我正在使用Flutter进行应用开发。
我想将海报图像视图覆盖在背景图像之上，就像下面的屏幕截图一样。

下面的代码段是这样做的，但是它还要求我根据海报的位置和位置来定位其他所有小部件，包括电影标题，发行日期等。背景图片的位置，在多个设备和方向上都不可靠。是否有解决此问题的示例或建议？

I am using Flutter for my app development. I would like to overlay a poster image view on top of a background image just like in this screenshot below. The code snippet below does this, but it requires me to also position every other widget including the movie title, release date, etc based on poster's position and background image's position, which is not reliable across several devices and orientation. Is there an example or suggestion to solve this problem?

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

推荐答案

创建堆栈

然后在Stack内添加Column并进行完整布局而无需海报。
然后作为第二个Stack Child，添加以下组合：

Then inside Stack add Column and make full layout without the poster. Then as a second Child of Stack, add this combination:

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

这篇关于如何使用Flutter中的Stack小部件部分覆盖视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！