1

我有一个有状态的小部件，它可能在两种情况下，第一个是一个容器，里面有第一个文本，例如“注册”，第二个是一个不同颜色的容器，有不同的文本，例如“确认”。问题是这两种情况之间的过渡是使用动画完成的，而不是动态逻辑，例如：

color: isSituation1 ? Colors.blue : Colors.red.

它实际上是这样的：

color: Color.lerp(Colors.blue, Colors.red, _animation1.value)

我有一个功能，当用户点击转发动画控制器的容器时运行，如下所示：

_controller1.forward()

这是一个名为 Button1 的小部件

所以在我的主页有状态小部件中，我有另一个按钮应该触发 Button1 小部件中的逆过程，所以它是：

_controller1.reverse()

我尝试在 Button1 小部件中创建一个函数，但后来我无法从外部运行它。如果可能的话，我该怎么做？

4

2 回答 2

2

所以基本上你想从另一个小部件调用你的 CustomWidget 的方法。您可以定义 ControllerClass，当您创建 CustomWidget 的新实例时，您将发出一个实例。这个 ControllerClass 实例将保存您的 CustomWidget 的功能，您将能够从外部调用它们。

例如一个类，它是一个模态圆形进度条，可以通过控制器类显示和隐藏。在此示例中，控制器类称为 ProgressBarHandler。我不知道这是否是一种更好且正确的方法，但有效。

class ModalRoundedProgressBar extends StatefulWidget {
  final String _textMessage;
  final double _opacity;
  final Color _color;
  final Function _handlerCallback;

  ModalRoundedProgressBar({
    @required Function handleCallback(ProgressBarHandler handler), //callback to get a controller
    String message = "",
    double opacity = 0.7,
    Color color = Colors.black54,
  })  : _textMessage = message,
        _opacity = opacity,
        _color = color,
        _handlerCallback = handleCallback;

  @override
  State createState() => _ModalRoundedProgressBarState();
}

class _ModalRoundedProgressBarState extends State<ModalRoundedProgressBar> {
  bool _isShowing = false;
  @override
  void initState() {
    super.initState();
    // init controller. 
    ProgressBarHandler handler = ProgressBarHandler();
    handler.show = this.show;
    handler.dismiss = this.dismiss;
    widget._handlerCallback(handler); // callback call.
  }

  @override
  Widget build(BuildContext context) {
    if (!_isShowing) return Stack();

    return Material(
      color: Colors.transparent,
      child: Stack(
        children: <Widget>[
          Opacity(
            opacity: widget._opacity,
            child: ModalBarrier(
              dismissible: false,
              color: Colors.black54,
            ),
          ),

          Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircularProgressIndicator(),
                Text(widget._textMessage),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void show() {
    setState(() => _isShowing = true);
  }

  void dismiss() {
    setState(() => _isShowing = false);
  }
}

  class ProgressBarHandler { 
      Function show; // will point to widget show method
      Function dismiss; // will point to another method.
   }


// ...in another external widget you can do...
// ... code your things and:
var controller;
var progressBar = ModalRoundedProgressBar(
  handleCallback: ((handler){ controller = handler; } ),);

//calling show method with controller
RaisedButton(
    onPressed: () { controller.show(); }
);


//calling dismiss method with controller
RaisedButton(
    onPressed: () { controller.dismiss(); }
);
于 2018-12-28T19:21:52.043 回答
0

这是可能的，但您可能不想这样做。您应该提供AnimationController来自父级的信息或构建您的应用程序以防止此类行为。不管怎样，如果你还想走这条路，这里有。

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  VoidCallback _reverseAnimation;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text('Reverse animation'),
            onPressed: () => _reverseAnimation(),
          ),
          Button1((controller) => _reverseAnimation = controller),
        ],
      ),
    );
  }
}

class Button1 extends StatefulWidget {
  final ValueChanged<VoidCallback> callback;
  Button1(this.callback);
  _Button1State createState() => _Button1State();
}

class _Button1State extends State<Button1> with SingleTickerProviderStateMixin {
  AnimationController _someAnimationController;

  void _reverseAnimation() {
    _someAnimationController?.reverse();
  }

  @override
  void initState() {
    super.initState();
    if (widget.callback != null) {
      widget.callback(_reverseAnimation);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('Start animation'),
        onPressed: () => _someAnimationController.forward(),
      ),
    );
  }
}
于 2018-12-28T19:22:44.833 回答