登录页面ui实现

Toast实现
各种依赖宝导入

iOSFirst.xcodeproj/xcuserdata/sunyufeng.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -7,7 +7,7 @@
 		<key>iOSFirst.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>0</integer>
+			<integer>17</integer>
 		</dict>
 	</dict>
 </dict>

iOSFirst/Assets.xcassets/txtlogo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "txtlogo.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "txtlogo@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "txtlogo@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

iOSFirst/ContentView.swift

@@ -9,18 +9,133 @@ import SwiftUI
 
 struct ContentView: View {
     var body: some View {
-        VStack {
-            Image(systemName: "globe")
-                .imageScale(.large)
-                .foregroundColor(.accentColor)
-            Text("Hello, world!")
-        }
-        .padding()
+        VStack(alignment:.leading,spacing: 0) {
+            HStack{
+                Spacer()
+                Image(systemName: "globe")
+                    .imageScale(.large)
+                    .foregroundColor(.accentColor)
+                Text("设置").font(.system(size: 14))
+            }
+            
+            Text("欢迎来到")
+                .foregroundColor(.gray)
+                .font(.system(size: 30))
+                .multilineTextAlignment(.center)
+                .bold()
+                .padding(.top,20)
+            
+            
+            HStack{
+                Text("logo")
+                    .foregroundColor(.gray)
+                    .font(.system(size: 30))
+                    .multilineTextAlignment(.center)
+                    .bold()
+                Image("txtlogo")
+                    .imageScale(.large)
+                    .foregroundColor(.accentColor)
+                    .frame(width: 240,height: 35)
+            }
+            .padding(.top,20)
+            .padding(.bottom,100)
+            
+            VStack(alignment: .leading, spacing: 400) {
+                HStack(alignment: .center, spacing: 15) {
+                    Image(systemName: "globe")
+                        .imageScale(.large)
+                        .foregroundColor(.accentColor)
+                    
+                    TextField("请输入手机号",text:.constant(""))
+                        .font(.system(size: 16))
+                        .frame(maxWidth: .infinity,alignment: .center)
+                    
+                }
+                
+            }
+            .frame(height: 80)
+            
+            Divider()
+            VStack(alignment: .leading, spacing: 400) {
+                HStack(alignment: .center, spacing: 15) {
+                    Image(systemName: "globe")
+                        .imageScale(.large)
+                        .foregroundColor(.accentColor)
+                    
+                    TextField("请输入密码",text:.constant(""))
+                        .font(.system(size: 16))
+                        .frame(maxWidth: .infinity,alignment: .center)
+                    
+                    
+                }
+                
+            }.frame(height: 80)
+            Divider().padding(.bottom,40)
+            
+            
+            VStack(alignment: .trailing, spacing: 400) {
+                
+                VStack(alignment: .center, spacing: 15) {
+                    Button(action: {
+                        let msg="点击了登录按钮"
+                        print(msg)
+                        SUIToast.show(messageItem: .init(
+                                            message: msg,
+                                            bgColor: .gray,
+                                            messageColor: .white
+                                        ))
+                    }) {
+                        Text("登录")
+                            .font(.system(size: 17))
+                            .bold()
+                            .frame(minWidth: 0, maxWidth: .infinity)
+                            .padding()
+                            .foregroundColor(.white)
+                            .background(.blue)
+                            .cornerRadius(30)
+                    }
+                    
+                }
+                	
+            }
+            
+            HStack{
+                Text("验证码登录").font(.system(size:15)).onTapGesture {
+                    let msg="点击了验证码登录"
+                    print(msg)
+                    SUIToast.show(messageItem: .init(
+                                        message: msg,
+                                        bgColor: .gray,
+                                        messageColor: .white
+                                    ))
+                }
+                Spacer ()
+                Text("忘记密码？").font(.system(size:15)).onTapGesture {
+                    let msg="点击了密码"
+                    print(msg)
+                    SUIToast.show(messageItem: .init(
+                                        message: msg,
+                                        bgColor: .gray,
+                                        messageColor: .white
+                                    ))
+                    
+                    
+                }.padding(.vertical,20).font(.system(size: 15))
+                
+                
+            }
+            Spacer()
+        
+        }.padding()
+        .frame(width: .infinity,height: .infinity)
     }
+    
 }
-
-struct ContentView_Previews: PreviewProvider {
-    static var previews: some View {
-        ContentView()
+    
+    struct ContentView_Previews: PreviewProvider {
+        static var previews: some View {
+            ContentView()
+        }
     }
-}
+    
+

iOSFirst/Launch Screen.storyboard

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd" userLabel="就是玩">
+                                <rect key="frame" x="0.0" y="832" width="393" height="0.0"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="哈哈哈这是启动页" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
+                                <rect key="frame" x="0.0" y="263.66666666666669" width="393" height="43"/>
+                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
+                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="SfN-ll-jLj"/>
+                            <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+</document>

iOSFirst/Preview Content/Preview Assets.xcassets/simulator_screenshot_1E921C5D-2C8A-4A9D-B20A-A5C48CD914E2.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "simulator_screenshot_1E921C5D-2C8A-4A9D-B20A-A5C48CD914E2.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

iOSFirst/Preview Content/Preview Assets.xcassets/截屏2022-12-20 23.22.36.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "截屏2022-12-20 23.22.36.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

iOSFirst/SwiftUIToast.swift

@@ -0,0 +1,259 @@
+//
+//  SwiftUIToast.swift
+//  iOSFirst
+//
+//  Created by 孙宇峰 on 2023/2/2.
+//
+
+
+import SwiftUI
+
+
+/**
+ SUIToast
+ 
+ Alias of SUIToastController
+ 
+ */
+public var SUIToast : SUIToastController {
+    return SUIToastController.shared
+}
+
+
+
+/**
+ SUIToastController
+ 
+ Supposedly a singleton to wrap and control all toast items
+ 
+ */
+public class SUIToastController : ObservableObject {
+    
+    public static var shared = SUIToastController()
+    
+    public var toastLengthLong = 3.5
+    
+    public var toastLengthShort = 2.0
+
+    @Published var items: [SUIToastViewCellItem] = []
+    
+    private var updateTimer: Timer?
+    
+    func initialize() {
+        startTimer()
+    }
+    
+    func uninitialize() {
+        stopTimer()
+    }
+    
+    public func show(_ message: String) {
+        items.append(
+            .init(
+                message: message
+            )
+        )
+    }
+    
+    public func show(messageItem: SUIToastViewCellItem) {
+        items.append(
+            messageItem
+        )
+    }
+    
+    func startTimer() {
+        updateTimer = .scheduledTimer(
+            timeInterval: 0.1,
+            target: self,
+            selector: #selector(SUIToastController.onUpdate),
+            userInfo: nil,
+            repeats: true)
+    }
+    
+    func stopTimer() {
+        if let updateTimer = updateTimer {
+            updateTimer.invalidate()
+            self.updateTimer = nil
+        }
+    }
+    
+    @objc func onUpdate() {
+        var isUpdated = false
+        
+        for k in (0 ..< items.count).reversed() {
+            let it = items[k]
+            if it.isExpired {
+                items.remove(at: k)
+                isUpdated = true
+            }
+        }
+        
+        if isUpdated {
+            self.objectWillChange.send()
+        }
+    }
+}
+
+public struct SUIToastViewCellItem: Identifiable, Hashable {
+    
+    public var id: String
+    public var message: String
+    public var bgColor: Color
+    public var messageColor: Color
+    public var createdAt: Date
+    public var toastLength: CGFloat
+    
+    public init(
+        message: String = "",
+        length: CGFloat = SUIToast.toastLengthLong,
+        bgColor: Color = .black,
+        messageColor: Color = .white
+    ) {
+        self.id = UUID().uuidString
+        self.message = message
+        self.bgColor = bgColor
+        self.messageColor = messageColor
+        self.createdAt = Date.now
+        self.toastLength = length
+    }
+
+    var isExpired: Bool {
+        get {
+            return Date.now.timeIntervalSinceReferenceDate - createdAt.timeIntervalSinceReferenceDate > toastLength
+        }
+    }
+}
+
+
+
+
+public struct SUIToastViewContainer: View {
+    
+    @StateObject var toastObs = SUIToastController.shared
+    
+    public enum StackAlignment {
+        case top
+        case bottom
+        case middle
+    }
+    
+    public enum StackOverlap {
+        case overlap
+        case stack
+    }
+    
+    var stackAlignment: StackAlignment = .bottom
+    var stackOverlap: StackOverlap = .overlap
+    
+    public init() {
+        
+    }
+    
+    
+    public init(
+        stackAlignment: StackAlignment = .bottom,
+        stackOverlap: StackOverlap = .overlap,
+        toastObs: StateObject<SUIToastController>? = nil
+    ) {
+        self.stackAlignment = stackAlignment
+        self.stackOverlap = stackOverlap
+        
+        if let toastObs = toastObs {
+            self._toastObs = toastObs
+        }
+    }
+    
+    
+    
+    public var body: some View {
+        ZStack {
+            VStack(spacing: 0) {
+                if stackAlignment == .bottom
+                    || stackAlignment == .middle {
+                    Spacer()
+                }
+                
+                if stackOverlap == .overlap {
+                    ZStack(alignment: .center) {
+                        ForEach(
+                            toastObs.items,
+                            id: \.id
+                        )
+                        { it in
+                            
+                            VStack(spacing: 0) {
+                                Spacer()
+                                SUIToastViewCell(
+                                    item: it
+                                )
+                                .zIndex(it.createdAt.timeIntervalSinceReferenceDate)
+                                .transition(
+                                    .opacity.combined(with: .move(edge: .bottom))
+                                )
+                            }
+                            
+                            
+                        }
+                    }
+
+                }
+                else if stackOverlap == .stack
+                {
+                    ForEach(
+                        toastObs.items.reversed(),
+                        id: \.id
+                    )
+                    { it in
+                        
+                        SUIToastViewCell(
+                            item: it
+                        )
+                        .transition(
+                            .opacity.combined(with: .move(edge: .bottom))
+                        )
+                        
+                    }
+
+                }
+                
+                
+
+                if stackAlignment == .top
+                    || stackAlignment == .middle {
+                    Spacer()
+                }
+            }
+        }
+        .animation(.default, value: toastObs.items)
+        .onAppear {
+            toastObs.initialize()
+        }
+        .onDisappear {
+            toastObs.uninitialize()
+        }
+    }
+}
+
+internal struct SUIToastViewCell: View {
+    var item: SUIToastViewCellItem
+    
+    var body: some View {
+        ZStack {
+            VStack(spacing: 0) {
+                HStack(spacing: 8) {
+                    Text(item.message)
+                        .foregroundColor(item.messageColor)
+                }
+            }
+            .padding(.horizontal, 20)
+            .padding(.vertical, 10)
+            .background(
+                RoundedRectangle(cornerRadius: 10)
+                    .fill(item.bgColor)
+            )
+        }
+        .padding(.horizontal, 20)
+        .padding(.vertical, 10)
+        .allowsHitTesting(false)
+    }
+}

iOSFirst/iOSFirstApp.swift

@@ -9,9 +9,11 @@ import SwiftUI
 
 @main
 struct iOSFirstApp: App {
+    
     var body: some Scene {
         WindowGroup {
             ContentView()
+            SUIToastViewContainer(stackOverlap: .overlap)
         }
     }
 }