Flutter AlignTransition位置动画

最新推荐文章于 2024-05-20 22:16:17 发布

原创最新推荐文章于 2024-05-20 22:16:17 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AlignTransition #Flutter 位置动画 #位置动画

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文介绍了如何使用Flutter中的AlignTransition组件，通过Tween动画实现文本从底部居中到中心的平滑移动。展示了关键代码片段和初始化过程，适合初学者理解布局动画。

文字的位置变化，完整源代码

import 'package:flutter/material.dart';

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

  @override
  _AlignTransitionDemoState createState() => _AlignTransitionDemoState();
}

class _AlignTransitionDemoState extends State<AlignTransitionDemo>
    with SingleTickerProviderStateMixin {
  //Animation<AlignmentGeometry> get alignment => listenable as Animation<AlignmentGeometry>;
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late Animation<AlignmentGeometry> _aligment;
  @override
  void initState() {
    _aligment = Tween(begin: Alignment.bottomCenter, end: Alignment.center)
        .animate(_controller);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: AlignTransition(
            alignment: _aligment,
            child: Text("data"),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}