首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

reactive_forms自定义小部件中的Flutter typeahead textField不显示选定的选项文本

reactive_forms是一个用于Flutter的表单库,它提供了一种响应式的方式来处理表单输入和验证。在reactive_forms中,可以使用自定义小部件来扩展表单的功能。

在使用reactive_forms的自定义小部件时,如果想要使用typeahead textField,并且希望选定的选项文本能够显示出来,可以按照以下步骤进行操作:

  1. 首先,确保已经安装了reactive_forms库。可以在pubspec.yaml文件中添加以下依赖项:
代码语言:txt
复制
dependencies:
  reactive_forms: ^0.13.0

然后运行flutter pub get命令来获取依赖项。

  1. 在Flutter代码中导入所需的包:
代码语言:txt
复制
import 'package:reactive_forms/reactive_forms.dart';
  1. 创建一个自定义小部件,继承自ReactiveFormField类,并实现必要的方法。在这个自定义小部件中,可以使用typeahead textField来实现自动完成的功能。
代码语言:txt
复制
class CustomTypeaheadField<T> extends ReactiveFormField<T> {
  CustomTypeaheadField({
    required String formControlName,
    required List<T> options,
    required String Function(T) displayText,
    required T Function(String) findOption,
  }) : super(
          formControlName: formControlName,
          builder: (field) {
            final formControl = field.control as FormControl<T>;
            final selectedOption = formControl.value;

            return TypeAheadFormField<T>(
              textFieldConfiguration: TextFieldConfiguration(
                decoration: InputDecoration(
                  labelText: 'Typeahead Field',
                ),
              ),
              suggestionsCallback: (pattern) {
                return options.where((option) {
                  final optionText = displayText(option);
                  return optionText.toLowerCase().contains(pattern.toLowerCase());
                }).toList();
              },
              itemBuilder: (context, suggestion) {
                final optionText = displayText(suggestion);
                return ListTile(
                  title: Text(optionText),
                );
              },
              onSuggestionSelected: (suggestion) {
                final optionText = displayText(suggestion);
                formControl.value = suggestion;
                formControl.markAsDirty();
              },
              validator: (value) {
                if (formControl.invalid) {
                  return 'Invalid value';
                }
                return null;
              },
              initialValue: selectedOption,
            );
          },
        );
}
  1. 在使用这个自定义小部件的地方,将其添加到表单中。可以使用ReactiveForm来创建表单,并将自定义小部件添加为表单的一个字段。
代码语言:txt
复制
ReactiveForm(
  formGroup: form,
  child: Column(
    children: [
      CustomTypeaheadField<String>(
        formControlName: 'typeaheadField',
        options: ['Option 1', 'Option 2', 'Option 3'],
        displayText: (option) => option,
        findOption: (text) => text,
      ),
      ElevatedButton(
        onPressed: () {
          if (form.valid) {
            // 表单验证通过,执行相应操作
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
);

在上述代码中,CustomTypeaheadField是一个自定义的小部件,它接受formControlName、options、displayText和findOption等参数。options是一个包含选项的列表,displayText是一个将选项转换为显示文本的函数,findOption是一个将文本转换为选项的函数。

通过以上步骤,就可以在reactive_forms的自定义小部件中使用typeahead textField,并且能够显示选定的选项文本。

关于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或者咨询腾讯云官方客服获取更详细的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutte部件目录-Material Components 顶

实现Material Design指南视觉,行为和运动丰富部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录更多小部件。...TabBarView 显示与当前选定选项卡相对应部件页面视图。 通常与TabBar结合使用。 ?...输入和选择 TextField 触摸文本字段将放置光标并显示键盘。 TextField部件实现了这个组件。 ? Checkbox 复选框允许用户从一组中选择多个选项。...芯片代表小块复杂实体,如联系人。 ? Tooltip 工具提示提供文本标签可帮助解释按钮或其他用户界面操作功能。...将按钮封装在工具提示窗口小部件,以便在按下窗口小部件时(或者当用户采取其他适当操作时)显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品

9.4K40

Flutter | 常用组件

之所以这样做,就是应为 Text 本身就是 RichText 一个包装,而 RichText 是可以显示多种样式(富文本) widget,样式如下: 字体 在 flutter 中使用字体需要两个步骤...,使用 FadeInImage 之后会在图片加载过程显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter ,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同字符而现实不同图片...而在 iconfont ,只是将位码对应字形做成了图标,所以不同字符最终就会渲染成不同图标 在 Flutter ,iconfont 和图片相比有如下优势 1,体积 2,矢量图标,放大不会影响清晰度...大多数情况下我们都需要显示提供一个 controller 来与文本框交互,如果没有提供,则 TextField 会自动创建一个 focusNode :用于控制 TextField 是否占有当前键盘输入焦点...,//TODO 这里设置生效,日后解决 表单 Form 在实际开发,在请求接口之前会对输入框数据进行校验,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个

11.4K30

如何在 Flutter 设置背景图像【Flutter专题16】

本教程将向您展示如何在 Flutter 设置背景图像。 在 Flutter 应用程序设置背景图像常用方法是使用DecorationImage....在移动设备上,当用户与文本字段交互时,通常会显示屏幕键盘。...小部件是当前焦点节点,则会显示屏幕键盘。...正如您在上面的输出中看到那样,当显示键盘时,部分内容是不可见。一种可能解决方法是将 Scaffold 包裹在带有背景图像 Container 。...还可以定义图像应如何刻入可用空间并设置图像不透明度。如果应用程序包含可能触发屏幕键盘文本字段,您还需要处理如上所示情况。 对于其他自定义,您可以阅读我们教程,?

11.2K21

Flutter 旋转轮

在在本文中,我们将探讨 “Flutter 旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项「Spinwheel」演示程序。...它将在您设备上显示所选文本。...**hideOthers:**此属性用于确定是否应绘制快门以隐藏除选定以外所有选项。 **shutterPaint:**如果适用,此属性用于绘制用于绘制快门设置。此外,它是可定制。...**在此构建器,我们将添加itemCount和itemBuilder。在itemBuilder,我们将导航容器小部件。在小部件内,我们将添加一个边距,即容器高度。...他子属性,我们将添加一个列小部件。在此小部件,我们将添加两个文本,分别是问题和答案。

8.7K20

flutter 输入框组件TextField实现代码

TextField 顾名思义文本输入框,类似于iOSUITextField和AndroidEditText和WebTextInput。主要是为用户提供输入文本提供方便。...相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField用法。...TextCapitalization TextField提供了一些有关如何使用户输入字母大写选项。...更改TextField光标 可以直接从TextField部件自定义游标。 可以更改角落光标颜色,宽度和半径。 例如,这里我没有明显原因制作一个圆形红色光标。...控制TextField大小和最大长度 TextFields可以控制在其中写入最大字符数,最大行数并在键入文本时展开。 TextField( maxLength: 4, ), ?

4.7K11

Flutter 中使用Chip 小部件Flutter专题30】

本文是关于 Flutter Chip 小部件。我们将大致了解小部件基本原理,然后通过代码来实现它。事不宜迟,让我们开始吧。 概述 典型chip是一个圆角小盒子。...它有一个文本标签,并以一种有意义且紧凑方式显示信息。chip可以在同一区域同时显示多个交互元素。...可删除内容列表(一系列电子邮件联系人、最喜欢音乐类型列表等)。 img 在 Flutter ,您可以使用以下构造函数来实现 Chip 小部件: Chip({ Key?...shadowColor }) 只有label属性是必需,其他是可选。一些常用有: avatar:在标签前显示一个图标或图像。 backgroundColor : chip背景颜色。...您可以在官方文档中找到有关其他属性更多详细信息。但是,对于大多数应用程序,我们不需要超过一半。 简单示例 这个例子向您展示了一种同时显示多个chip简单使用方法。

2.8K20

探索 Flutter NavigationRail:使用详解

NavigationRailDestination( label: Text('Home'), // 自定义标签文本 // 其他属性... ) 通过使用上述自定义选项,您可以轻松地根据应用程序需求和设计风格定制...您可以将不同页面放置在 IndexedStack ,并根据导航栏选定项设置索引来显示相应页面。...当用户点击导航栏选项时,onDestinationSelected 回调函数会被调用,并根据选定索引来更新 _selectedIndex。...您可以使用 leading 和 trailing 属性来实现在导航栏添加额外元素,例如标签、按钮或其他自定义部件。...灵活自定义选项: NavigationRail 提供了丰富自定义选项,包括背景色、选中项颜色、标签类型等,使开发人员可以根据应用程序设计和品牌风格定制导航栏外观。

26210

Flutter应用程序添加交互性 顶

如何创建自定义部件。 无状态和有状态小部件之间区别。 你如何修改你应用程序,使其对用户输入做出反应? 在本教程,您将为仅包含非交互式小部件应用添加交互性。...当小部件状态改变时,状态对象调用setState(),告诉框架重绘小部件。 在本节,您将创建一个自定义有状态小部件。...第4步:将有状态小部件插入小部件 将您自定义状态小部件添加到应用构建方法部件。...开发人员可能不在乎突出显示是如何管理,并且倾向于轻敲框处理这些细节。 Dart代码:lib/main.dart 其它交互式小部件 Flutter提供各种按钮和类似的交互式小部件。...处理手势,Flutter Widget框架导览一部分:如何创建按钮并使其响应输入。 Flutter手势:Flutter手势机制描述。

4.2K20

flutter  TextField换行自适应实现

无论哪种界面框架输入文本框都是非常重要控件, 但是发现flutter输入框TextField介绍虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能介绍都是比较陈旧属性....现在就需要一个类似微信输入文本框, 这样一个非常实用效果flutter要如何实现?...前提是尽量用已有属性,少写或写代码. 先明确这种输入文本框有哪些功能点? 能够自定义各种间距.主要是控件外边距(margin); 内间距(padding); 能够自定义样式....如果以数值方式指定控件最大高度很容易发生文本被截断现象. 1,2,3在flutter是非常方便, decoration属性可以满足几乎一切自定义样式. 4,也麻烦, 现在keyboardType...这时候需要用到InputDecorationisDense, 去掉冗余边距, 只显示指定contentPadding 另外一个需要注意点是, TextField父节点千万不要是ConstrainedBox

2.3K21

Flutter 全栈式——基础控件

Flutter,UI控件有两种设计风格,一种是Material设计,这是安卓官方设计风格,另一种则是Cupertino风格,是iOS官方设计风格。...文本显示样式 textAlign TextAlign 文本对齐方式 textDirection TextDirection 文本显示方向 softWrap bool 是否自动换行 overflow...clip:剪辑溢出文本;fade:将溢出文本淡化为透明;ellipsis:用省略号表示溢出;visible:在容器之外显示溢出文本 textScaleFactor double 每个逻辑像素字体像素值...简单说就是字体缩放系数 maxLines int 文本最多可显示行数。如果文本超过给定行数,则根据溢出规则截断 textSpan TextSpan 以TextSpan方式显示文本。...,这9个点其实就是八个方向加上正中 gaplessPlayback bool 当ImageProvider发生变化时,显示新图片过程,如果值为true则保留旧图片直至显示出新图片为止;如果false

3.8K40

使用Flutter和Dart开发跨平台移动应用详细教程

步骤1:安装Flutter和Dart首先,确保你系统已经安装了Flutter和Dart。..., ), ), ); }}这个简单应用程序包含一个带有标题顶部栏和一个居中显示文本部分。...步骤4:运行应用程序在命令行运行以下命令,启动你应用程序:flutter run这将启动应用程序并在模拟器或连接设备上运行。步骤5:定制你应用程序开始修改代码,根据你需求自定义应用程序。...你可以添加新部件、页面、样式,以及与后端服务交互等。高级主题1. 使用Flutter部件Flutter拥有丰富部件库,可帮助你构建漂亮用户界面。...例如,你可以使用ListView创建滚动列表,TextField添加文本输入框,以及FlatButton创建可点击按钮。

28110

Flutter 自定义动画底部导航栏

在这个博客,我们将探索Flutter自定义动画底部导航栏。我们将看到如何实现自定义动画底部导航栏演示程序以及如何在您 Flutter 应用程序中使用它。...介绍: 显示在应用程序底部Material小部件,用于在几个视角中进行选择,通常在 3 到 5 范围内某个位置。底部导航栏包含各种选项,如文本标签、图标或两者。...它展示了自定义底部导航栏将如何在您 Flutter 应用程序工作。它显示当用户点击底部导航栏图标时,它们将被动画化并显示标签文本。当用户点击任何图标时,颜色也会发生变化和动画。...它将显示在您设备上。 特性 自定义动画底部导航栏一些属性是: selectedIndex:这个属性用于被选中项是一个索引。更改此属性将更改所选项目并为其设置动画。默认为零。...这是我对用户交互自定义动画底部导航栏一个介绍。

8.8K30

Flutter】评级对话框组件

扑朔迷离一切都是小部件! 向用户显示一些知识是一个了不起想法,这是我们使用对话框最基本想法。在Flutter这个惊人UI工具包,我们有几种不同方法来构建对话框。...在在本博客,我们将探讨「Flutter“「评级对话框”」。我们将看到如何使用flutter应用程序「rating_dialog」包来实现美观评级对话框演示程序并进行自定义。...在小部件内,我们将添加一个Center小部件,并且其子属性添加一个「MaterialButton()。「在此按钮,我们将添加文本,颜色,按钮形状和onPressed方法。...在此对话框,我们将添加」ratingColor」表示评级栏(星形图标和发光效果)颜色,「标题」,「消息」表示对话框消息/描述文本,「图像」,「submitButton」表示提交按钮标签/文本,「...当我们运行应用程序时,我们应该获得屏幕输出,如屏幕下方截图所示。 在此对话框,您将看到我们将添加图像,标题,描述,星级,评论textField和最后一个提交按钮。

4K50

Flutter 1.22 正式发布

举例来说,假设您想在首页上显示一系列小部件,并允许用户点击一个小部件以转到专门针对该颜色详细信息页面。 ?...这个想法是要在导航和Flutter其余部分之间统一模型,同时解决许多问题并添加功能。实际上,这个例子几乎涉及Navigator 2.0内容。...我们已经在Scrollable类中提供了支持,例如ListView和SingleChildScrollView(记住用户滚动位置)和TextField(恢复他们输入文本),并且我们计划将其扩展到其他小部件...预览:平滑滚动以提供匹配输入和显示频率 当输入和显示频率不同时,Flutter团队与Google内部合作伙伴合作,极大地提高了滚动性能。...例如,Pixel 4输入运行频率为120hz,而显示运行频率为90hz。滚动时,这种匹配会导致性能下降。

7.4K20

【老孟FlutterFlutter 2 新增功能

此外,内置上下文菜单已添加到Material和Cupertino设计语言TextField和TextFormField小部件。最后,添加了抓手 到ReorderableListView小部件。...举例来说,假设您应用包含以下代码行: 使用不推荐使用参数创建Flutter部件 由于不赞成使用此构造函数参数,因此应将其替换为以下内容: 图片发布 创建一个Flutter部件,其中推荐使用参数已替换...例如,以下内容显示应用程序已引发溢出异常,该异常会在Visual Studio Code中弹出一个选项,用于调试DevTools问题。...要启用此功能,请在Flutter Inspector启用“反转超大图像”。 图片发布 启用“反转超大图像”选项,以突出显示比需要放大图像大图像。...图片发布 实际应用“反转超大图像”选项 此外,根据大众需求,除了在Flutter Inspector“布局资源管理器”显示有关灵活布局详细信息外,我们还添加了显示固定布局功能,使您能够调试各种布局

7.8K20
领券