외부 위젯에서 내부 위젯의 애니메이션 컨트롤러 (또는 상태)에 액세스하려면 어떻게해야합니까?

Question

지난 며칠 동안 Flutter & 다트를 실험 해 보았습니다. 나는 하루에 이걸 붙잡 았어. 그래서 나는 여기에있다.

그래서 AlarmScreen이 있고 그 안에 2 개의 개체가 있습니다. 하나는 이며 다른 하나는입니다.

현재 RisingSunWidget이 화면 아래쪽에서 움직이는 반면 DraggableMoonWidget은 터치로 드래그 가능합니다. 내가 무엇을 달성하고자하는

는 RisingSunWidget의 애니메이션을 중지하고 DraggableMoonWidget 드래그 될 때 변화 할 때이다. 그래서 MoonDragListener을 제자리에두고 작동하지만 여전히 이해할 수 없습니다. (현재는 청취자를 AlarmScreen으로 다시 호출하지만 그 다음은 무엇입니까?)

나는 한 번에 하나씩 작업 한 것처럼 그 이후로 삭제 된 모든 방법을 시도했습니다.

TLDR 사용자가 예를 들어, 나는 컨트롤러를 중지하고 다른 지점에 애니메이션을 적용 할의 DraggableMoonWidget 닿을 때 나는 RisingSunWidget의 애니메이션 컨트롤러를 제어 할 방법 .

다트/플러터에서 가장 좋은 방법은 무엇입니까?

AlarmScreen

import 'package:flutter/widgets.dart'; 
import 'package:moonworshiper_app/backgrounds.dart'; 
import 'package:moonworshiper_app/ui/alarm/moon_draggable.dart'; 
import 'package:moonworshiper_app/ui/alarm/rising_sun.dart'; 

class AlarmScreen extends StatefulWidget { 
    @override 
    State<StatefulWidget> createState() { 
    return new _AlarmScreenState(); 
    } 
} 

class _AlarmScreenState extends State<AlarmScreen> { 
    bool _moonWasTouched = false; 

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

    @override 
    Widget build(BuildContext context) { 
    return new Stack(
     children: <Widget>[ 
     new DraggableMoonWidget(new MoonDragListener(this)), 
     new LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) { 
      return new RisingSunWidget(constraints.heightConstraints().maxHeight, _moonWasTouched); 
     }) 
     ], 
    ); 
    } 

    void _refreshSun() { 
    setState(() { 
     _moonWasTouched = true; 
    }); 
    } 
} 

class MoonDragListener { 
    _AlarmScreenState state; 

    MoonDragListener(this.state); 

    void onMoonDragStarted() { 
    state._refreshSun(); 
    } 
} 

DraggableMoonWidget

import 'package:flutter/widgets.dart'; 
import 'package:moonworshiper_app/ui/alarm/alarm_screen.dart'; 

class DraggableMoonWidget extends StatefulWidget { 

    final MoonDragListener moonStartListener; 

    DraggableMoonWidget(this.moonStartListener); 

    State<StatefulWidget> createState() => new _DraggableMoonState(); 
} 

class _DraggableMoonState extends State<DraggableMoonWidget> 
    with TickerProviderStateMixin { 


    final moonDragTween = new Tween<Offset>(
    begin: new Offset(0.0, -0.5), 
    end: new Offset(0.0, 0.5), 
); 

    var moonAnimListener; 
    AnimationController _animationController; 
    Animation<Offset> _dragAnimation; 
    AnimationController _dragAnimationController; 
    bool isFirstDraw = true; 

    @override 
    initState() { 
    super.initState(); 
    _animationController = new AnimationController(
     vsync: this, 
     duration: const Duration(milliseconds: 3000), 
    ); 
    _dragAnimationController = new AnimationController(vsync: this); 

    moonAnimListener = (AnimationStatus status) { 
     if (status == AnimationStatus.dismissed) { 
     _animationController.forward(); 
     } else if (status == AnimationStatus.completed) { 
     _animationController.reverse(); 
     } else if (status == AnimationStatus.forward) {} 
    }; 

    _dragAnimation = moonDragTween.animate(new CurvedAnimation(
     parent: _dragAnimationController, 
     curve: Curves.easeInOut, 
     reverseCurve: Curves.easeInOut)); 

    _dragAnimationController.animateTo(0.5, duration: new Duration()); 


    _animationController.addStatusListener(moonAnimListener); 


    _animationController.forward(); 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new Container(
     child: new Center(
     child: new SlideTransition(
      position: _dragAnimation, 
      child: new GestureDetector(
      child: new Image.asset(
       "assets/moon.png", 
       width: 280.0, 
       height: 280.0, 
      ), 
      onVerticalDragStart: (DragStartDetails details) { 
       print("start:" + details.globalPosition.toString()); 
       _animationController.removeStatusListener(moonAnimListener); 
       _animationController.stop(); 
       _dragStartDetails = details; 

       _dragAnimationController.animateTo(0.5, 
        duration: new Duration(milliseconds: 50)); 

       if (isFirstDraw) { 
       isFirstDraw = false; 
       widget.moonStartListener.onMoonDragStarted(); 
       } 
      }, 
     ), 
     ), 
    ), 
//  margin: new EdgeInsets.only(top: 48.0), 
    ); 
    } 

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

RisingSunWidget

import 'package:flutter/widgets.dart'; 

class RisingSunWidget extends StatefulWidget { 
    // needed to calculate the offset map 
    final double screenHeight; 

    // that's how we know if the use touched the moon 
    final bool moonWasTouched; 

    RisingSunWidget(this.screenHeight, this.moonWasTouched); 

    @override 
    State<StatefulWidget> createState() { 
    return new RisingSunState(); 
    } 
} 

class RisingSunState extends State<RisingSunWidget> with TickerProviderStateMixin { 
    AnimationController _animationController; 
    Animation<Offset> _sunAnimation; 

    final double sunSize = 320.0; 

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

    _animationController = new AnimationController(
     vsync: this, 
     duration: const Duration(milliseconds: 6000), 
    ); 

    // how many suns fit in the height of our screen 

    assert(widget.screenHeight > sunSize); 

    double sunsInHeight = widget.screenHeight/sunSize; 

    print(sunsInHeight.toString() + " suns could fit on the user's screen"); 

    var sunsPlusMargins = sunsInHeight + 1; // required margins 

    final moonTween = new Tween<Offset>(
     begin: new Offset(0.0, -0.5 * sunsPlusMargins), 
     end: new Offset(0.0, 0.5 * sunsPlusMargins), //move by 8% of height max 
    ); 

    _sunAnimation = moonTween.animate(new CurvedAnimation(
     parent: _animationController, 
     curve: Curves.easeInOut, 
     reverseCurve: Curves.easeInOut, 
    )); 


    if (widget.moonWasTouched) { 
     _animationController.stop(); 
     _animationController.animateTo(0.68, 
      duration: new Duration(milliseconds: 2000)); 
    } else { 
     _animationController.animateTo(0.88, 
      duration: new Duration(milliseconds: 0)); 
     _animationController.animateTo(0.75, 
      duration: new Duration(milliseconds: 15000)); 
    } 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new Center(
     child: new SlideTransition(
     position: _sunAnimation, 
     child: new Image.asset(
      "assets/sun.png", 
      width: sunSize, 
      height: sunSize, 
     ), 
    ), 
    ); 
    } 

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


} 

Answer 1

2 가능성 :

• 빌드 방법에서 제공되는 BuildContext context을 사용하십시오. BuildContext에는 특정 유형의 가장 가까운 상위 항목을 가져 오는 몇 가지 메소드가 있습니다.
• key 속성을 원하는 위젯에 전달하십시오. GlobalKey 정확해야합니다. GlobalKey을 사용하면 Widget 또는 그 상태에 직접 액세스 할 수 있습니다.