SwiftUI-LimitedTextField

iOS SwiftUI

字数统计: 359阅读时长: 1 min

 2024/04/01   Share

SwiftUI - 封装一个字数限制 TextField 控件?

效果展示

代码

外部使用

封装外部使用

封装控件代码

控件主体代码

UI 相关

是否自动撑开?

这里使用 autoResize = false ，就是给定一个最大高度，内部点击任何区域都弹出键盘。

autoResize = true，意味着根据输入的内容自动撑开。 frame 的 height 设置为 0。

输入区域设置

进度显示

进度圆环

非 UI

封装相关配置信息

配置信息

键盘聚焦

要达到效果：点击Textfield外围空白部分也能聚焦弹出键盘。

键盘弹出逻辑

超出字符, 截断

当超过给定的限制字数, 输入直接截断

用到的修饰符.onChange(of: value, initial: true){ ... }

超出字符打字限制

其他情况效果展示

另外一种情况.gif

实现效果： textField 只是 Zstack 布局上层的一个 view，随着输入字数换行自动设置高度。外部view没有限制高度，点击也能让Textfield处于聚焦状态。

总结

# 进度圆环
Circle()
  .trim(from: 0, to: progress)
  .stroke(progressColor.gradient, lineWidth: 5)
  .rotationEffect(.degrees(-90))
  
# 空白区域点击TextField聚焦

声明: 
@FocusState private var isKeyboardShowing: Bool
// 点击
.onTapGesture {
    isKeyboardShowing = true
}
// TextField 聚焦
TextField(hint, text: $value, axis: .vertical)
  .focused($isKeyboardShowing)

# UI设置
.frame(height: config.autoResizes ? 0 : nil)
配置为自动撑开的话，textField底部视图隐藏。 只有TextField的情况， 随着输入字符换行自动撑高。
配置为不自动撑开， frame(height: nil)意味着，高度由父控件外部设置高度。不然就是和父级一样的高度。