控制并禁用flutter中的下拉按钮?

wa7juj8i  于 2022-12-05  发布在  Flutter
关注(0)|答案(9)|浏览(380)

我想控制一个下拉按钮,并使其无法使用按钮点击。
有没有办法让它禁用。基本上不允许它能够改变。

new DropdownButton(
          value: animalName,
          items: animals.map(
            (String value) {
              return new DropdownMenuItem<String>(
                value: value,
                child: new Text('$value'),
              );
            },
          ).toList(),
          onChanged: (value) {
            setState(() {
              animalName = value;
            });
          },
        ),

这是我目前在下拉按钮上使用的代码,但我不能禁用它。

agxfikkp

agxfikkp1#

DropdownButton文档中找到:
如果items或onChanged为null,则按钮将被禁用,向下箭头将变灰,并且将显示disabledHint(如果提供)

DropdownButton(
  onChanged: null,
  items: [...],
)
vsdwdz23

vsdwdz232#

这不是你想听到的,但我不认为目前有一个简单的方法。我试验了简单地删除所有项目,这导致了一个不错的小崩溃。也许值得提出一个问题,与Flutter的人在github上...
现在有一种替代方法可能对您来说已经足够好了。如果您将DropdownButton Package 在IgnorePointer中,当您希望禁用它时,可以将IgnorePointer的ignoring属性更改为true。
这样,如果用户点击它,它不会做任何事情。
但是您可能希望以某种方式向用户指示它也被禁用了,比如设置提示文本(因为它是灰色的)。

child: new IgnorePointer(
        ignoring: true,
        child: new DropdownButton(
          hint: new Text("disabled"),
            items: ["asdf", "wehee", "asdf2", "qwer"].map(
              (String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text('$value'),
                );
              },
            ).toList(),
          onChanged: (value) {},
        ),
bxpogfeg

bxpogfeg3#

如果将onChanged设置为空,则可以禁用DropdownButtonFormFieldDropdownButton,如果希望下拉列表仍显示选定的值,则必须设置disabledHint。例如:

DropdownButtonFormField<String>(
        disabledHint: Text(_selectedItem),
        value: _selectedItem,
        onChanged: enabled ? (value) => setState(() => _selectedItem = value) : null,
        items: items.map<DropdownMenuItem<String>>((item) {
          return DropdownMenuItem(
            value: item,
            child: Text(item),
          );
        }).toList(),
      )
x7yiwoj4

x7yiwoj44#

只需使用**IgnorePointer小部件将其打包,即可禁用DropdownButton**

IgnorePointer(
      ignoring:  enabled,
      child: new DropdownButton(
          value: animalName,
          items: animals.map(
            (String value) {
              return new DropdownMenuItem<String>(
                value: value,
                child: new Text('$value'),
              );
            },
          ).toList(),
          onChanged: (value) {
            setState(() {
              animalName = value;
            });
          },
        ),
);
mbzjlibv

mbzjlibv5#

如果items或onChanged为null,则按钮将被禁用,向下箭头将变灰,并且将显示disabledHint(如果提供)
因此,应该可以这样做:

DropdownButton<String>(
  ...
  onChanged: this.enabled ? (id) => setState(() => this.id = id) : null,
)
5ktev3wc

5ktev3wc6#

好的,我找到了一个让我满意的技巧我希望它隐藏/显示DropdownButton取决于CheckboxListTile
StatefulWidget类中,首先创建一个函数,例如:

_buildDropDown(bool enable) {
    if (enable) {
      return DropdownButton<String>(
        hint: Text("Hint"),
        items: <String>[
          'item 1',
          'item 2',
          'item 3',
        ].map((String value) {
          return new DropdownMenuItem<String>(
            value: value,
            child: new Text(value),
          );
        }).toList(),
        onChanged: (value) {},
      );
    } else { // Just Divider with zero Height xD
      return Divider(color: Colors.white, height: 0.0);
    }
  }

现在正在建造中

bool enable = true;

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      CheckboxListTile(
        title: const Text('Switcher'),
        selected: true,
        value: enable,
        onChanged: (bool value) {
          setState(() {
            enable = value;
          });
        },
      ),
      _buildDropDown(enable),
    ],
  );
}

现在,每次您更改enable时,它将显示和隐藏DropdownButton

5kgi1eie

5kgi1eie7#

DropdownButtonFormField(
     onChange: isDisable ? null : (str){
        
     },
     disabledHint: isDisable ?  null : Text('Your hint text'),
     ...
)

对于禁用 onChange:空值
用于禁用标题disabledHint:文本(“您的提示文本”)

oprakyz7

oprakyz78#

//添加小部件'AbsorbPointer'真禁用,假启用

//是否可编辑= true

AbsorbPointer(
    absorbing: isEditable
    DropdownButton(
    onChanged: null,
    items: [...],
    )
)
bxgwgixi

bxgwgixi9#

简单:

decoration:InputDecoration(enabled: false),

相关问题