如何在 flutter 中动画交换两个不同大小的小部件

问题描述 投票:0回答:0

我需要在 flutter 中交换两个不同大小的文本小部件。当用户点击第二个文本时,我试图交换这两个文本。我试过 animatedPositioned 但它看起来很奇怪,因为尺寸不同。请注意,文本也需要更改大小。

为了参考,我附上了gif。

class SwapWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 80,
              child: FittedBox(
                fit: BoxFit.scaleDown,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Text(
                      "\$",
                      style: TextStyle(
                        fontSize: 40,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    Text(
                      "400",
                      style: TextStyle(
                        fontSize: 80,
                        fontWeight: FontWeight.w500,
                        height: 1,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 20),
        GestureDetector(
          onTap: () {},
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text(
                '2345',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.normal,
                ),
              ),
              Icon(Icons.swap_vert),
            ],
          ),
        ),
      ],
    );
  }
}

动画gif

flutter flutter-animation
© www.soinside.com 2019 - 2024. All rights reserved.