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

在Flutter中仅显示TextField中的英文数字

在Flutter中,要仅显示TextField中的英文数字,可以通过使用正则表达式来实现。正则表达式是一种用于匹配字符串模式的工具,可以用来过滤掉非英文数字字符。

以下是一个示例代码,演示如何在Flutter中实现仅显示英文数字的TextField:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RegExp _regex = RegExp(r'[a-zA-Z0-9]'); // 正则表达式,匹配英文数字字符

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField Demo'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            inputFormatters: [
              FilteringTextInputFormatter.allow(_regex), // 使用正则表达式过滤输入
            ],
          ),
        ),
      ),
    );
  }
}

在上述代码中,我们使用了RegExp类来创建一个正则表达式对象_regex,该正则表达式可以匹配英文数字字符。然后,我们在TextField的inputFormatters属性中使用FilteringTextInputFormatter来过滤输入,只允许匹配正则表达式的字符。

这样,用户在TextField中输入时,只有英文数字字符会被显示,其他字符将被过滤掉。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器,适用于各种规模的应用程序和工作负载。详情请参考腾讯云云服务器产品介绍
  • 腾讯云对象存储(COS):提供安全可靠的对象存储服务,适用于存储和处理各种类型的数据。详情请参考腾讯云对象存储产品介绍

请注意,以上答案仅供参考,具体的产品选择和推荐应根据实际需求和情况进行评估。

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

相关·内容

Flutter TextField 组件必然会遇到问题

TextField 组件几乎是开发必然会用到一个组件,使用过程中会遇到两个非常棘手问题: 字数统计异常。 设置高度,文字无法居中。...但是 IOS 简体拼音输入法下有问题(可能其他输入法也有类似的问题),效果如下: 中文输入法统计正在编辑中文过程中会统计英文,假如限制5个中文,当输入4个中文后,最后一个中文输入2个及以上英文时,...❝去年时候,这个Bug解决了很久都没有解决,最终产品妥协去掉了这个功能,直到最近查看源码时候,无意中发现了这个Bug解决方案。...❞ 下面说下如何修复这个问题,关键是 TextField 「controller.value.composing」 这个属性,官方文档说明: ❝The range of text that is still...高度不是150, 「maxLines = 1」 情况下,通过设置 「contentPadding」 改变其高度,为了方便验证是否居中,中间绘制一条对齐线: Container( height

2.8K30
  • Flutter设置更好Logging指南

    今天,我们将研究可以极大减少应用程序调试时间任务之一。一旦您习惯了应用程序以某种方式运行日志,您将很快能够注意到为什么某些东西不起作用。...设置 将记录器包添加到您项目中 logger: ^0.6.0 复制代码 用法 要使用记录器,您可以创建一个新记录器并使用其中一个方法调用进行记录。...老实说,我唯一喜欢是每个日志颜色,前面有表情符号。我喜欢使用可视化队列来帮助我更快地调试。正如我之前提到,在给定特定场景情况下,您开始了解应用程序日志流,而可视化队列将对此提供更多帮助。...所以SimpleLogPrinter会取一个名字来显示,并会使用定义颜色PrettyPrinter来打印日志。...final log = getLogger('PostService'); 复制代码 最后要做是设置日志记录级别,以便您不会一直看到所有日志。主文件设置应用程序运行之前级别。

    1.8K00

    Flutter实战】文本组件及五大案例

    基本用法如下: Text('老孟') 注意:Text组件一定要包裹在Scaffold组件下,否则效果如下: 文本样式style设置,类型为TextStyle,TextStyle包含很多文本样式属性...,值说明如下: left:左对齐 right:右对齐 center:居中 justify:两端对齐,此属性中文存在bug(Flutter版本:1.17.3)也可以官方issue关注此问题 start...设置全局字体样式: MaterialApptheme设置如下 MaterialApp( title: 'Flutter Demo', theme: ThemeData( ......,可以获取TextField内容、设置TextField内容,下面将输入英文变为大写: TextEditingController _controller; @override void initState...multiline:当TextField为多行时(maxLines设置大于1),右下角为“换行” 按键。 number:数字键盘。 phone:手机键盘,比数字键盘多"*"和 "#"。

    7.3K10

    Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    和尚最近在学习基础 Flutter Widget,原因在于很多基础组件有很多容易忽视注意事项,了解并熟悉后对整体开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...inputFormatters 为格式验证,例如原生 Android 通常会限制输入手机号或其他特殊字符, Flutter 也可以借此来进行格式限制,包括正则表达式;使用时需要引入 package...WhitelistingTextInputFormatter 允许输入白名单字符;如 digitsOnly 支持数字 [0-9]; c....当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单,默认为英文,可通过设置 Flutter 国际化来处理; pubspec.yaml 中集成 flutter_localizations...; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter MaterialApp 设置本地化代理和支持语言类型

    4.7K51

    tr命令统计英文单词出现频率妙用

    英文中我们要经常会经常统计英文中出现频率,如果用常规方法,用设定计算器一个个算比较费事,这个时候使用tr命令,将空格分割替换为换行符,再用tr命令删除掉有的单词后面的点号,逗号,感叹号。...先看看要替换this.txt文件 The Zen of Python, by Tim Peters Beautiful is better than ugly....上面的文本文件,如果要文中出现次数最多10个单词统计出来,可以使用下面的命令 [root@linux ~]# cat this.txt | tr ' ' '\n' | tr -d '[.,!]'...总结 以上就是这篇文章全部内容了,希望本文内容对大家学习或者工作具有一定参考学习价值,谢谢大家对ZaLou.Cn支持。如果你想了解更多相关内容请查看下面相关链接

    1.1K21

    Flutter更快地加载您图像资源

    本文主要介绍Flutter更快地加载您图像资源 我们可以将图像放在我们资产文件夹,但如何更快地加载它们?...这是 Flutter 一个秘密函数,可以帮助我们做到这一点 — precacheImage() 很多时候(尤其是 Flutter Web ),您本地资源图像需要花费大量时间屏幕上加载和渲染...对于用户角度来看E本是不好秒 pecially如果图像是屏幕背景图像。如果图像是您屏幕任何组件,我们仍然可以显示微光或其他内容,以便用户知道该图像正在加载。但是我们不能对背景图像显示微光!...我们 Flutter 中有一个简单而有用方法,我们可以用它来更快地加载我们资产图像——precacheImage()!...由于在此需要上下文,因此我们可以可访问上下文任何函数添加 precacheImage()。我们可以将相同内容放在第一个屏幕didChangeDependencies()方法

    3K20

    js 数字小数点末尾0显示与否

    js 数字小数点末尾0显示与否 不显示0 显示0(数字格式化) 不显示0 我们先来看一道例题,然后围绕其展开“零”讨论: 问题:得到一个随机数组成数组,数组长度为10 结果类似于:[0.243...(10).fill(); console.log(arr); 输出(为了展示效果,下面均是browser环境进行调试;另外在Node.js环境下也成功调试,此处未展示): 由于Math.random...() }); console.log(newArr); 输出: 小结:上面三种方法最终获取数字都是number类型(都省略了末尾0);由此可以看出,想得到保留小数点末尾0数字,只能将其数字格式化...显示0(数字格式化) 下面是通过格式化方法显示小数点末尾末尾0 ,最终获取数字是string类型 /** * 格式化数字,保留小数点后末尾0 * @param {Number} value 需要格式化小数...* @param {Number} fixed 需要显示小数位数 * @param {String} return 返回格式化小数 */ function formatNumberShowZero

    5.2K40

    指针液晶屏显示用法(二)

    饭量也得到了很大提升,以至于公司食堂考虑要不要收他双人份伙食费。 这天,张三爬楼时候遇到了保洁阿姨,于是上前打招呼。...一开始只是显示一些参数,这倒还好。后来要在屏幕上设定一些参数,设定时候,要在相应位置显示光标。一个页面可能要设置四五个参数。 阿姨:还好吧,很难吗?...这个屏幕虽然有光标显示功能,但是不符合要求。它就像word里光标一样,写入一个字,光标自动后移。但实际上,我们设定时候,是要求光标固定在一个位置不要动。...所以我百度了一下,用纯软件方式实现。 进入设定状态时候,特定位置循环显示” ”和”_”,循环时间是几百个微秒,这样人眼能看到。...开始时候,光标显示部分函数是这样写: if(A_Step == 1) //页面A第一处光标 { if(cursor_cnt >= 500)

    2K40

    数字孪生技术智能建造作用

    数字孪生=数据+模型+软件,我国在数据采集、模型积累、软件开发等方面存在诸多短板,成为制约数字孪生发展瓶颈。重点领域、重点环节率先实现突破,树立一批典型模式和样板。...随着建筑业转型升级,数字孪生技术应用于建造领域并推动智能建造发展,又是其一个发展方向。数字孪生技术智能建造应用将实现以下作用。...智能建造在施工领域有四个关键应用,即施工要素现场定位、施工布局优化、信息化管理、动态监测。...未来,要实现建筑全生命周期动态监控、可视化呈现、融合性数据处理和数字化智能建造也必然依靠数字孪生等信息技术、智能设备。...综上所述,智能建造是建筑业发展趋势,数字孪生是推动智能建造发展使能技术之一。忽米网——让工业更有智慧源自:《数字孪生技术及其智能建造应用》

    63710

    数字计算机表示

    计算机,一个bit指就是一个二进制位,即最小数字单位。 ---- 二进制表示 ---- 例如: 计算机,7 被表示为 0000,0111。其中,每四位加入 , 便于区分位数。...将该二进制数符号位取反,即将第一位由“0”变为“1”,得到:1000,0111。 因此, 8 位二进制原码表示法,-7 二进制原码为 1000,0111。...---- 反码表示法 ---- 反码是一种用于计算机中表示负数二进制数表示法。反码: 正数反码与其原码相同; 而负数则取其对应正数原码每一位取反(0变为1,1变为0)得到。...将该二进制数每一位取反,即将所有的位由“0”变为“1”,得到:1111,1000。 因此, 8 位二进制反码表示法,-7 二进制反码为 1111,1000。...因此, 8 位二进制反码表示法,-7 二进制补码为 1111,1001,由于 -6 二进制补码为 1111,1010,故我们将原本为 1111,1000 表示为最小值 -8。

    73260

    数据企业数字化转型践行(下篇)

    普元数字化转型专家团一对一走访40余家行业头部企业,探讨解决当下一些企业数字化转型问题,向更深数字化转型领域进行有价值探索和实践。本篇是莱维同学针对企业数字化转型数据台建设方面的分享。...数据企业数字化转型践行(上篇)中讲了很多,其实都是我们对业界一个理解。其实这么多年是从我们这么多客户,这么多项目总结出来。 我们对数据方法论可以概括为四化。...汇聚之后我们提到了数据资产化,一个非常核心概念。数据没有进入资产化之前是很难发挥作用。如一个阿拉伯数字,它没有承载业务含义,我不知道它是合同金额还是企业营收。...莱维:我们敏锐发现了很多这种厂商数据台本质都是各言各自、讲自己工具,整个业界都差不多。...这里就非常复杂了,因为我们之前数据都是一个孤立化系统一个业务领域中一个业务部门下

    1.3K30

    指针液晶屏显示用法(一)

    这天,老板给了一个任务,给他们公司产品增加一个液晶屏LCD1602,显示五个页面,可通过上下按键进行切换。 张三心想,这简单啊。...但是老板是个想法很多的人,时不时会让张三调整显示顺序,或者增加一个页面,又或者减少一个页面。 于是张三经常要调整page值和数组对应关系,增加或减少显示页面的函数。...这时保洁阿姨过来,看了一眼,说: 你定义一个指针数组,把这几个页面数组首地址按顺序存下来,显示页面的时候通过页面数组首地址来显示就行了,显示函数就不用写那么麻烦了。...阿姨:很简单,RAM其实和单元楼很像,变量地址就是门牌号A-1-301,变量名就是这个地址里住的人姓名。通过变量名取值就是通过姓名获取这个人对应年龄,通过地址取值就是通过地址获取这里住的人年龄。...= C[0]; page_p[3] = E[0]; 再 然后是显示函数: void display_page(uint8_t *page_num) {

    2K30
    领券