📜  颤振填充顶部和底部 - Dart (1)

📅  最后修改于: 2023-12-03 15:12:54.363000             🧑  作者: Mango

颤振填充顶部和底部 - Dart

在 Dart 编程语言中,颤振填充是一种使内容在顶部和底部动画效果的方法。以下是一个包含颤振填充的示例:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shake Fill Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShakeFill(),
    );
  }
}

class ShakeFill extends StatefulWidget {
  @override
  _ShakeFillState createState() => _ShakeFillState();
}

class _ShakeFillState extends State<ShakeFill> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  double padding = 0.0;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    )..repeat(reverse: true);

    animation = Tween(begin: 0.0, end: 20.0).animate(controller)
      ..addListener(() {
        setState(() {
          padding = animation.value;
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shake Fill Demo'),
      ),
      body: AnimatedPadding(
        padding: EdgeInsets.fromLTRB(padding, 0, padding, 0),
        duration: const Duration(milliseconds: 2000),
        curve: Curves.linearToEaseOut,
        child: Container(
          color: Colors.blue[100],
          height: 200,
          width: 200,
        ),
      ),
    );
  }

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

在上面的代码中,使用 AnimationControllerAnimation 来控制填充的方向和速度。 padding 变量用于在动画显示期间更改填充。

使用 AnimatedPadding 可以将填充动画应用于任何 Widget 上。可以根据需要更改填充的方向,填充动画的曲线和持续时间。

以上就是使用 Dart 实现颤振填充顶部和底部的介绍和示例代码。