Question

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

图片1-单击任何卡之前的列表

图片2-单击卡片后。卡片的大小和位置会以动画方式显示在屏幕中央。其他一切变得黑暗。（忽略不良的Photoshop）。

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

Answer 1

您可以在transform:上使用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,
              ),
            ],
          ),
        )
      )
    );
  }
}

可以使用Hero()小部件和Overlay()完成＃2动画。或者，您也可以使用自定义DialogBuilder只是一些建议，以帮助您入门。

将窗口小部件设置为其父窗口之外的位置（行/列表视图）

1 个答案: