flutter - 如何在下拉列表中添加分隔符？

Question

我有以下下拉列表：

DropdownButtonFormField(
        isExpanded: true,
        isDense: true,
        value: dropdownValue,
        icon: SvgPicture.asset(
          AppImages.ic_expand_dropdown,
        ),
        iconDisabledColor: AppColors.colorDarkGray,
        iconEnabledColor: AppColors.colorDarkGray,
        focusNode: widget.focusNode,
        validator: widget.validator,
        decoration: InputDecoration(
          label: widget.widgetLabel,
          labelStyle:
              widget.labelStyle ?? AppTextStyles.transparentBlueDark16(),
          labelText: widget.isLabelRes
              ? AppLocales.getTextOrNull(widget.label)
              : widget.label,
          fillColor: Colors.white,
          filled: true,
          hintText: widget.pickerPlaceholder,
          hintStyle: widget.hintStyle ?? AppTextStyles.alto16(),
          alignLabelWithHint: true,
          errorText: widget.isErrorRes
              ? AppLocales.getTextOrNull(widget.error)
              : widget.error,
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 0,
            vertical: 0,
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color:
                  widget.enabledBorderColor ?? AppColors.colorInputBorder,
            ),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: widget.focusedBorderColor ?? AppColors.colorAccent,
            ),
          ),
          errorBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: AppColors.colorError,
            ),
          ),
          border: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color: widget.borderColor ?? AppColors.colorInputBorder,
            ),
          ),
        ),
        style: AppTextStyles.grayDark16(
          fontWeight: AppFontWeight.medium,
        ),
        onChanged: (String? newValue) {
          dropdownValue = newValue;
          widget.onChanged(dropdownValue!);
        },
        items: widget.pickerList.map<DropdownMenuItem<String>>((value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    ),
                  ),
                  child: Text(
                    value,
                    style: AppTextStyles.grayDark16(
                      fontWeight: AppFontWeight.medium,
                    ),
                  ),
                ),
                Visibility(
                  child: Divider(
                    color: AppColors.colorEden10,
                    height: 2.0,
                    indent: 10.0,
                    endIndent: 10.0,
                  ),
                  visible: widget.pickerList.last != value,
                ),
              ],
            ),
          );
        }).toList(),
      ),

我需要显示项目之间的分隔线。由于我没有找到任何将其添加到列表中的选项，因此我通过创建一个包含文本和分隔符的列来添加分隔符，在某些情况下会显示该列。但问题是，当我选择项目分隔符时，结果也会显示在下拉列表中，我看不到任何选项可以在此处隐藏它。有没有办法在选择项目后添加分隔线而不显示它？

标签： flutter

Answer 1

为避免选中项目分隔符，我们需要使用selectedItemBuilder:. 默认情况下，它使用items布局。

你可以使用DropdownButtonFormField喜欢

 selectedItemBuilder: (context) => widget.pickerList
          .map(
            (text) => Text(text),
          )
          .toList(),

您可以设置自己的逻辑来创建 UI。简化的状态片段是

  late List<DropdownMenuItem<String>> menuItems = [];

  @override
  void initState() {
    super.initState();
    dropdownValue = widget.pickerList.first;

    for (int i = 0; i < widget.pickerList.length; i++) {
      //* on 1st index there will be no divider
      i == 0
          ? menuItems.add(
              DropdownMenuItem<String>(
                child: Text(
                  widget.pickerList[i],
                ),
                value: widget.pickerList[i],
              ),
            )
          : menuItems.add(
              DropdownMenuItem<String>(
                child: Container(
                  width: double.maxFinite,
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(
                    top: 6, // adjust the way you like
                  ),
                  decoration: const BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: Colors.grey,
                        width: 2,
                      ),
                    ),
                  ),
                  child: Text(
                    widget.pickerList[i],
                  ),
                ),
                value: widget.pickerList[i],
              ),
            );
    }
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<String>(
      isExpanded: true,
      isDense: true,
      value: dropdownValue,
      onChanged: (String? newValue) {
        // dropdownValue = newValue;
        // widget.onChanged(dropdownValue!);
      },
      items: menuItems,
      selectedItemBuilder: (context) => widget.pickerList
          .map(
            (text) => Text(text),
          )
          .toList(),
    );
  }