动画颤动窗口小部件的高程

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

我想动画小部件的高程,没有两只手(:

我试图改变材料小部件的高度,但没有改变

enter image description here

dart flutter flutter-layout
1个回答
2
投票

要使用AnimationController自己处理动画,请设置高程动画。下面是一个完整的例子:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedElevationButton(),
        ),
      ),
    );
  }
}

class AnimatedElevationButton extends StatefulWidget {
  @override
  _AnimatedElevationButtonState createState() =>
      _AnimatedElevationButtonState();
}

class _AnimatedElevationButtonState extends State<AnimatedElevationButton>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animationTween;

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

    _animationController = AnimationController(
      duration: Duration(milliseconds: 30),
      vsync: this,
    );
    _animationTween =
        Tween(begin: 20.0, end: 0.0).animate(_animationController);
    _animationController.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: _onTapDown,
      onTapUp: _onTapUp,
      child: Material(
        color: Colors.red,
        borderRadius: BorderRadius.circular(8.0),
        elevation: _animationTween.value,
        child: SizedBox(
          width: 100,
          height: 50,
        ),
      ),
    );
  }

  void _onTapDown(TapDownDetails details) {
    _animationController.forward();
  }

  void _onTapUp(TapUpDetails details) {
    _animationController.reverse();
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.