0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Flutter 组件: Autocomplete 自动填充 | 开发者说·DTalk

谷歌开发者 来源:未知 2022-11-10 11:30 次阅读

本文原作者: 张风捷特烈,原文发布于: 编程之王


简单来说,Autocomplete 意为自动填充。其作用就是在输入时,进行关键字联想。在输入框下方展示列表,如下所示: 注意,这是目前 Flutter 框架内部的组件,非三方组件。目前已收录入 FlutterUnit,下面效果的源码详见之,大家可以更新查看体验:

FlutterUnit 中

输入时联想效果

下面是动态搜索的效果展示:



Autocomplete 组件最简代码


我们先一步步来了解 Autocomplete 组件,先实现如下的最简代码:

使用 Autocomplete 时,必须提供的是 optionsBuilder 参数,另外可以通过 onSelected 回调来监听选中的条目。


Autocomplete(
optionsBuilder:buildOptions,
onSelected:onSelected,
)

optionsBuilder 是一个 AutocompleteOptionsBuilder 类型的函数,从下面的定义中可以发现,该函数会回调 TextEditingValue 对象,且返回 FutureOr>。这说明这个函数是一个异步函数,我们可以在此进行网络请求,数据库查询等工作,来返回一个 Iterable 的可迭代对象。


用脚指头想一下也知道,这个可迭代对象,就决定着输入框下面的联想词是哪些。
finalAutocompleteOptionsBuilderoptionsBuilder;


typedefAutocompleteOptionsBuilder=
FutureOr>Function(TextEditingValuetextEditingValue);

比如下面通过 searchByArgs 模拟网络请求,通过 args 参数搜索数据:
FutureString>> searchByArgs(String args) async{
//模拟网络请求
awaitFuture.delayed(constDuration(milliseconds:200));
constList<String>data=[
'toly','toly49','toly42','toly56',
'card','ls','alex','fansha',
];
returndata.where((Stringname)=>name.contains(args));
}


这样,buildOptions 的逻辑如下,这就完成了输入--> 搜索 --> 展示联想词的流程。这也是 Autocomplete 组件最简单的使用。

FutureString>> buildOptions( TextEditingValue textEditingValue ) async {
if(textEditingValue.text==''){
returnconstIterable<String>.empty();
}
returnsearchByArgs(textEditingValue.text);
}



自定义 Autocomplete 组件内容


其实上面那样的默认样式很丑,而且没有提供直接的属性设置样式。所以了解如何自定义是非常关键的,否则只是一个玩具罢了。如下,我们先来实现搜索高亮显示的自定义,其中也包括对输入框的自定义。


Autocomplete 中提供了 fieldViewBuilderoptionsViewBuilder 分别用于构造输入框浮层面板

如下,代码中通过 _buildOptionsView_buildFieldView 进行相应组件构造:
Autocomplete(
optionsBuilder:buildOptions,
onSelected:onSelected,
optionsViewBuilder:_buildOptionsView,
fieldViewBuilder:_buildFieldView,
);


如下是 _buildOptionsView 方法的实现,其中会回调 onSelected 回调函数,和 options 数据,我们需要做的就是依靠数据,构建组件进行展示即可。另外,默认浮层面板和输入框底部平齐,可以通过 Padding 进行下移。另外,由于是浮层,展示文字时,上面需要嵌套 Material 组件。

至于高亮某个关键字,下面是我封装的一个小方法,拿来即用:
---->[高亮某些文字]----
finalTextStylelightTextStyle=constTextStyle(
color:Colors.blue,
fontWeight:FontWeight.bold,
);
InlineSpanformSpan(Stringsrc,Stringpattern){
Listspan=[];
Listparts=src.split(pattern);
if(parts.length>1){
for(inti=0;i< parts.length; i++) {
span.add(TextSpan(text:parts[i]));
if(i!=parts.length-1){
span.add(TextSpan(text:pattern,style:lightTextStyle));
}
}
}else{
span.add(TextSpan(text:src));
}
returnTextSpan(children:span);
}


另外,对于输入框的构建,通过如下的 _buildFieldView 实现,其中有 _controller 记录一下 TextEditingController,是因为 optionsViewBuilder 回调中并没有回调输入的 arg 字符,所以想要输入的关键字高亮,只能出此下策。这样,在 TextFormField 构建时,您可以指定自己需要的装饰。

到此,我们就实现了上面,输入过程中,浮层面板内容关键字高亮显示的效果。



关于Autocomplete 中的泛型


泛型的作用非常明显,它最主要的是对浮层面板的构建,如果浮层中的条目不止是 String,我们就需要使用泛型,来提供某个的数据类型。比如下面的效果,其中浮层面板的条目是可以显示更多的信息:

先定义一个数据类 User,记录信息:
class User {
finalStringname;
finalboolman;
finalStringimage;


constUser(this.name,this.man,this.image);


@override
StringtoString(){
return'User{name:$name,man:$man,image:$image}';
}
}


然后在 Autocomplete 的泛型中使用 User 即可。

这样在 _buildOptionsView 中,回调的就是 User 的可迭代对象。如下,封装一个 _UserItem 组件,对条目进行显示。



Autocomplete 源码简看


Autocomplete 本质上依赖于 RawAutocomplete 组件进行构建,可见它是一层简单的封装,简化使用。为我们提供了默认的 optionsViewBuilderfieldViewBuilder,显示一个很丑的界面。也就是说,如果您了解如何定制这两部分内容,您也就会了 RawAutocomplete 组件。

我们先看一下 AutocompleteoptionsViewBuilder 提供的默认显示,其返回的是 _AutocompleteOptions 组件。如下,其实和我们自己实现的也没有太大的区别,只是个默认存在,方便使用的小玩意而已。

另外,对于输入框的构建,使用 _defaultFieldViewBuilder 静态方法完成。

该方法,返回 _AutocompleteField 组件,本质上也就是构建了一个 TextFormField 组件。


Autocomplete 来说,只是 RawAutocomplete 套了个马甲,本质上的功能还是在 RawAutocomplete 的状态类中完成的。如下是 _RawAutocompleteState 的部分代码,可以看出这里的浮层面板,是通过 Overlay 实现的,另外通过 CompositedTransformTargetCompositedTransformFollower 对浮层进行定位。

那本文就这样,如果想简单地实现搜索联想词,Autocomplete 是一个很不错的选择。




长按右侧二维码

查看更多开发者精彩分享




"开发者说·DTalk" 面向中国开发者们征集 Google 移动应用 (apps & games) 相关的产品/技术内容。欢迎大家前来分享您对移动应用的行业洞察或见解、移动开发过程中的心得或新发现、以及应用出海的实战经验总结和相关产品的使用反馈等。我们由衷地希望可以给这些出众的中国开发者们提供更好展现自己、充分发挥自己特长的平台。我们将通过大家的技术内容着重选出优秀案例进行谷歌开发技术专家 (GDE)推荐



 点击屏末||即刻报名参与"开发者说·DTalk"





原文标题:Flutter 组件: Autocomplete 自动填充 | 开发者说·DTalk

文章出处:【微信公众号:谷歌开发者】欢迎添加关注!文章转载请注明出处。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 谷歌
    +关注

    关注

    27

    文章

    6128

    浏览量

    105021

原文标题:Flutter 组件: Autocomplete 自动填充 | 开发者说·DTalk

文章出处:【微信号:Google_Developers,微信公众号:谷歌开发者】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0

    # 使用 Flutter SDK 3.22.0 ## SDK 安装 参考[鸿蒙Flutter实战:01-搭建开发环境]文章的说明,首先安装 Flutter SDK 3.22.0。
    发表于 11-01 15:03

    鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙

    # 鸿蒙Flutter实战:现有Flutter项目支持鸿蒙 ## 背景 原来使用Flutter开发的项目,需要适配鸿蒙。 ## 环境搭建 见文章[鸿蒙
    发表于 10-23 16:36

    鸿蒙Flutter实战:07混合开发

    。 其优点是主项目开发者可以不关注Flutter实现,不需要安装配置Flutter开发环境,缺点是无法及时修改Flutter代码,也不存在
    发表于 10-23 16:00

    鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件

    # 使用 ArkTs 开发 Flutter 鸿蒙平台插件 本文讲述如何开发一个 Flutter 鸿蒙插件,如何实现 Flutter 与鸿蒙
    发表于 10-22 21:56

    KaihongOS 4.1.2开发者预览版正式上线,诚邀开发者免费试用!

    深开鸿在2024开放原子开源生态大会上正式宣布KaihongOS4.1.2开发者预览版全面上线,并向全球开发者开放免费下载。作为KaihongOS不断创新与发展的重要里程碑,此次预览版为开发者提供了
    的头像 发表于 09-28 08:07 284次阅读
    KaihongOS 4.1.2<b class='flag-5'>开发者</b>预览版正式上线,诚邀<b class='flag-5'>开发者</b>免费试用!

    KaihongOS 4.1.2开发者预览版正式上线,诚邀开发者免费试用!

    今日,深开鸿在2024开放原子开源生态大会上正式宣布KaihongOS 4.1.2开发者预览版全面上线,并向全球开发者开放免费下载。作为KaihongOS不断创新与发展的重要里程碑,此次预览版为
    的头像 发表于 09-26 15:59 402次阅读

    机智云开发者中心:让移动APP应用开发更智能化

    在移动应用市场的蓬勃发展中,开发者们面临着不断提高效率和创新的挑战。为了帮助开发者更好地实现移动应用开发的目标,机智云物联网的新版开发者中心,通过
    的头像 发表于 03-26 16:45 309次阅读
    机智云<b class='flag-5'>开发者</b>中心:让移动APP应用<b class='flag-5'>开发</b>更智能化

    华为宣布HarmonyOS NEXT鸿蒙星河版开发者预览面向开发者开放申请

    华为宣布HarmonyOS NEXT鸿蒙星河版开发者预览面向开发者开放申请,这意味着鸿蒙生态进入第二阶段,将加速千行百业的应用鸿蒙化。
    的头像 发表于 01-29 16:42 1350次阅读
    华为宣布HarmonyOS NEXT鸿蒙星河版<b class='flag-5'>开发者</b>预览面向<b class='flag-5'>开发者</b>开放申请

    开发者】HarmonyOS实践之应用状态变量共享

    # 开发者 # 【开发者】栏目是为HarmonyOS开发者提供的展示和分享平台,在这里,大家可以发表自己的技术洞察和见解,也可以展示自己
    的头像 发表于 12-26 21:20 751次阅读
    【<b class='flag-5'>开发者</b><b class='flag-5'>说</b>】HarmonyOS实践之应用状态变量共享

    大咖云集,2023 开放原子开发者大会助力开发者实现梦想

        12 月 16 日,以“一切为了开发者”为主题的开放原子开发者大会在无锡开幕。大会聚焦大模型、云原生、前端、自动驾驶、物联网、开源治理与开发者运营等多内容,汇聚顶尖开源人才,解
    的头像 发表于 12-22 09:57 825次阅读
    大咖云集,2023 开放原子<b class='flag-5'>开发者</b>大会助力<b class='flag-5'>开发者</b>实现梦想

    大咖云集,2023开放原子开发者大会助力开发者实现梦想

    12月16日,以“一切为了开发者”为主题的开放原子开发者大会在无锡开幕。大会聚焦大模型、云原生、前端、自动驾驶、物联网、开源治理与开发者运营等多内容,汇聚顶尖开源人才,解决行业发展的技
    的头像 发表于 12-18 16:05 500次阅读

    开发者开发案例:使用canvas实现图表系列之折线图

    # 开发者 # 【开发者】栏目是为HarmonyOS开发者提供的展示和分享平台,在这里,大家可以发表自己的技术洞察和见解,也可以展示自己
    的头像 发表于 12-13 16:05 580次阅读
    【<b class='flag-5'>开发者</b><b class='flag-5'>说</b>】<b class='flag-5'>开发</b>案例:使用canvas实现图表系列之折线图

    欢迎加入飞腾派开发者社区,感谢每一位开发者

    发烧友论坛一起策划了飞腾派开发板测评活动,受到了广大开发者的喜爱。 通过这次活动,飞腾派成功地吸引了众多高质量开发者的关注和参与,进一步扩大了其在开发者社区中的影响力。此次活动将电子
    发表于 12-11 16:11

    开发者开发案例分享:万能卡片也能用来玩游戏

    # 开发者 # 【开发者】栏目是为HarmonyOS开发者提供的展示和分享平台,在这里,大家可以发表自己的技术洞察和见解,也可以展示自己
    的头像 发表于 11-30 21:15 500次阅读
    【<b class='flag-5'>开发者</b><b class='flag-5'>说</b>】<b class='flag-5'>开发</b>案例分享:万能卡片也能用来玩游戏

    社区|开拓全球视野,赋能更高效的全球化应用开发

    在这个不断进步的数字化时代,创新和突破是每一位开发者的追求。而应用的全球化,则是开发者们面临的重要挑战和机遇。Flutter 作为跨平台的前沿 UI 框架,提供了高效的解决方案,帮助开发者
    的头像 发表于 11-21 17:45 344次阅读
    社区<b class='flag-5'>说</b>|开拓全球视野,赋能更高效的全球化应用<b class='flag-5'>开发</b>