positioning - 如何在 Flutter 的 PageView 全屏内制作容器？

Question

我有一个简单的水平列表，如图像轮播，我可以使用 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()),
          ),
        ),
      ),
    );
  }
}

Answer 1

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

检查 this hero doc