Flutter Autocomplete TextFormField右侧溢出屏幕问题求助

Autocomplete下拉框超出屏幕，本质是默认的选项视图没有正确继承父组件的宽度约束。可以通过自定义optionsViewBuilder来显式限制下拉框的宽度，确保它不会超出屏幕范围。

修改后的完整代码 #

// ********** Item Type Auto Compleate Start
InputDecorator(
  decoration: const InputDecoration(
    icon: Icon(Icons.style),
    border: InputBorder.none,
  ),
  child: Autocomplete<String>(
    optionsBuilder: (TextEditingValue textEditingValue) {
      if (textEditingValue.text == '') {
        return itemTypeList;
      }
      return itemTypeList.where((String option) {
        return option
            .toLowerCase()
            .contains(textEditingValue.text.toLowerCase());
      });
    },
    // 自定义选项视图构建器，解决宽度溢出问题
    optionsViewBuilder: (context, onSelected, options) {
      return Align(
        alignment: Alignment.topLeft,
        child: Material(
          elevation: 4.0,
          child: ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: 200.0, // 限制下拉框最大高度
              maxWidth: MediaQuery.of(context).size.width * 0.9, // 限制最大宽度为屏幕90%
              // 如果要和输入框宽度完全匹配，可以根据输入框的实际宽度调整，比如：
              // width: MediaQuery.of(context).size.width - 48.0, // 减去左侧图标和padding的宽度
            ),
            child: ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              itemCount: options.length,
              itemBuilder: (context, index) {
                final option = options.elementAt(index);
                return InkWell(
                  onTap: () => onSelected(option),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                    child: Text(option),
                  ),
                );
              },
            ),
          ),
        ),
      );
    },
    fieldViewBuilder: (context, controller, focusNode, onEditingComplete) {
      itemTypeController = controller;

      return Focus(
        onFocusChange: (hasFocus) {
          if (temperatureItemTypes.contains(itemTypeController.text.trim())) {
            setState(() {
              temperatureField = true;
            });
          } else {
            setState(() {
              temperatureField = false;
            });
          }
          if (volumeItemTypes.contains(itemTypeController.text.trim())) {
            setState(() {
              volumeField = true;
            });
          } else {
            setState(() {
              volumeField = false;
            });
          }
        },
        child: TextFormField(
          controller: controller,
          focusNode: focusNode,
          onEditingComplete: onEditingComplete,
          decoration: const InputDecoration(
            labelText: "Item type*",
            hintText: 'What is the item?',
          ),
        ),
      );
    },
  ),
),

关键调整说明 #

• optionsViewBuilder自定义：通过该参数完全控制下拉选项的布局，替代默认的无约束视图。
• ConstrainedBox限制宽度：用maxWidth约束下拉框的最大宽度，既可以设置为屏幕比例（如90%），也可以根据输入框的实际宽度精确计算（减去左侧图标、padding等宽度）。
• Align对齐输入框：确保下拉框和输入框的左上角对齐，保持视觉一致性。
• Material和ListView.builder：模拟默认Autocomplete的视觉样式，同时保证长列表的滚动性能。

如果需要更精确的宽度匹配，可以通过LayoutBuilder获取InputDecorator的约束宽度，替换MediaQuery的计算方式，例如：

optionsViewBuilder: (context, onSelected, options) {
  return LayoutBuilder(
    builder: (context, constraints) {
      return Align(
        alignment: Alignment.topLeft,
        child: Material(
          elevation: 4.0,
          child: ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: 200.0,
              maxWidth: constraints.maxWidth, // 完全继承父组件的宽度
            ),
            child: ListView.builder(
              // ... 其他代码不变
            ),
          ),
        ),
      );
    },
  );
},

内容的提问来源于stack exchange，提问作者Ten Digit Grid