《Flutter 控件大全》第九十六：TextField、EditableText、TextInput

最新推荐文章于 2024-08-14 14:22:17 发布
最新推荐文章于 2024-08-14 14:22:17 发布
阅读量3.9k 收藏 2
点赞数 1
分类专栏： # Flutter Widgets 文章标签： FLutter TextField EditableText TextInput
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengks1987/article/details/105311111
版权
Flutter Widgets 专栏收录该内容
103 篇文章 128 订阅 ¥9.90 ¥99.00
订阅专栏
本文详细介绍了Flutter中的文本输入组件，包括EditableText的基础文本输入功能，TextInput作为Flutter与原生交互的服务，以及TextField的常用属性如decoration、controller、keyboardType等，并展示了各种自定义外观和行为的例子，如输入框装饰、文本对齐、键盘类型以及字数统计等。
摘要由CSDN通过智能技术生成
  • 如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
  • Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

EditableText

EditableText是一个基本的文本输入组件，此组件和TextInput一起让用户编辑输入框的内容，提供滚动、选择、光标运动，但不提供焦点管理。通常情况下我们不会直至使用此组件，而是使用Material风格的TextField组件。

TextInput

TextInput并不是组件，而是Flutter与原生交互的服务，控制键盘的显示。TextField组件的TextInputAction属性通过此服务实现。

TextField

TextField是文本输入组件，即输入框，常用组件之一。基本用法：


                

                
                
        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  老孟Flutter
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
flutter控件TextField number类型没有小数点或numberWithOptions无效的解决方法

				
			

			

				

					Alrey的博客
				

				

					04-19
					
					1544
					
				

			

		

		

			
				
目前解决TextField小数的方案如下
               TextField(
                keyboardType: TextInputType.numberWithOptions(decimal: true,signed: true),
                inputFormatters: [
                  PrecisionLimitFormatter(2),//限制精度与正则
                ],
         

			
		

	



                

              
                



	

		

			

				
					
Flutter 控件 TextField、EditableText、TextInput

				
			

			

				

					weixin_38107457的博客
				

				

					02-16
					
					2527
					
				

			

		

		

			
				
TextInput

TextField是文本输入组件，即输入框，常用组件之一。基本用法：


TextField()




decoration是TextField组件的装饰（外观）参数，类型是InputDecoration。

icon 显示在输入框的前面，用法如下：


TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.person),
  ),
)




如果这个圆角不喜欢的话，也可以改一下的，比如：


     ..

			
		

	



                


  
              

                


	

		

			

				
					
Flutter-Text Widget 文本组件的使用

				
			

			

				

					MagicGirl
				

				

					05-14
					
					290
					
				

			

		

		

			
				
TextStyle 类库 ：https://docs.flutter.io/flutter/painting/TextStyle-class.html
import 'package:flutter/material.dart';
// 写法1：
void main() => runApp(MyApp());

// 写法2：
// void main() {
//   runApp(MyA...

			
		

	





	

		

			

				
					
Flutter 秘籍（三）

					
最新发布

				
			

			

				

					龙哥盟
				

				

					08-14
					
					625
					
				

			

		

		

			
				
您想要自定义用于编辑文本的键盘。表单小部件对于与用户交互很重要。本章涵盖了材质设计和 iOS 风格的表单小部件，包括文本输入、单选按钮、复选框、下拉菜单、开关、芯片和滑块。在下一章，我们将讨论应用脚手架的部件。本章讨论了 Flutter 中常见的小部件，包括列表视图、网格视图、表格布局、页面搭建和选项卡布局。这些小部件创建了 Flutter 中页面的基本结构。在下一章，我们将讨论 Flutter 应用中的页面导航。

			
		

	



		

			
		



	

		

			

				
					
Flutter 中的 EditableText 小部件：全面指南

				
			

			

				

					smileKH的博客
				

				

					05-23
					
					747
					
				

			

		

		

			
				
是一个小部件，它实现了一个多行文本编辑字段，支持文本选择、光标控制、输入和文本样式等。它是实现自定义文本编辑控件的基础，如带有自定义工具栏的文本编辑器或支持特殊输入模式的编辑器。text：编辑框中的文本。style：文本样式。：光标颜色。：光标颜色。：光标宽度。：光标圆角。：文本选择高度。onTap：点击文本编辑框时的回调。：文本选择变化时的回调。onChanged：文本内容变化时的回调。通过监听的onChanged回调，您可以实现一个自定义键盘，以控制文本输入。

			
		

	





	

		

			

				
					
Flutter — 文本为什么可以被编辑？如何自定义编辑的行为？

				
			

			

				

					bugyinyin的博客
				

				

					10-12
					
					252
					
				

			

		

		

			
				
在上一篇文章中，我们讲解了Flutter文本的组成部分和Flutter 文本渲染到屏幕上的逻辑。文本的输出我们已经分析完成了，那么文本的输入又是怎么样的呢？在Flutter中，我们知道文本的输入可以通过TextField等组件将文字输入到App中，但是它背后的原理是什么呢，为什么可以编辑文本呢？在这一篇文章中，就让我们从Flutter的可编辑文本的实现原理，再到自定义可编辑的文本…希望能对你认识Flutter的文本编辑有所帮助。自定义的编辑行为主要为下面几块部分格式化输入框的数据自定义文本选中范围。

			
		

	





	

		

			

				
					
react-native TextInput组件设置editable=false后 外层容器的点击事件无法触发

				
			

			

				

					hzxOnlineOk的博客
				

				

					08-05
					
					889
					
				

			

		

		

			
				
react-native TextInput组件设置editable=false后 外层容器的点击事件无法触发，因此无法直接使用TextInput的组件的样式做一个假的输入框，然后点击进行场景跳转

只能自行实现一个假的输入框


			
		

	





	

		

			

				
					
textfield首行缩进

				
			

			

				

					diaoguan9600的博客
				

				

					08-09
					
					385
					
				

			

		

		

			
				
#pragma mark - UITextView delegate Methods-(void)textViewDidChange:(UITextView *)textView{NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];paragraphS...

			
		

	





	

		

			

				
					
Flutter_Dynamic_Widget:在该项目中，您将看到如何根据用户操作创建动态窗口小部件以及如何访问该动态窗口小部件。

				
			

			

				

					05-15
				

			

		

		

			
				
2. `dynamic_input_form.dart` - 定义了`DynamicInputForm`类，实现了动态`TextField`的创建和访问。 3. 其他辅助文件，如样式表和图标资源。  **总结**  通过学习和实践`Flutter_Dynamic_Widget`项目，开发者可以...

			
		

	





	

		

			

				
					
Flutter 常用控件使用详解

				
			

			

				

					qq_33538121的博客
				

				

					02-04
					
					1067
					
				

			

		

		

			
				
目录

配置

Flutter常用控件

Text

TextField组件

Container

Image

GridView

Row水平组件

Column垂直布局

Stack层叠布局

参考

配置

由于Flutter会同时构建Android和IOS两个平台的发布包，所以Flutter同时依赖Android SDK和iOS SDK，在安装Flutter时也需要安装相应平台的构建工具和SDK，在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以将如下环

			
		

	





	

		

			

				
					
基于TextField的图文混编的组件

				
			

			

				

					03-26
				

			

		

		

			
				
2. **图文混排的实现**：通过使用TextField的type属性（如 TextFieldType.DYNAMIC 或 TextFieldType.INPUT），以及insertText和deleteText方法，可以实现文本的动态插入和删除。插入图片可能需要利用BitmapData对象...

			
		

	





	

		

			

				
					
Flutter随记六：Expended组件使用

				
			

			

				

					鸡肋佐的博客
				

				

					06-30
					
					1177
					
				

			

		

		

			
				
Flutter随记六：Expended组件使用

			
		

	





	

		

			

				
					
React Native开发之——组件TextInput(3)

				
			

			

				

					我的博客
				

				

					03-04
					
					391
					
				

			

		

		

			
				
前言前两节已经讲了TextInput的大部分属性，本文将继续介绍TextInput的属性，内容如下：editable、value和defaultValueonChange和onChangeText获取文本输入TextInpupteditable、value和defaultValue概念editable:用于说明TextInput是否可编辑value：TextInput的值defaultValue：...

			
		

	





	

		

			

				
					
flex学习笔记 富文本编辑（一）-RichEditableText

				
			

			

				

					weixin_33895475的博客
				

				

					08-27
					
					184
					
				

			

		

		

			
				
RichEditableText 为低级的 UIComponent，用于显示、滚动、选择和编辑各种格式的文本。
富文本可以包含可单击的超链接以及可嵌入或从 URL 加载的内嵌图形。
RichEditableText 不包含滚动条，但是可以实现用于以编程方式滚动的 IViewport 接口，这样可以由确实能够提供滚动条的 Scroller 控制。它还支持使用鼠标滚轮垂直滚动...

			
		

	





	

		

			

				
					
【Flutter 2-5】Flutter手把手教程UI布局和Widget——TextField使用、搭配InputDecoration和FocusedNode使用

				
			

			

				

					弗拉德的技术博客
				

				

					01-08
					
					1139
					
				

			

		

		

			
				
TextField是一个常用的控件，是有状态的Statefulwidget，它是由多个控件组合成的控件，使用起来并不复杂，但是变化情况比较多，多看源码，避免踩坑。

			
		

	





	

		

			

				
					
Flutter 中TextField详解

				
			

			

				

					的博客
				

				

					11-06
					
					1517
					
				

			

		

		

			
				
在Flutter中TextField是一个文本输入组件。
这篇文章中会讲解出现部分属性，获取文本输入框中的文本，下划线改变颜色

			
		

	





	

		

			

				
					
实现文本编辑器的设计与实现_用flutter实现富文本编辑器（二）

				
			

			

				

					weixin_39948824的博客
				

				

					11-30
					
					347
					
				

			

		

		

			
				
上一回咱们说到RichText是如何实现TextSpan和WidgetSpan混排的，这次我们把RichText和TextField合并起来这是我目前修改的文件，把rich前缀去掉就是原来的名字.
├── cupertino
│   └── rich_text_selection.dart
├── material
│   └── rich_text_selection.dart
├── rich...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
老孟Flutter

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值