使用 Flutter Hooks 实现 Flutter 过渡

问题描述

我正在尝试在 FadeTransition 的帮助下实现颤动过渡 Flutter Hooks。

我使用布尔值来显示或隐藏带有淡入淡出过渡动画的小部件。

class RecordingScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final recorderEvents = useProvider(recorderProvider);
    final recorderStates = useProvider(recorderProvider.notifier);
    final animationController =
        useAnimationController(duration: const Duration(seconds: 1));
    // useRecordStateForAnim(recordState: recorderEvents.timerStartOrStop,animationController: animationController);

    return SafeArea(
      child: Scaffold(
        backgroundColor: blueTextColor,body: Container(
          height: height(context),width: width(context),decoration: const BoxDecoration(
              image: DecorationImage(
            image: Svg(waveSvg),fit: BoxFit.cover,)),child: Container(
            constraints: BoxConstraints(
              minWidth: width(context)!,maxHeight:
                  recorderEvents.timerStartOrStop ? height(context)! : 70.h,),margin: EdgeInsets.symmetric(horizontal: 3.h),alignment: Alignment.center,child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                  Text("Text",textAlign: TextAlign.center,style: h4(context,Colors.white,fontFamily: "Inter",height: 1.5)),SizedBox(
                    height: 8.h,GestureDetector(
                      onTap: () {
                        recorderStates.mapEventsToStats(
                            VoiceRecorderEvents.recordButtonPressed(
                          timerStartOrStop: !recorderEvents.timerStartOrStop,));
                      
                      },child: buildMicRecButton()),if (!recorderEvents.timerStartOrStop) ...[
                    FadeTransition(
                      opacity: Tween<double>(begin: 0.0,end: 1.0).animate(
                          useRecordStateForAnim(
                              recordState: recorderEvents.timerStartOrStop,animationController: animationController)),child: Column(
                        children: [
                          SizedBox(
                            height: 10.h,Text(
                            "text",style: h6(
                              context,fontWeight: FontWeight.normal,height: 1.4,)
                        ],] else ...[
                    Column(
                      children: [
                        SizedBox(
                          height: 5.h,Text(
                          recorderEvents.time,style: h6(context,fontSize: 20.sp),SizedBox(
                          height: 8.h,Container(
                          decoration: BoxDecoration(
                            color: Colors.white,borderRadius: BorderRadius.circular(15),height: 20.h,width: 100.w,)
                      ],)
                  ],],);
  }
}

Animation<double> useRecordStateForAnim(
    {required bool recordState,required AnimationController animationController}) {
  return use(_SlideAndFadeAnimation(
    animationController: animationController,recordState: recordState,));
}

class _SlideAndFadeAnimation extends Hook<Animation<double>> {
  final AnimationController animationController;

  final bool recordState;

  const _SlideAndFadeAnimation({
    required this.animationController,required this.recordState,});

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

class _SlideAndFadeAnimationState
    extends HookState<Animation<double>,_SlideAndFadeAnimation> {
  @override
  void initHook() {
    if (hook.recordState) {
      hook.animationController.reverse();
    } else {
      hook.animationController.forward();
    }
  }

  @override
  Animation<double> build(BuildContext context) {
    return hook.animationController.view;
  }
}

我怎样才能做到这一点，请帮忙？谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）