flutter - 单击时如何更改按钮的图标？

Question

我尝试使用此代码在单击按钮时切换按钮的图标，问题是图标既不显示也不改变。

LibraTextField(
    labelText: "Old Password",
    leadingIcon: AssetsConstants.icLock,
    trailingIcon: AssetsConstants.icUnSee,
    obscureText: _obscureText,
    onTap: iconStatus,),

LibraTextField(
    labelText: "New Password",
    leadingIcon: AssetsConstants.icLock,
    trailingIcon: AssetsConstants.icUnSee,
    obscureText: _obscureText,
    onTap: iconStatus,),

LibraTextField(
    labelText: "Confirm New Password",
    leadingIcon: AssetsConstants.icLock,
    trailingIcon: AssetsConstants.icUnSee,
    obscureText: _obscureText,
    onTap: iconStatus,),

变量声明

bool _obscureText = true;
bool _iconState = true;
var _trailingIcon;

void iconStatus() {
setState(() {
    _obscureText = !_obscureText;
    _iconState = !_iconState;
    if (_iconState = true) {
        _trailingIcon = AssetsConstants.icUnSee;
    }
    if (_iconState = false) {
        _trailingIcon = AssetsConstants.icSee;
    }
});
}

Answer 1

我建议不要将图标存储在状态上，而是在构建方法中选择它，因为它是渲染的一部分，而不是实际状态。

查看您的代码，问题在于您没有使用存储在状态中的图标trailingIcon，而是留下了一个常量值。

我举了一个例子来说明它是如何工作的：

class SomeForm extends StatefulWidget {
  @override
  _SomeFormState createState() => _SomeFormState();
}

class _SomeFormState extends State<SomeForm> {
  var _obscureText = true;

  @override
  Widget build(BuildContext context) {
    final icon = _obscureText ? AssetsConstants.icUnSee : AssetsConstants.icSee;
    return Column(
      children: [
        LibraTextField(
          labelText: "Old Password",
          leadingIcon: AssetsConstants.icLock,
          trailingIcon: icon,
          obscureText: _obscureText,
          onTap: iconStatus,
        ),
        LibraTextField(
          labelText: "New Password",
          leadingIcon: AssetsConstants.icLock,
          trailingIcon: icon,
          obscureText: _obscureText,
          onTap: iconStatus,
        ),
        LibraTextField(
          labelText: "Confirm New Password",
          leadingIcon: AssetsConstants.icLock,
          trailingIcon: icon,
          obscureText: _obscureText,
          onTap: iconStatus,
        ),
      ],
    );
  }
}

Answer 2

尝试这个：

void iconStatus() {
    _iconState = !_iconState;
    setState(() {
        _obscureText = !_obscureText;
        _trailingIcon = _iconState ? AssetsConstants.icUnSee : AssetsConstants.icSee;
    });
}

如果_obscureText可以，该图标也应该可以工作，否则共享您使用这些布尔值的代码部分。