FloatingTextField: A Customizable Text Field

悬浮文本字段

License Platform 5.7 CI CodeCov

描述

floating-text-field 是一个可定制的文本字段。

视觉示例

FloatingTextField 的视觉示例

Example

用法

基本用法

对于基本用法，只需导入 FloatingTextField 包，并按如下方式设置文本字段的高度

import FloatingTextField

struct ContentView: View {
    @State private var username: String = ""

    var body: some View {
        FloatingTextFieldView($username, placeholder: "username")
            .frame(height: 60.0)
    }
}

自定义字体和颜色

FloatingTextField 提供了自定义文本字体、文本颜色、占位符字体、占位符颜色等的机会。

import FloatingTextField

struct ContentView: View {
    @State private var username: String = ""

    var body: some View {
        FloatingTextFieldView($username, placeholder: "username")
            .font(Font.system(size: 17.0))
            .placeholderFont(Font.system(size: 14.0))
            .textColor(.black)
            .placeholderColor(.gray)
            .frame(height: 60.0)
    }
}

自定义样式

您可以通过两个简单的步骤创建文本字段样式。

  1. 按如下方式定义自定义文本字段样式
import FloatingTextField

struct CustomTextFieldStyle: FloatingTextFieldStyle {
    func body(content: FloatingTextField) -> FloatingTextField {
        content
            .font(Font.system(size: 17.0))
            .placeholderFont(Font.system(size: 14.0))
            .cornerRadius(12)
            .placeholderBottomPadding(4.0)
            .textColor(.black)
            .placeholderColor(.gray)
            .borderWidth(1)
            .borderColor(.black)
    }
}
  1. 使用 textFieldStyle(_:) 应用此样式
struct ContentView: View {
    @State private var username: String = ""

    var body: some View {
        FloatingTextFieldView($username, placeholder: "username")
            .textFieldStyle(style: CustomTextFieldStyle())
            .frame(height: 60.0)
    }
}

安全文本输入

FloatingTextField 可以隐藏敏感数据，例如密码。您可以使用 isSecureTextEntry(_:) 修饰符来隐藏它。

import FloatingTextField

struct ContentView: View {
    @State private var password: String = ""
    @State private var isPasswordHidden: Bool = true

    var body: some View {
        FloatingTextField($password, placeholder: "Password")
            .textFieldStyle(style: CustomTextFieldStyle())
            .isSecureTextEntry(isPasswordHidden)
            .leftView {
                Image(systemName: "lock")
                    .foregroundColor(.gray)
            }
            .rightView {
                Button(
                    action: { isPasswordHidden.toggle() },
                    label: {
                        Image(systemName: "eye.fill")
                            .foregroundColor(.gray)
                    }
                )
            }
            .frame(height: 60.0)
    }
}

要求

安装

Swift Package Manager

Swift Package Manager 是一个用于自动化 Swift 代码分发的工具，它已集成到 swift 编译器中。它还处于早期开发阶段，但 floating-text-field 确实支持在受支持的平台上使用它。

设置好 Swift 包后，将 floating-text-field 添加为依赖项就像将其添加到 Package.swift 的 dependencies 值一样简单。

dependencies: [
    .package(url: "https://github.com/space-code/floating-text-field.git", .upToNextMajor(from: "1.0.0"))
]

交流

贡献

引导开发环境

make bootstrap

请随时帮助这个项目！如果您发现可以改进的地方或想要新功能，请打开一个 issue 或发送一个 Pull Request！

作者

Nikita Vasilev, nv3212@gmail.com

许可证

floating-text-field 在 MIT 许可证下可用。有关更多信息，请参见 LICENSE 文件。