如何更改复选框小部件的图标？

Question

我想将默认复选框小部件的图标更改为可用的图标：material。io/resources/icons/

例如'keyboard_arrow_right' 在点击前（或值更改）和 'keyboard_arrow_down' 在点击后（值更改）。

我怎样才能做到这一点？

我想这样做的原因是因为我想利用绑定其他 UI 元素的可见性，以便它们在值更改时隐藏/取消隐藏。 （这很简单，Material Gallery 官方 Google 模板中有一个示例。

由于用户体验的原因，我想更改图标。

或者我会使用按钮（图标）。我不知道如何让它以这种方式工作。

Answer 1

要使用图标按钮来完成此操作，请在按钮文本字段中设置一个默认值，以决定您希望按钮图标最初显示的方式，该默认值应与您希望详细信息显示的任何状态相匹配，即隐藏或隐藏未隐藏。

将 hide/unhide 元素的可见性绑定到 @widget.root.descendants.YourButton.text === 'keyboard_arrow_down'，然后将以下内容放入按钮的 onClick 事件中：

if (widget.text === 'keyboard_arrow_right') {
  widget.text = 'keyboard_arrow_down';
} else {
  widget.text = 'keyboard_arrow_right';
}

因此，如果您在此设置中将按钮文本 属性 设置为 'keyboard_arrow_right'，那么您的 elements/details 将在页面加载时隐藏。