1

我是 Flutter 的新手，在尝试进行自定义切换时遇到了第一个障碍。我的开关在功能上应该Switch与材质库中的实际相同，唯一的区别是 UI。

我正在使用ValueNotifier并ValueListenableBuilder从另一个小部件更新开关值。这是我的代码的相关部分：

包含小部件

class ParentWidget extends StatefulWidget {
    @override
    _ParentWidget createState() => _ParentWidget();
}

class _ParentWidgetState extends State<ParentWidget> {
    ValueNotifier _switchNotifier = ValueNotifier(false);

    @override
    Widget build(BuildContext context) {
        return Container(
            child: ValueListenableBuilder(
                valueListenable: _switchNotifier,
                builder: (context, switchValue, child) {
                    return _buildSwitch(switchValue);
                },
            ),
        );
    }

    Widget _buildSwitch(bool switchValue) {
        return CustomSwitch(
            key: Key(value.toString()),
            initValue: switchValue,
            onChanged: (value) {
                setState(() {
                    _switchNotifier.value = value;
                });
            },
        );
    }
}

改变开关值的小部件

class ChildWidget extends StatefulWidget {
    final ValueNotifier _switchNotifier;
    ChildWidget(this._switchNotifier);

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

class _ChildWidgetState extends State<ChildWidget> {
    @override
    Widget build(BuildContext context) {
        return Container(
            child: GestureDetector(
                onTap: () {
                    widget._switchNotifier.value = false;
                },
                child: Image(...),
            ),
        );
    }
}

自定义开关

class CustomSwitch extends StatefulWidget {
    final ValueChanged<bool> onChanged;
    final bool initValue;
    final Key key;

    const CustomSwitch({
        @required this.key,
        this.onChanged,
        this.initValue,
    });

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

class _CustomSwitchState extends State<CustomSwitch> {
    bool value;

    @override
    void initState() {
        value = widget.initValue;
        super.initState();
    }

    @override
    Widget build(BuildContext context) {
        // the switch/toggle is animated just like the Material Switch
        return TheSwitch(...);
    }

    _toggle() {
        setState(() {
            value = !value;
            widget.onChanged(value);
        });
    }
}

如果我_toggle()从CustomSwitch开关调用会很好地切换动画（我正在使用AnimatedPositioned开关）。如果我只依赖用户输入，这很好用，但我还需要以编程方式切换开关，我觉得我错过了一些基本的东西，但我很难过。

我目前的理解是，CustomSwitch每次我改变它的值时都会重建它，ChildWidget因为我将开关值用作 a Key，但是如何用动画很好地做到这一点，就好像我_toggle()在它被构建后调用一样？

就像在 Java 中一样，您通常会执行类似customSwitch.toggle().

4

1 回答 1

1

大多数颤振小部件使用控制器与外部小部件交互（TextFormField、ListView 等）。

对于您的问题，最简单的解决方案也是创建一个自定义控制器。

首先，您将创建一个控制器类，它将您的自定义小部件的状态作为参数。此类还将公开您的小部件的方法。它看起来像这样：

class CustomWidgetController{
  _CustomWidgetState _customWidgetState;

  void _addState(_CustomWidgetState customWidgetState){
    this._customWidgetState = customWidgetState;
  }

  /// Determine if the CustomWidgetController is attached to an instance
  /// of the CustomWidget (this property must return true before any other
  /// functions can be used)
  bool get isAttached => _customWidgetState != null;

  /// Here is the method you are exposing
  void toggle() {
    assert(isAttached, "CustomWidgetController must be attached to a CustomWidget");
    _customWidgetState.toggle();
  }
}

您需要接受 Custom 控制器作为 CustomWidget 中的参数，并将其传递给它的状态，如下所示：

class CustomSwitch extends StatefulWidget {
    final CustomWidgetController customWidgetController;
    final bool initValue;
    final Key key;

    const CustomSwitch({
        @required this.key,
        this.customWidgetController,
        this.initValue,
    });

    @override
    _CustomSwitchState createState() => _CustomSwitchState(customWidgetController, initValue);
}

在您的自定义类的状态中，您将使用我们创建的 addState 方法将您的类的状态分配给控制器。您可以像这样构造函数：

class _CustomSwitchState extends State<CustomSwitch> {
    final CustomWidgetController _customWidgetController;
    bool value;

    _CustomSwitchState(this._customWidgetController, this.value) {
    if (_customWidgetController != null)
        _customWidgetController._addState(this);
    }

    @override
    Widget build(BuildContext context) {
        // the switch/toggle is animated just like the Material Switch
        return TheSwitch(...);
    }

    toggle() {
        setState(() {
            value = !value;
        });
    }
}

现在，您可以使用父小部件中的控制器传递控制器并调用方法，如下所示：

  CustomWidgetController customWidgetController = new CustomWidgetController();

  @override
   Widget build(BuildContext context) {
        return CustomWidget(
            controller: customWidgetController,
            initValue: true
        );
    }

就是这个！现在您可以customWidgetController.toggle()在代码中的任何位置调用来切换值！这就是原生小部件让您与它们交互的方式。

于 2020-06-27T09:07:15.613 回答