Flutter---TextField

概念TextField 是 Flutter 中用于文本输入的核心组件它不仅仅是一个输入框而是一个完整的文本编辑系统包含输入控制、焦点管理、文本编辑、验证、样式定制等完整功能源码层级// TextField 的架构层级 TextField (StatefulWidget) ↓ _TextFieldState ↓ EditableText (StatefulWidget) ← 真正的文本编辑组件 ↓ RenderEditable (RenderObject) ↓ dart:ui Paragraph TextInputConnection (平台输入法) 理解 //TextField 是 EditableText 的高级封装 //EditableText 才是真正的文本编辑组件 //通过 TextInputConnection 与平台输入法通信 //底层使用 Paragraph 渲染文本用 TextSelection 管理选择基础使用// 定义控制器 final TextEditingController _usernameInputController TextEditingController(); TextField( controller: _usernameInputController, // 控制器 decoration: InputDecoration( hintText: 请输入用户名,//提示文字 border: OutlineInputBorder(), //默认情况未点击时边框是灰色的点击后边框是蓝色的 filled: true, //启用填充 fillColor: Colors.green.withOpacity(0.5),//输入框颜色 contentPadding: EdgeInsets.all(16), // 内边距 //prefixIcon: Icon(Icons.person), // 前缀图标 //suffixIcon: IconButton( // 后缀图标可点击 // icon: Icon(Icons.clear),//如果做登录按钮可以用这个做获取验证码按钮 // onPressed: () {}, //), enabledBorder: OutlineInputBorder( //未点击的边框颜色 borderSide: BorderSide(color: Colors.grey), borderRadius: BorderRadius.circular(26),//给输入框设置圆角 ), focusedBorder: OutlineInputBorder( //点击后的边框颜色 borderSide: BorderSide(color: Colors.red, width: 2), borderRadius: BorderRadius.circular(26),//给输入框设置圆角 ), counterText: ,// 隐藏计数器 ), // obscureText: true, // 隐藏文本用于密码 // obscuringCharacter: ●, // 隐藏字符默认是圆点 maxLength: 8, // 最大长度 style: TextStyle( //输入框的文本样式 fontSize: 16, color: Colors.purple, fontWeight: FontWeight.bold, ), cursorColor: Colors.pink, // 光标颜色 cursorWidth: 1.0, // 光标宽度 cursorHeight: 20.0, // 光标高度 cursorRadius: Radius.circular(2), // 光标圆角 showCursor: true, // 显示光标 )小案例实现获取验证码行效果图代码使用suffixIcon实现获取验证码按钮//验证码 Widget buildVerificationCode() { return TextField( controller: _verificationCodeController, decoration: InputDecoration( hintText: 请输验证码, hintStyle: TextStyle( color: Color(0xFF111111).withOpacity(0.6), ), filled: true, fillColor: Colors.white, // 添加前置图标 prefixIcon: Icon( Icons.lock, // 可以替换为其他图标比如 Icons.vpn_key, Icons.security 等 color: Colors.black.withOpacity(0.5), size: 20, ), // 或者添加后置图标二选一或同时使用 // suffixIcon: Icon( // Icons.check_circle, // color: Colors.green, // size: 20, // ), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.transparent), borderRadius: BorderRadius.circular(26), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.transparent), borderRadius: BorderRadius.circular(26), ), suffixIcon: SizedBox( child: _buildVerificationCodeButton(), ), counterText: , ), maxLength: 6, //验证码可能是6位可能是4位 style: TextStyle( fontSize: 12, color: Colors.black, ), cursorColor: Colors.black, cursorWidth: 2.0, ); } // 构建验证码按钮 Widget _buildVerificationCodeButton() { return Container( child: ElevatedButton( onPressed: _getVerificationCode, style: ElevatedButton.styleFrom( backgroundColor: Color(0xFF2188FF), foregroundColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(26), ), ), child: Text( 获取验证码, style: TextStyle( fontSize: 12, fontWeight: FontWeight.w500, ), ), ), ); }