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

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

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小部件部分叠加视图

3 个答案: