SwiftUI實(shí)戰(zhàn)系列
- SwiftUI實(shí)戰(zhàn)-使用ViewModifier自定義微信TabBar底部導(dǎo)航和NavigationView
- SwiftUI實(shí)戰(zhàn)-NavigationLink圖片和文字顯示藍(lán)色或者圖片無(wú)顯示
- SwiftUI實(shí)戰(zhàn)-去除List分割線
- SwiftUI實(shí)戰(zhàn)-自定義彈窗
- SwiftUI實(shí)戰(zhàn)-自定義加載指示器HUD
- SwiftUI實(shí)戰(zhàn)-廣告頁(yè)、歡迎頁(yè)
- SwiftUI實(shí)戰(zhàn)-NavigationView + TabView基本框架搭建
- SwiftUI實(shí)戰(zhàn)-Pager分頁(yè)查看器
- SwiftUI實(shí)戰(zhàn)-隱私政策和用戶協(xié)議彈窗
- SwiftUI實(shí)戰(zhàn)-多圖、大圖圖片瀏覽
- SwiftUI實(shí)戰(zhàn)-下拉菜單
- SwiftUI實(shí)戰(zhàn)-系統(tǒng)NavigationView自定義titleView
- SwiftUI實(shí)戰(zhàn)-WKWebView的使用
- SwiftUI實(shí)戰(zhàn)-自定義轉(zhuǎn)圈指示器
- SwiftUI實(shí)戰(zhàn)-自定義TextField搭建登錄頁(yè)面UI
- SwiftUI實(shí)戰(zhàn)-自定義底部彈窗
- SwiftUI實(shí)戰(zhàn)-顯示星級(jí)評(píng)分
- SwiftUI實(shí)戰(zhàn)-類(lèi)似新聞?lì)^條輪播滾動(dòng)
- SwiftUI實(shí)戰(zhàn)-仿用戶協(xié)議確認(rèn)頁(yè)面支持點(diǎn)擊文字顯示協(xié)議
- SwiftUI實(shí)戰(zhàn)-新特性、新版本介紹
- SwiftUI實(shí)戰(zhàn)-多圖選擇、圖片選擇器
- SwiftUI實(shí)戰(zhàn)-輪播圖
- SwiftUI實(shí)戰(zhàn)-網(wǎng)絡(luò)請(qǐng)求工具封裝
- SwiftUI實(shí)戰(zhàn)-多級(jí)聯(lián)動(dòng)地址選擇
- SwiftUI實(shí)戰(zhàn)-使用UIActivityIndicatorView
- SwiftUI實(shí)戰(zhàn)-Expanded可伸縮的分組列表List
- SwiftUI實(shí)戰(zhàn)-滾動(dòng)列表內(nèi)容返回頂部、底部、指定位置
- SwiftUI實(shí)戰(zhàn)-List列表內(nèi)容動(dòng)態(tài)改變更新
- SwiftUI-繪制氣泡圖
- SwiftUI-仿微信加號(hào)Popover氣泡彈窗
- SwiftUI實(shí)戰(zhàn)-單邊圓角單個(gè)圓角
本章內(nèi)容
實(shí)現(xiàn)登錄頁(yè)面UI基本搭建
效果圖：
自定義TextField.gif
將學(xué)到的內(nèi)容：
1、實(shí)現(xiàn)密碼輸入的SecureField模式
2、監(jiān)聽(tīng)輸入框的內(nèi)容變化
3、輸入限制字?jǐn)?shù)輸入
4、ViewModifier的拓展使用
5、PreferenceKey 傳值使用
相關(guān)源碼如下：
LoginView.swift
import SwiftUI
struct LoginView: View {
//@EnvironmentObject var lauchViewVM: LauchViewModel
@Environment(\.presentationMode) var presentationMode
@State var account: String = ""
@State var password: String = ""
@State var content: String?
@State var attributedText: NSAttributedString?
@State var isSecureField = true
@State var isShowClear = false
var body: some View {
/*
// 輸入監(jiān)聽(tīng)
let binding = Binding<String>(get: {
self.account
}, set: {
debugPrint($0)
self.account = $0
})
*/
VStack {
VStack {
HStack {
Text("賬號(hào):").padding(.horizontal, 10)
Spacer().frame(width: 0)
CSInputTextField.init(placeholder: "請(qǐng)輸入賬號(hào)", text: $account) { value in
//debugPrint(value)
}
.frame(height: 40)
.overlay(
RoundedRectangle(cornerRadius: 5, style: .continuous)
.stroke(.orange, lineWidth: 1.0)
)
}
/*
HStack {
CSSTextView.init(placeholder: "請(qǐng)輸入內(nèi)容", attributedText: $attributedText, onCommit: { value in
debugPrint(value)
})
.frame(height: 100)
.overlay(
RoundedRectangle(cornerRadius: 5, style: .continuous)
.stroke(.orange, lineWidth: 1.0)
)
}
*/
HStack {
Text("密碼:").padding(.horizontal, 10)
Spacer().frame(width: 0)
ZStack {
CSInputTextField.init(placeholder: "請(qǐng)輸入密碼", text: $password, isSecureField: isSecureField) { value in
debugPrint(value)
}
.frame(height: 40)
.preference(key: CustomPreferenceKey<String>.self, value: password)
.onPreferenceChange (CustomPreferenceKey<String>.self) { value in
// 只能傳到上一級(jí)的父組件
debugPrint(value)
if value.count > 6 {
password = String(value.prefix(6))
}
isShowClear = value.count > 0
}
HStack {
Spacer()
if isShowClear {
Image.init(systemName: "xmark")
.resizable()
.aspectRatio(contentMode: .fit)
.padding(.trailing, 10)
.frame(width: 20, height: 20)
.onTapGesture {
password = ""
}
}
/*
Text(isSecureField ? "查看" : "隱藏")
.padding(.leading, 5)
.padding(.trailing, 5)
.onTapGesture {
isSecureField.toggle()
}
*/
}
}
.overlay(
RoundedRectangle(cornerRadius: 5, style: .continuous)
.stroke(.orange, lineWidth: 1.0)
)
}
HStack {
Button.init {
} label: {
Text("登錄")
.foregroundColor(Color.white)
.frame(maxWidth: .infinity, minHeight: 45, maxHeight: 45)
.background(Color.orange)
.cornerRadius(5)
.overlay(
RoundedRectangle(cornerRadius: 5, style: .continuous)
.stroke(.orange, lineWidth: 1.0)
)
}
}
.frame(maxWidth: .infinity, minHeight: 45, maxHeight: 45)
}
.padding(.top, 50)
.padding(.horizontal, 20)
Spacer()
}
.navigationBarTitle("登錄", displayMode: .inline)
.navigationBarItems(trailing: Button.init(action: {
}, label: {
NavigationLink.init(destination: RegisterView()) {
Text("注冊(cè)")
}
}))
}
}
CSInputTextField.swift
