是指在使用Flutter开发时,当用户点击或选中一个TextField(文本输入框)时,需要改变TextField中的图标(如清除按钮、密码可见性按钮)的颜色。 在Flutter中,可以通过使用InputDecoration类的suffixIcon和prefixIcon属性来设置TextField中的图标。要实现选中时更改图标颜色的效果,可以利用TextField的focusNode属性和focusColor属性。
1. Theme 修改主题颜色可以修改 TextField 选中时整体颜色(边框+prefixIcon) Theme( data:newThemeData(primaryColor: Colors.red), child: TextField( controller: accountController, decoration: InputDecoration( hintText:'请输入您的手机号', prefixIcon: Icon(Icons.person), ), ), ) Theme 可以 放在 Mater...
data: new ThemeData(primaryColor: Colors.red), child: TextField( controller: accountController, decoration: InputDecoration( hintText: '请输入您的手机号', prefixIcon: Icon(Icons.person), ), ), ) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10....
接下来是 prefixIcon,然后是正文,最后是 suffix 和 subffixIcon。 这个五个位置虽然从名字上来看是 Icon 和 Text,但实际上只要是 Widget 都可以!但最好是用 Icon,Text,因为如果用其它 Widget,可能享受不到 Theme 的福利了。 prefix,suffix 也可以用两个字段替代。 prefixText: '你是谁?', prefixStyle: Text...
老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握。 第一篇链接:【Flutter实战】移动技术发展史 Text Text是显示文本的组件,最常用的组件,没有之一。基本用法如下: ...
TextField TextEditingController 分析篇《点击查看详情》 1 引言 1.1 情景一 一个文本框默认情况下 可编辑 (允许输入文本的情况)获取焦点(正在输入文本)下,会有默认的一个下划线,这个下划线的颜色是获取的MaterialApp 组件中 them 配置的 textTheme 主题中的样式。
通过修改 enabledBorder 和 focusedBorder 可以调整边框在选中和失焦时的颜色 child:TextField(controller:pwdController,obscureText:true,decoration:InputDecoration(hintText:'请输入验证码',prefixIcon:Icon(Icons.lock),enabledBorder:UnderlineInputBorder(borderSide:BorderSide(color:Colors.orange),),focusedBorder:Und...
终于还是对TextField下手了,这个属性最多、功能点最多的Widget。 基本属性 TextField是一个material design风格的输入框,本身有多种属性,除此之外装饰器InputDecoration也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。 先看一下源码,重要或常用的属性会有注释。 TextField const TextField({ Key key, th...
老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握。 第一篇链接:【Flutter实战】移动技术发展史 Text Text是显示文本的组件,最常用的组件,没有之一。基本用法如下: ...
prefixIcon: Icon(Icons.person), //在输入框前面添加一个用户图标 labelText: 'Username', ), ), ), ), ), ); } } ``` 在这个例子中,我们使用了`TextField`组件,并在`InputDecoration`的`prefixIcon`参数中放置了一个用户图标。 你可以根据需要更改图标,也可以使用其他自定义的`Widget`作为`prefixIcon...