如何在 Flutter 中全屏显示 PageView 内的 Container？答案

【问题标题】：How to make a Container inside a PageView full screen in Flutter?如何在 Flutter 中全屏显示 PageView 内的 Container？
【发布时间】：2018-09-25 16:21:07
【问题描述】：

我有一个简单的水平列表，就像一个图像轮播，我可以使用 AnimatedBuilder 扫描它。

我想让每个单独的容器在我点击它时动画并展开全屏。

我将容器包装在 GestureDetector 中，我可以很好地点击它们，现在我需要全屏缩放容器。

我尝试使用Positioned 对其进行前置，但它并没有真正起作用，因为它重新定位了“轮播”中的所有容器。

基本上我需要点击的容器“弹出”出来，或多或少像绝对定位一个 html DIV。

有什么想法吗？

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentPage = 0;
  PageController _controller;

  @override
  void initState() {
    super.initState();

    _controller = new PageController(
      initialPage: currentPage,
      keepPage: true,
      viewportFraction: 0.8,
    );
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  expandMe() {
    print('I want to be fill screen');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new SafeArea(
        child: new Column(
          children: [
            new Expanded(
              child: new PageView.builder(
                itemCount: 2,
                onPageChanged: (value) {
                  setState(() {
                    currentPage = value;
                  });
                },
                controller: _controller,
                itemBuilder: (context, index) => builder(index),
              ),
            )
          ],
        ),
      ),
    );
  }

  builder(int index) {
    return new AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return child;
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: new GestureDetector(
          onTap: expandMe,

          // on tap, make this one container full screen
          child: new Container(
            decoration: new BoxDecoration(
              borderRadius: new BorderRadius.circular(15.0),
              color: Colors.white,
              boxShadow: <BoxShadow>[
                new BoxShadow(
                  color: Colors.black12,
                  blurRadius: 10.0,
                  offset: new Offset(0.0, 10.0),
                ),
              ],
            ),
            child: new Text('page ' + index.toString()),
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： positioning flutter

【解决方案1】：

创建一个新的全屏页面。将英雄动画添加到容器中。它看起来就像您真正想要的那样。

查看this hero doc

【讨论】：