Flutter中如何利用Autocomplete组件在文本框上方显示自动建议？

默认的Flutter Autocomplete 组件会将建议列表显示在文本框下方，要实现上方显示的效果，只需自定义optionsViewBuilder参数调整布局即可，以下是完整实现方案：

核心实现代码 #

import 'package:flutter/material.dart';

void main() => runApp(const AutocompleteTopDemo());

class AutocompleteTopDemo extends StatelessWidget {
  const AutocompleteTopDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('文本框上方建议示例')),
        body: const Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: TopAlignedAutocomplete(),
        ),
      ),
    );
  }
}

class TopAlignedAutocomplete extends StatelessWidget {
  const TopAlignedAutocomplete({super.key});

  // 模拟的建议数据源
  static const List<String> _suggestions = [
    'Flutter', 'Dart', 'Android', 'iOS', 'Web', 'Desktop'
  ];

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      // 自定义建议列表的位置与样式
      optionsViewBuilder: (context, onSelected, options) {
        return Align(
          // 将建议框对齐到文本框顶部上方
          alignment: Alignment.topLeft,
          child: Material(
            elevation: 4,
            borderRadius: BorderRadius.circular(4),
            child: SizedBox(
              width: MediaQuery.of(context).size.width - 32,
              child: ListView.builder(
                shrinkWrap: true,
                padding: const EdgeInsets.all(8),
                itemCount: options.length,
                itemBuilder: (context, index) {
                  final String option = options.elementAt(index);
                  return ListTile(
                    title: Text(option),
                    onTap: () => onSelected(option),
                  );
                },
              ),
            ),
          ),
        );
      },
      // 根据输入过滤建议项
      optionsBuilder: (textEditingValue) {
        if (textEditingValue.text.isEmpty) return const [];
        return _suggestions.where((option) =>
          option.toLowerCase().contains(textEditingValue.text.toLowerCase())
        );
      },
      // 自定义文本输入框
      fieldViewBuilder: (context, controller, focusNode, onSubmitted) {
        return TextField(
          controller: controller,
          focusNode: focusNode,
          onSubmitted: (_) => onSubmitted(),
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            hintText: '输入技术关键词',
          ),
        );
      },
    );
  }
}

关键细节说明 #

• optionsViewBuilder：这是实现建议框位置调整的核心，通过Align组件设置alignment: Alignment.topLeft，让建议列表对齐到文本框的上方区域。
• 布局适配：使用SizedBox设置建议框宽度与文本框一致，保证整体布局的协调性；shrinkWrap: true让列表高度自适应内容。
• 交互逻辑：点击建议项时通过onSelected回调将选中内容填入文本框，保持Autocomplete的原生交互体验。

内容的提问来源于stack exchange，提问作者Nilundone Detluexay