如何创建通过图标显示所选项目的自定义下拉列表？答案

【问题标题】：How to create a custom dropdown which shows the selected item by an icon?如何创建通过图标显示所选项目的自定义下拉列表？
【发布时间】：2021-05-13 05:44:59
【问题描述】：

我创建的自定义下拉菜单示例，但无法按图标显示选定的下拉菜单。这里如果我将 isSelected 设置为 true，所有下拉项目都显示图标，但我只希望选定的下拉项目显示图标。图标 im使用的是 Icons.verified_rounded。

有没有办法实现这一点？下面是自定义小部件的示例代码。

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width ,
      height: height ,
      alignment: Alignment.center,
      margin: margin ?? EdgeInsets.symmetric(vertical: 10),
      padding: padding ?? EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
          color: backGroundColor ?? Colors.white,
          border: border ?? Border.all(color: gray),
          borderRadius: borderRadius ?? BorderRadius.circular(5)),
      
      child: DropdownButton<String>(
          icon: RotatedBox(
              quarterTurns: 1,
              child: endWidget ??
                  IconButton(
                      icon: Icon(
                        Icons.arrow_forward_ios,
                        size: 20,
                      ),
                      onPressed: null)),
          iconSize: 18,
          hint: Text(
            selectedValue ?? 'Select',
            style: style ??
                TextStyle(
                    fontSize: 16,
                    color: gray),
          ),
          isExpanded: true,
          underline: const SizedBox(),
          onChanged: (String newValue) => onChange(newValue),
          items: children.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Row(
                children: [
                  Text(value),
                  Spacer(),
                  (isSelected) ? Icon(Icons.verified_rounded) : SizedBox()
                ],
              ),
            );
          }).toList()),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以使用index 变量来检查选择了哪个项目。

// Index variable which stores which item is selected
int index = 0;

@override
Widget build(BuildContext context) {
   return Container(
      ...
      child: DropdownButton(
         ...
         items: children.asMap().entries.map((String v) {
           return DropdownMenuItem<String>(
             // v.value gives the value at that index
              value: v.value,
              child: Row(
                children: [
                  Text(value),
                  Spacer(),
                  // v.key will give the index 
                  // This checks if index is at that value or not
                  (index == v.key) ? Icon(Icons.verified_rounded) : SizedBox()
                ],
              ),
            );
         }).toList(),
      ),
   );
}

如果您有任何疑问，请发表评论。

【讨论】：