Flutter - 更改 TextField 自动完成位置

Question

我正在使用Flutter的自动完成功能，但是我想让它在文本字段上方显示。这是可能的吗？

以下是基本设置：

Autocomplete<String>(
     optionsBuilder: (TextEditingValue textEditingValue) {
         if (textEditingValue.text == '') {
             return const Iterable<String>.empty();
         }

         if (textEditingValue.text.contains('...')) {
               return widget.myBloc.names
                   .where((String option) {
               return option.contains(
                    textEditingValue.text.toLowerCase());
               });
          } else {
             return const Iterable<String>.empty();
          }
      },
      onSelected: (String selection) {
         log('selection -> $selection');
      },
      optionsMaxHeight: 40,
      fieldViewBuilder: (context, controller, focusNode,
                              onEditingComplete) {
           return TextField();
      }
  )

- Luke Irvin

Answer 1

我弄明白了，但你可能不会喜欢答案...

在Flutter库中，在RawAutocomplete实现的第367行，他们硬编码其对齐方式以跟踪TextField的左下角。只有在复制了他们的整个实现之后，我才能绕过这个问题，然后执行以下操作：

1. 将第367行更改为targetAnchor: Alignment.topLeft
2. 添加参数followerAnchor: Alignment.bottomLeft
3. 在您的OptionViewsBuilder中（无论何时决定实现它），如在material Autocomplete实现中所示，更改为alignment: Alignment.bottomLeft。

- Edward Perpich

---

举个例子：您已经链接到一个18个月前的文件版本；该行目前在line 427，并且将随着对该文件的每次提交而再次更改。 - miken32

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时得到通知，您可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - Tejaswini Dev

@miken32 你说得对，我没有考虑到链接不是固定的。至于继承或可扩展性，我想你可能可以使用 @Override 方法，但你仍然可能需要复制原始实现。 - Edward Perpich

我已将上述建议的更改发布为一个包：https://pub.dev/packages/flutter_flipped_autocomplete - emersion

谢谢！这很有帮助！至少在特定的情况下它起作用了。简单明了。 - undefined