Material TextField 进阶指南浮动占位符、错误校验与自动高度动画快速提升 iOS 表单体验【免费下载链接】MaterialA UI/UX framework for creating beautiful applications.项目地址: https://gitcode.com/gh_mirrors/mat/MaterialMaterial 是一款面向 iOS 的 UI/UX 组件框架其TextField组件用「浮动占位符 错误校验 自动高度动画」三件套帮你的表单告别生硬的原生输入框打造流畅、美观且易用的 iOS 表单体验。本文面向新手开发者用尽量少的代码带你掌握这三项进阶能力并给出常用属性的速查表 。为什么 TextField 值得专门研究注册、登录、搜索、留言……几乎每个 App 都离不开输入框。原生UITextField只能显示一行灰色占位文字而 Material 的 TextField 原生支持✨浮动占位符聚焦时标签自动上浮缩小成为「字段名」常驻提示错误提示校验失败时在底部显示红字错误信息自动增高多行输入时高度随内容平滑增长这些能力都集中在 Sources/iOS/Text/ 目录中下面逐一拆解。浮动占位符聚焦时优雅上浮的字段标签Material 的占位符是一个真实的UILabel而非UITextField的系统占位文字。当用户聚焦输入框时它会以 0.15 秒的动画上浮到输入框顶部并缩小默认缩放为 0.75 倍退出聚焦后若无内容则回落原位。相关动画逻辑见 placeholderEditingDidBeginAnimation。几个常用调节项均支持 Storyboard 的IBInspectable无需写代码即可调整属性默认值作用isPlaceholderAnimatedtrue是否启用浮动动画placeholderActiveScale0.75上浮后的缩小比例placeholderNormalColor深灰非聚焦时标签颜色placeholderActiveColor主题蓝聚焦时标签颜色同时联动光标色dividerNormalHeight / dividerActiveHeight1 / 2底部分割线粗细变化聚焦时变粗变蓝 小贴士分割线divider的颜色与粗细会随聚焦状态自动切换配合浮动标签一起形成「正在编辑」的视觉反馈实现见 updateDividerColor。ErrorTextField让表单错误「说得出哪里不对」基础TextField只有一个detail属性用于提示文字而真正的错误校验由 ErrorTextField 承担。它在输入框下方新增了一个errorLabel通过两个属性即可驱动field.error 密码至少 6 位 field.isErrorRevealed trueisErrorRevealed为true时错误信息显示、detail提示自动隐藏两者互斥切换版式不会打架。错误颜色默认取主题色theme.error随 apply(theme:) 自动适配你的主题。链式校验一行代码声明全部规则ErrorTextField自带了一个validator校验器见 ErrorTextFieldValidator支持链式调用每个规则绑定一条错误文案field.validator .notEmpty(message: 请输入用户名) .min(length: 3, message: 至少 3 个字符) .noWhitespaces(message: 用户名不能含空格) .username(message: 包含非法字符)内置规则覆盖了常见场景notEmpty非空、min / max长度上下限、email邮箱正则、username用户名规则、noWhitespaces禁止空格也能用validate(message:when:)挂任意自定义闭包定义见 validate。点击提交时调用field.isValid()即可触发校验失败时自动显示第一条不通过的错误信息全部通过则隐藏错误。自动校验别在用户第一次输入时就「劈脸报错」校验器提供autoValidationType控制输入过程中的自动校验策略见 AutoValidationType策略行为.none完全关闭自动校验只在手动调用时生效.default推荐值错误首次显示后才开始自动校验.always每次输入都实时校验.custom传入闭包完全自定义时机新手最容易踩的坑就是.always——用户刚敲一个字母就弹红字体验很差。用默认的.default先等用户点过一次提交、让他知道「这个字段会校验」再开启实时纠错是更友好的交互节奏。自动高度动画让多行输入框像气泡一样生长单行之外Material 提供了基于UITextView的 TextView支持随内容自动增高并且增高过程带有平滑动画preferredMaxLayoutHeight设置最大高度上限超过后转为内部滚动。设为0则不启用自动增高isHeightChangeAnimated默认true编辑状态下高度变化时以 0.15 秒动画布局父视图见 contentSize 的didSetintrinsicContentSize会结合占位符高度与minimumTextHeight32pt计算保证空内容时也有合适的最小高度。如果你的需求是「带浮动占位符的多行输入框」直接用 Editor 组件——它把TextView与浮动标签、分割线、底部detail提示组合在一起浮动动画与聚焦样式和TextField完全一致布局逻辑见 layoutPlaceholderLabel。一句话选型单行→TextField/ErrorTextField多行→Editor内含TextView。常见调性问题速查现象调整建议浮动标签与输入文字重叠调大placeholderVerticalOffset占位符不想浮动isPlaceholderAnimated false或placeholderAnimation .hidden输入框右侧需要图标按钮isClearIconButtonEnabled一键清空、isVisibilityIconButtonEnabled密码可见切换整体风格不符通过apply(theme:)使用 Theme 统一换肤占位符、分割线、错误色全部自动跟随小结Material 的 TextField 家族把「表单体验」拆成了三个可以独立启用的开关浮动占位符——用动画告诉用户「我在哪、改什么」ErrorTextField validator 链式校验——用恰到好处的时机告诉用户「错在哪」TextView 自动高度动画——让长内容输入不再挤压版面。想深入细节建议按以下路径阅读源码TextField.swift、ErrorTextField.swift、ErrorTextFieldValidator.swift、TextView.swift、Editor.swift项目整体介绍见 README.md。掌握这三件套你的 iOS 表单体验就有了明显的「高级感」。【免费下载链接】MaterialA UI/UX framework for creating beautiful applications.项目地址: https://gitcode.com/gh_mirrors/mat/Material创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考