如何在 SwiftUI 中使用材料设计文本字段答案

【问题标题】：How to use material design text fields in SwiftUI如何在 SwiftUI 中使用材料设计文本字段
【发布时间】：2019-11-03 14:51:47
【问题描述】：

我想在 SwiftUI 中使用 Material Design 文本字段组件。有一个为 UIKit 编写的 Material Design 文本字段组件，但没有为 SwiftUI 编写的。是否可以在 SwiftUI 中使用这个 Material Design Text Field 组件？

【问题讨论】：

标签： swiftui mdc-components swiftui-form

【解决方案1】：

就我而言，在 SwiftUI 中直接使用材料设计是不可能的。但是你可以将你的 UIKit 视图集成到你的 SwiftUI 视图中（尽管它有点乏味，但对每个视图都这样做），你可以在你的 SwiftUI 视图中使用材料设计。我现在就是这样用的。

【讨论】：

【解决方案2】：

您可以使用 material-ui 样式创建自己的文本字段组件，我发现使用 swiftui 很容易。

import SwiftUI 

struct CustomFieldText: View {
@Binding var name: String
var label: String
var required: Bool = true
var indicator: Bool = false
@State private var onKeyIn = false

var body: some View {
    ZStack {
        VStack(alignment: .leading) {
            HStack {
                Text(label)
                if required {
                    Text("*")
                }
                Spacer()
            }
            .multilineTextAlignment(.leading)
            .font(.custom("ZonaPro-SemiBold", size: self.onKeyIn || self.name != "" ? 14 : 18))
            .foregroundColor(.white)
            .offset(y: self.onKeyIn || self.name != "" ? -30 : 0)
            .animation(.spring(response: 0.5, dampingFraction: 1, blendDuration: 0))
            
            Rectangle().frame(height: 3)
                .cornerRadius(10)
                .foregroundColor(Color(#colorLiteral(red: 0.8392156863, green: 0.8784313725, blue: 0.8784313725, alpha: 1)))
        }
        VStack {
            TextField(self.name, text: self.$name)
                .font(.custom("ZonaPro-SemiBold", size: 18))
                .autocapitalization(.none)
                .textContentType(.nickname)
                .foregroundColor(.white)
                .padding(.bottom, 15)
                .padding(.top, 5)
                .onTapGesture {
                    self.onKeyIn = true
                }
            .zIndex(1)
        }
        
        VStack {
            if indicator && self.name.count > 0 {
                HStack {
                    Spacer()
                    Text("Verifying")
                        .font(.custom("ZonaPro-Light", size: 10))
                        .foregroundColor(Color.white)
                }
            }
        }
    }
}}

以及如何使用它？

  CustomFieldText(name: self.$auth.email, label: "Your Email ID")

【讨论】：