Flutter影片：將小部件從flex布局移動到另一個flex布局

我想將一個小部件從 flex 布局（在本例中為 Wrap）移動到另一個 flex 布局（再次為 Wrap）。這有點像以編程方式拖放。

我已經撰寫了一個作業概念證明：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// To get the position of a widget
extension GlobalKeyExtension on GlobalKey {
  Rect? get globalPaintBounds {
    final renderObject = currentContext?.findRenderObject();
    final matrix = renderObject?.getTransformTo(null);

    if (matrix != null && renderObject?.paintBounds != null) {
      final rect = MatrixUtils.transformRect(matrix, renderObject!.paintBounds);
      return rect;
    } else {
      return null;
    }
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

// A simple square
class Square extends StatelessWidget {
  final Color color;

  const Square({this.color = Colors.blue, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: color,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final parentKey = GlobalKey();
  final sourceKey = GlobalKey();
  final targetKey = GlobalKey();
  Rect? sourceRect;
  Rect? targetRect;
  bool moved = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Move test')),
      body: Stack(
        key: parentKey,
        children: [
          Padding(
            padding: const EdgeInsets.all(32),
            child: Column(
              children: [
                // The top Wrap is the target of the movement
                Wrap(
                  spacing: 16,
                  runSpacing: 16,
                  children: [
                    const Square(),
                    const Square(),
                    // Display the target
                    if (moved)
                      const Square(color: Colors.yellow)
                    else if (sourceRect != null && targetRect != null)
                      const Opacity(opacity: 0, child: Square())
                    else
                      Square(key: targetKey),
                    const Square(),
                    const Square(),
                  ],
                ),
                const Spacer(),
                Wrap(
                  spacing: 16,
                  runSpacing: 16,
                  children: [
                    const Square(color: Colors.red),
                    const Square(color: Colors.red),
                    // Display the source
                    if (sourceRect == null && targetRect == null && !moved)
                      InkWell(
                        onTap: () {
                          print('Tapped');
                          setState(() {
                            final parentRect = parentKey.globalPaintBounds;
                            if (parentRect != null) {
                              sourceRect = sourceKey.globalPaintBounds;
                              sourceRect = sourceRect?.translate(
                                -parentRect.left,
                                -parentRect.top,
                              );
                              targetRect = targetKey.globalPaintBounds;
                              targetRect = targetRect?.translate(
                                -parentRect.left,
                                -parentRect.top,
                              );
                            }
                          });
                          WidgetsBinding.instance
                              .addPostFrameCallback((timeStamp) {
                            setState(() {
                              sourceRect = targetRect;
                              print('START animation!');
                            });
                          });
                        },
                        child: Square(key: sourceKey, color: Colors.red),
                      ),
                    const Square(color: Colors.red),
                    const Square(color: Colors.red),
                  ],
                ),
              ],
            ),
          ),
          // This part is within Stack and moves the square
          if (sourceRect != null && targetRect != null)
            AnimatedPositioned(
              left: sourceRect!.left,
              top: sourceRect!.top,
              duration: const Duration(seconds: 1),
              onEnd: () {
                print('STOP animation!');
                setState(() {
                  sourceRect = null;
                  targetRect = null;
                  moved = true;
                });
              },
              child: const Square(color: Colors.yellow),
            ),
        ],
      ),
    );
  }
}

結果是這樣的：一個移動的小部件影片（gif）。

所以，我的問題是：有沒有更好的方法在框架內或使用庫中做到這一點？

uj5u.com熱心網友回復：

我不確定你所說的“更好的方式”是什么意思，但是有一個包（不是庫）被呼叫，它適用于你在兩個頁面之間但在同一個頁面內使用小部件local_hero獲得的相同影片，也許你可以試試看Hero看看它是否是你想要的：

https://pub.dev/packages/local_hero

萬一你不知道，https://pub.dev是 flutter/dart 包正式發布的地方。

標籤：扑 动画片

上一篇：如何使用ObjectAnimator正確縮放ImageView并將其移動到絕對位置

下一篇：QProcess：即使提供了完整路徑，系統也找不到指定的檔案