首页 > 解决方案 > Flutter 中的 Flutter 扩展和 Stateful Widget

问题描述

我正在开发 Flutter 中的 Stateful Widget 及其扩展部分。我遇到的问题是我传递给有状态小部件的值被覆盖了,因为我需要将我的值设置为让 Flutter 满意的值。

我的 Stateful Widget 首先接收如下数据:

class TranslateOnHoverRight extends StatefulWidget {
final Widget child;
final double movement;
TranslateOnHoverRight({Key key, this.child,this.movement}) : super(key: key);

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

它需要一个小部件和一个 dobule。

然后我有一个看起来像这样的 _TranslateOnHoverRightState 类,在这里我没有把所有东西都做好。

class _TranslateOnHoverRightState extends State<TranslateOnHoverRight> {

final nonHoverTransform = Matrix4.identity();
final hoverTransform = Matrix4.identity()..translate(_movement, 0, 0);

bool _hovering = false;
static double _movement = 0;

@override
Widget build(BuildContext context) {
    return MouseRegion(
        onEnter: (e) => _mouseEnter(true,widget.movement),
        onExit: (e) => _mouseEnter(false,0),
        child: AnimatedContainer(
           duration: const Duration(milliseconds: 200),
           child: widget.child,
           transform: _hovering ? hoverTransform : nonHoverTransform,
        ),
     );
}

void _mouseEnter(bool hovering,double move) {
    setState(() {
        _hovering = hovering;
        _movement = move;
    });
  }
}

在顶部,我传入_movement我的hoverTransform变量并将其设置为零。

现在在我的Widget build函数中,我返回一个 MouseRegion,它onEnter设置为使用我的函数_mouseEnter,该函数从 parameter 中的小部件中获取参数 boolean 和 double widget.movement。这里的想法是,现在当鼠标指针移动悬停时应该发生但什么也没有发生。

在我的_mouseEnter函数中,我传入 true 或 false 以及从小部件发送的值并将其传递给我的_movement变量,如下所示:

void _mouseEnter(bool hovering,double move) {
    setState(() {
        _hovering = hovering;
        _movement = move;
    });
}

最后一切都被用作这样的扩展:

Widget mouseRightOnHover(double moveIt) {
    return TranslateOnHoverRight(
        child: this,
        movement: moveIt,
    );
}

标签: flutterflutter-web

解决方案


推荐阅读