Как частично наложить вид, используя виджет Stack во Flutter - PullRequest
Новая
       16

Как частично наложить вид, используя виджет Stack во Flutter

0 голосов
/ 21 мая 2018

Я использую Flutter для разработки приложений.Я хотел бы наложить вид изображения плаката поверх фонового изображения, как на скриншоте ниже.enter image description here Приведенный ниже фрагмент кода делает это, но он также требует, чтобы я размещал все остальные виджеты, включая название фильма, дату выпуска и т. Д., В зависимости от положения плаката и положения фонового изображения, что ненадежно для несколькихприборы и ориентация.Есть ли пример или предложение для решения этой проблемы? 

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

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019 

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,
            ),
          )
        ],
      ),
0 голосов
/ 22 мая 2018

Создание стека

Чем внутри стека добавить колонку и сделать полный макет без постера.Чем в качестве второго ребенка стека добавить эту комбинацию.

...