dropdown_search 如何在搜索字段上显示提示文本答案

【问题标题】：dropdown_search how to show hintText on search fielddropdown_search 如何在搜索字段上显示提示文本
【发布时间】：2022-09-29 16:40:59
【问题描述】：

DropdownSearch<T>(
      dropdownBuilder: (context, data) {
        return AutoSizeText(
          displayProperty(data) ?? \"\",
          maxLines: 1,
          style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 16),
        );
      },
      popupProps: PopupProps.menu(
        fit: FlexFit.loose,
        // showSelectedItems: true,
        // interceptCallBacks: true,
        itemBuilder: popupItemBuilder ??
            (context, data, selected) {
              return Container(
                margin: const EdgeInsets.symmetric(horizontal: 8),
                decoration: const BoxDecoration(
                  border: Border(bottom: BorderSide(color: Colors.black12)),
                ),
                child: ListTile(
                  title: Text(
                    displayProperty(data) ?? \"\",
                    maxLines: 1,
                    style: AppTheme.subtitle1,
                  ),
                ),
              );
            },
        showSearchBox: showSearchBox,
        emptyBuilder: (context, data) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Text(\"No Data in $label was found.\"),
          ),
        ),
      ),
      asyncItems: (String? data) => getData(),
      // focusNode: focusNode,
      onSaved: onSaved,
      selectedItem: value,
      validator: !isRequired
          ? null
          : validator ??
              (value) => value == null ? \"$label can\'t be empty\" : null,
      // mode: Mode.MENU,
      // showClearButton: enable,
      key: keyX,
      enabled: enable,

      // maxHeight: maxHeight,
      dropdownDecoratorProps: DropDownDecoratorProps(
        dropdownSearchDecoration: InputDecoration(
          labelText: label,
          errorMaxLines: 2,
          isDense: false,
          enabledBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: Colors.black45)),
          // border: const OutlineInputBorder(),
          errorBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
          ),
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.lightGreen),
          ),
        ),
      ),
      itemAsString: (data) => displayProperty(data) ?? \"\",
      onChanged: onChanged,
    );

标签： flutter

【解决方案1】：

它是空的，因为您使用空字符串构建字段。

displayProperty(data) ?? "", 当数据为空时返回空字符串。

DropdownSearch<T>(
  dropdownBuilder: (context, data) {
   return AutoSizeText(
      displayProperty(data) ?? "your Hint Text here",
      maxLines: 1,
      style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 16),
     );
   },
.......

更新

如果您想在弹出搜索字段中添加提示文本，您可以将其添加到您的代码中

searchBoxDecoration: InputDecoration(
                  border: OutlineInputBorder(),
                  contentPadding: EdgeInsets.fromLTRB(12, 12, 8, 0),
                  hintText: "hint goes here",
                )

你可以从插件所有者那里找到它：https://github.com/salim-lachdhaf/searchable_dropdown/issues/138#issuecomment-808702346

【讨论】：

谢谢先生，但我想在第二个搜索字段上显示hintText，就像我在上面分享的图片一样。
@hokkhai 你可以自定义 searchBoxDecoration。就像插件所有者在这里说的github.com/salim-lachdhaf/searchable_dropdown/issues/…。
我也更新了我的答案，如果它对您的问题有帮助，您可以投票。

【解决方案2】：

我像这样添加了我的，它起作用了。

DropdownSearch<dynamic>(
                      popupProps: const PopupProps.menu(
                          showSearchBox: true,
                          searchFieldProps: TextFieldProps(
                            decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              contentPadding:
                                  EdgeInsets.fromLTRB(12, 12, 8, 0),
                              hintText: "search staff...",
                            ),
                          )),

【讨论】：