[英]Custom TextField keyboard in SwiftUI with UIViewRepresentable
[英]Custom TextField Swiftui
如何創建如圖所示的文本字段? 有那種顏色和白線的背景?
import SwiftUI
@available(iOS 16.0, *)
struct SecondView: View {
@State var nome = ""
@State var cognome = ""
var body: some View {
GeometryReader { geo in
ZStack {
Color(red: 57 / 255, green: 63 / 255, blue: 147 / 255)
Text("Ora tocca ai tuoi dati")
.font(Font.custom("Rubik", size: 22)).foregroundColor(Color.white).font(Font.body.bold()).padding(.bottom, 300).font(Font.headline.weight(.light))
Text("Per iniziare ad usare MyEntZo completa i campi qui sotto").multilineTextAlignment(.center)
.font(Font.custom("Rubik", size: 18)).foregroundColor(Color.white).font(Font.body.bold()).padding(.bottom, 80).font(Font.headline.weight(.light))
TextField("Nome", text: $nome, axis: .vertical)
.textFieldStyle(.roundedBorder)
.background(.ultraThinMaterial)
.padding().padding(.bottom, 20).padding(.top, 110).scaledToFill()
.underline()
TextField("Cognome", text: $nome, axis: .vertical)
.textFieldStyle(.roundedBorder)
.background(.ultraThinMaterial)
.padding().padding(.bottom, 20).padding(.top, 190).scaledToFill()
.underline()
Button(action: {
print("sign up bin tapped")
}){
Text("Continua")
.frame(minWidth: 0, maxWidth: .infinity)
.font(.system(size: 18))
.padding()
.foregroundColor(.white)
.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.green, lineWidth: 2)
)
}
.background(Color.green)
.cornerRadius(25).frame(width: geo.size.width - 50, height: 100)
.padding(.top, 300)
}
}
.ignoresSafeArea()
}
}
struct SecondView_Previews: PreviewProvider {
static var previews: some View {
SecondView()
}
}
您可以創建一個包含常規TextField
的自定義文本字段,將@State
作為@Binding
,例如
struct CustomTextField: View {
let placeholder: String
@Binding var text: String
var body: some View {
VStack {
TextField(placeholder, text: $text)
.padding(.bottom, 4)
.foregroundColor(.white)
Color.white
.frame(height: 2)
}
.padding([.top, .bottom, .trailing])
.background(.blue)
}
}
你可以像這樣使用:
struct ContentView: View {
@State private var nome: String = ""
var body: some View {
VStack {
// etc
CustomTextField(placeholder: "Nome", text: $nome)
// etc
}
}
}
struct SecondView: View {
@State var nome = ""
@State var cognome = ""
var body: some View {
GeometryReader { geo in
ZStack {
Color(red: 57 / 255, green: 63 / 255, blue: 147 / 255)
VStack {
Spacer()
Text("Ora tocca ai tuoi dati")
.font(Font.custom("Rubik", size: 22))
.foregroundColor(.white)
.bold()
.padding()
.font(Font.headline.weight(.light))
Text("Per iniziare ad usare MyEntZo completa i campi qui sotto").multilineTextAlignment(.center)
.font(Font.custom("Rubik", size: 18)).foregroundColor(Color.white).font(Font.body.bold()).padding(.bottom, 80).font(Font.headline.weight(.light))
TextField("Nome", text: $nome, prompt: Text("Nome").foregroundColor(.white.opacity(0.7)))
.foregroundColor(.white)
.padding(.horizontal)
Rectangle()
.foregroundColor(.white)
.background(.white)
.frame(maxWidth: .infinity, maxHeight: 2)
.padding(.horizontal)
TextField("Cognome", text: $cognome, prompt: Text("Cognome").foregroundColor(.white.opacity(0.7)))
.foregroundColor(.white)
.padding([.horizontal, .top])
Rectangle()
.foregroundColor(.white)
.background(.white)
.frame(maxWidth: .infinity, maxHeight: 2)
.padding(.horizontal)
Button(action: {
print("sign up bin tapped")
}){
Text("Continua")
.frame(minWidth: 0, maxWidth: .infinity)
.font(.system(size: 18))
.padding()
.foregroundColor(.white)
.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.green, lineWidth: 2)
)
}
.background(Color.green)
.cornerRadius(25).frame(width: geo.size.width - 50, height: 100)
.padding(.top)
Spacer()
}
}
}
.ignoresSafeArea()
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.