Question

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

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

我将容器包裹在GestureDetector中，我可以轻轻点击它们，现在我需要将容器全屏缩放。

我尝试使用Positioned来介绍它，但它并没有真正起作用，因为它会重新定位来自＆＃34; carousel＆＃34;的所有容器。

基本上我需要点击的容器来弹出＆＃34;弹出＆＃34; out，或多或少像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

如何在Flutter中的PageView全屏内创建一个Container？

1 个答案: