Flutter Widget 之DropdownButton

你需要用户从选项列表中选择一个值吗？试试DropdownButton

首先，给DropdownMenuItems一个选项列表

DropdownButton(
    items: const [
        DropdownMenuItem(child: Text("Dash"), value: "Dash"),
        DropdownMenuItem(child: Text("Sparky"), value: "Sparky"),
        DropdownMenuItem(child: Text("Snoo"), value: "Snoo"),
        DropdownMenuItem(child: Text("Cloppy"), value: "Clippy"),
    ],
)

DropdownMenuItems是你将在下拉菜单中实际看到的内容,由于他们都在一个列表中，它们必须是同一种类型

DropdownMenuItem<String>(value: "Dash")
DropdownMenuItem<int>(value: 123)
DropdownMenuItem<double>(value: 1.0)

提供一个包含所选下拉菜单value的状态变量

DropdownButton(
    items: [...],
    value: _dropdownValue,
)

最后，给它一个onChanged回调,在选择新值时调用setState来更新变量

void dropdownCallback(String? selectedValue) {
    if (selectedValue is String) {
        setState(() {
            _dropdownValue = selectedValue;
        });
    }
}

DropdownButton(
    items: [...],
    value: _dropdownValue,
    onChanged: dropdownCallback,
)

以上的技术内容已足够你使用，另外，你也可以根据自己的喜好自定义下拉按钮

那个箭头是不是太小了？你可以通过调整图标大小将它变大

DropdownButton(
    items: [...],
    value: _dropdownValue,
    onChanged: dropdownCallback,
    iconSize: 42.0
)

默认的灰色不够突出？你可以通过iconEnabledColor给它上一点颜色

DropdownButton(
    items: [...],
    vale: _dropdownValue,
    onChanged: dropdownCallback,
    iconEnabledColor: Colors.green,
)

不喜欢箭头？用不同的图标替换它

DropdownButton(
    items: [...],
    value: _dropdownValue,
    onChanged: dropdownCallback,
    icon: const Icon(Icons.flutter_dash),
)

通过启用IsExpanded扩大下拉框的宽度

DropdownButton(
    items: [...],
    value: _dropdownValue,
    onChanged: dropdownCallback,
    isExpanded: true,
)

你甚至可以通过style给文本上色

DropdownButton(
    items: [...],
    value: _dropdownValue,
    onChanged: dropdownCallback,
    style: GooleFont.patuaOne(
        testStyle: const TextStyle(
            color: Colors.blue
        ),
    ),
)

记住一件事：如果onChanged或items列表为null，DropdownButton将不可用，箭头会变灰色且不会响应输入

DropdownButton(
    items: null,
    value: _dropdownValuem
    onChanged: null,
)

如果想了解有关DropdownButton的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址