时间戳

首页 > 解决方案 > 将小部件动画到其父级之外的位置（行/列表视图）

flutter - 将小部件动画到其父级之外的位置（行/列表视图）

问题描述

我在行或列表视图中有一个卡片小部件列表。当点击这些卡片时，我想创建卡片增长并移动到屏幕中间的效果，屏幕的其余部分显示在灰色覆盖层下方。这些示例图像应该可以帮助您理解我要解释的内容。

Image #1 - 点击任何卡片之前的列表

在此处输入图像描述

Image #2 - 点击一张卡片后。卡片的大小和位置动画到屏幕的中心。其他一切都变得黑暗。（忽略糟糕的 Photoshop）。

在此处输入图像描述

我不是要完整的代码或任何东西，只是想知道是否可以将一个小部件移到它的父级之外并获得一些关于如何实现这种效果的想法。我知道可以在卡片上使用AnimatedContainer使其成长，定位部分是需要帮助的。谢谢！

标签： flutterflutter-layout

解决方案

您可以transform:在 a 上使用参数Container()

完整的工作示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.black87,
          margin: EdgeInsets.only(top: 100),
          child: Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(horizontal: 16),
                transform: Matrix4.translationValues(0, 50, 0),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
              Container(

                margin: EdgeInsets.symmetric(horizontal: 16),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
              Container(

                margin: EdgeInsets.symmetric(horizontal: 16),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
            ],
          ),
        )
      )
    );
  }
}

#2 动画可以通过使用Hero()Widget 和Overlay(). 或者您可以使用自定义DialogBuilder的一些建议来帮助您入门。

推荐阅读