扑来 - 更改TextField自动完成位置

发布于 2025-02-01 13:49:18 字数 916 浏览 2 评论 0原文

我正在使用Flutter的自动完成,但我想将其显示在Textfield上方。这可能吗?

这是基本设置:

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();
      }
  )

I'm using Flutter's Autocomplete but I would like to have it display above the TextField. Is this possible?

Here's the base setup:

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();
      }
  )

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

演多会厌 2025-02-08 13:49:18

我发现了一下,但是您不喜欢答案...

在flutter图书馆中/widgets/autocomplete.dart#l367“ rel =“ nofollow noreferrer”>在Rawautocomplete实现的第367行上,他们对其对齐方式进行了硬编码以跟踪textfieldtextfield。我只能在复制其整个实施后才能绕过此操作,并执行以下操作:

  1. 将行367更改为targetandanter:alignment.topleft
  2. 添加参数followeranchor:alignment.bottomleft.bottomleft
  3. 在您的中OptionViewsBuilder wherever you decide to implement it,

I figured it out, but you're not gonna like the answer...

In the Flutter library, on line 367 of the RawAutocomplete implementation, they hardcoded its alignment to track the bottom left of the TextField. I was able to circumvent this only after copying their entire implementation, and doing the following:

  1. change line 367 to targetAnchor: Alignment.topLeft
  2. add parameter followerAnchor: Alignment.bottomLeft
  3. in your OptionViewsBuilder wherever you decide to implement it, shown here in the material Autocomplete implementation, change to alignment: Alignment.bottomLeft.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文