Flutter Autocomplete optionsViewBuilder宽高设置失败，如何自定义？

我尝试通过optionsViewBuilder为Flutter的Autocomplete组件设置自定义宽高，但没有成功，请问该怎么实现？

问题截图：

我的代码示例：

child: Autocomplete<User>(
  displayStringForOption: _displayStringForOption,
  optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return const Iterable<User>.empty();
    }
    return _userOptions.where((User option) {
      return option
          .getName()
          .contains(textEditingValue.text);
    });
  },
  optionsViewBuilder: (context, onSelected, options) {
    return Container(
      height: 100,
      width: 150,
      color: Colors.white,
    );
  },
  onSelected: (User selection) {
    debugPrint('You just selected ${_displayStringForOption(selection)}');
  },
),

解决方法 #

你之前的代码存在两个核心问题：一是仅返回空容器，未渲染实际选项列表；二是Autocomplete的选项视图受默认布局约束影响，直接设置宽高无法生效。可以通过以下方式修改：

1. 构建带自定义宽高的选项列表 #

在optionsViewBuilder中，需用列表组件包裹选项，同时通过约束组件指定宽高，还要适配Autocomplete的弹出层上下文：

optionsViewBuilder: (context, onSelected, options) {
  return Align(
    alignment: Alignment.topLeft,
    child: Material(
      elevation: 4.0,
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          maxHeight: 200, // 限制最大高度
          minWidth: 180, // 自定义宽度
        ),
        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, vertical: 8),
                child: Text(_displayStringForOption(option)),
              ),
            );
          },
        ),
      ),
    ),
  );
},

2. 关键细节说明 #

• Material组件：必须包裹，Autocomplete弹出层依赖它处理阴影和交互逻辑。
• ConstrainedBox：强制设置宽高约束，突破父布局的限制。
• Align组件：控制选项视图的弹出位置，默认对齐输入框，可按需调整。
• ListView.builder：高效渲染选项列表，shrinkWrap: true让列表高度适配内容，结合maxHeight限制最大显示高度。

3. 固定宽高的简化写法 #

如果需要固定宽高而非约束范围，可直接用SizedBox替代ConstrainedBox：

optionsViewBuilder: (context, onSelected, options) {
  return Align(
    alignment: Alignment.topLeft,
    child: Material(
      elevation: 4,
      child: SizedBox(
        width: 220, // 固定宽度
        height: 160, // 固定高度
        child: ListView.builder(
          padding: EdgeInsets.zero,
          itemCount: options.length,
          itemBuilder: (context, index) {
            final option = options.elementAt(index);
            return ListTile(
              title: Text(_displayStringForOption(option)),
              onTap: () => onSelected(option),
            );
          },
        ),
      ),
    ),
  );
},

内容的提问来源于stack exchange，提问作者Fuad Saneen