自定义形状，

demo.xcodeproj/project.pbxproj

@@ -7,6 +7,8 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		96151D962B68BE7100DBB72C /* ViewExtensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96151D952B68BE7100DBB72C /* ViewExtensions.swift */; };
+		96151D992B68FC9800DBB72C /* TopRoundedRectangle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96151D982B68FC9800DBB72C /* TopRoundedRectangle.swift */; };
 		968A6F642B5F4C99008609EE /* demoApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 968A6F632B5F4C99008609EE /* demoApp.swift */; };
 		968A6F6A2B5F4C9B008609EE /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 968A6F692B5F4C9B008609EE /* Assets.xcassets */; };
 		968A6F6D2B5F4C9B008609EE /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 968A6F6C2B5F4C9B008609EE /* Preview Assets.xcassets */; };
@@ -47,6 +49,8 @@
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
+		96151D952B68BE7100DBB72C /* ViewExtensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewExtensions.swift; sourceTree = "<group>"; };
+		96151D982B68FC9800DBB72C /* TopRoundedRectangle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TopRoundedRectangle.swift; sourceTree = "<group>"; };
 		968A6F602B5F4C99008609EE /* demo.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = demo.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		968A6F632B5F4C99008609EE /* demoApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = demoApp.swift; sourceTree = "<group>"; };
 		968A6F692B5F4C9B008609EE /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
@@ -98,6 +102,14 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		96151D972B68FC5600DBB72C /* Extensions */ = {
+			isa = PBXGroup;
+			children = (
+				96151D982B68FC9800DBB72C /* TopRoundedRectangle.swift */,
+			);
+			path = Extensions;
+			sourceTree = "<group>";
+		};
 		968A6F572B5F4C99008609EE = {
 			isa = PBXGroup;
 			children = (
@@ -117,11 +129,13 @@
 		968A6F622B5F4C99008609EE /* demo */ = {
 			isa = PBXGroup;
 			children = (
+				96151D972B68FC5600DBB72C /* Extensions */,
 				968A6F762B5F4E0D008609EE /* Components */,
 				968A6F732B5F4DF3008609EE /* Controllers */,
 				968A6F742B5F4DF9008609EE /* Models */,
 				968A6F752B5F4DFD008609EE /* Views */,
 				968A6F632B5F4C99008609EE /* demoApp.swift */,
+				96151D952B68BE7100DBB72C /* ViewExtensions.swift */,
 				968A6F692B5F4C9B008609EE /* Assets.xcassets */,
 				968A6F6B2B5F4C9B008609EE /* Preview Content */,
 			);
@@ -344,6 +358,7 @@
 				968A6F852B5F4EB2008609EE /* MessageView.swift in Sources */,
 				968A6FA02B5F6893008609EE /* RegisterView.swift in Sources */,
 				968A6FB22B5FC3A2008609EE /* ShowMore.swift in Sources */,
+				96151D992B68FC9800DBB72C /* TopRoundedRectangle.swift in Sources */,
 				968A6F822B5F4EA1008609EE /* MallView.swift in Sources */,
 				968A6F972B5F683E008609EE /* CouponView.swift in Sources */,
 				96E93E9B2B622931004AB649 /* UserAvatarView.swift in Sources */,
@@ -362,6 +377,7 @@
 				968A6F7F2B5F4E91008609EE /* HomeView.swift in Sources */,
 				968A6FA22B5F68AA008609EE /* ForgotView.swift in Sources */,
 				968A6F792B5F4E28008609EE /* TabBarView.swift in Sources */,
+				96151D962B68BE7100DBB72C /* ViewExtensions.swift in Sources */,
 				96E93EA32B63B164004AB649 /* RadioButton.swift in Sources */,
 				96E93E9F2B62305F004AB649 /* UserNicknameView.swift in Sources */,
 				968A6FA82B5F6AF3008609EE /* CartView.swift in Sources */,
@@ -519,7 +535,7 @@
 				INFOPLIST_KEY_UIRequiresFullScreen = YES;
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -556,7 +572,7 @@
 				INFOPLIST_KEY_UIRequiresFullScreen = YES;
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",

demo/Extensions/TopRoundedRectangle.swift

@@ -0,0 +1,43 @@
+//
+//  TopRound.swift
+//  demo
+//
+//  Created by Jason on 2024/1/30.
+//
+
+import SwiftUI
+
+// 顶部圆角图形，兼容ios16以下版本用的
+struct TopRoundedRectangle: Shape {
+    let cornerRadius: Double
+
+    init(cornerRadius: Double = 0) {
+        self.cornerRadius = cornerRadius
+    }
+
+    func path(in rect: CGRect) -> Path {
+        Path { path in
+            path.move(to: CGPoint(x: rect.minX + cornerRadius, y: rect.minY))
+            path.addLine(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY))
+            path.addArc(
+                center: CGPoint(x: rect.width - cornerRadius, y: cornerRadius),
+                radius: cornerRadius,
+                startAngle: Angle(degrees: -90),
+                endAngle: Angle(degrees: 0),
+                clockwise: false
+            )
+
+            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
+            path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
+            path.addLine(to: CGPoint(x: rect.minX, y: cornerRadius))
+
+            path.addArc(
+                center: CGPoint(x: cornerRadius, y: cornerRadius),
+                radius: cornerRadius,
+                startAngle: Angle(degrees: 180),
+                endAngle: Angle(degrees: 270),
+                clockwise: false
+            )
+        }
+    }
+}

demo/ViewExtensions.swift

@@ -0,0 +1,24 @@
+//
+//  ViewExtensions.swift
+//  demo
+//
+//  Created by Jason on 2024/1/30.
+//
+
+import SwiftUI
+
+// 自定义的修改器
+struct MiniFontSize: ViewModifier {
+    func body(content: Content) -> some View {
+        content.font(.system(size: 12))
+    }
+}
+
+// 视图扩展 ，可以使用 . 语法
+extension View {
+    func navBarText() -> some View {
+        font(.system(size: 12))
+            .multilineTextAlignment(.center)
+            .lineLimit(1)
+    }
+}

demo/Views/Home/HomeView.swift

@@ -26,7 +26,6 @@ struct HomeView: View {
         }
         .frame(maxWidth: .infinity)
         .padding(.horizontal, 12)
-        .background(Color.gray.opacity(0.2))
     }
 
     var Search: some View {
@@ -48,17 +47,17 @@ struct HomeView: View {
             Image(systemName: "bell")
                 .resizable()
                 .frame(width: 24, height: 24)
-                .overlay(alignment: .topTrailing) {
+                .overlay(
                     Circle()
                         .fill(Color.red.opacity(0.8))
                         .frame(width: 20, height: 20)
-                        .overlay {
+                        .overlay(
                             Text("20")
                                 .foregroundColor(Color.white)
                                 .font(.system(size: 12))
-                        }
+                        )
                         .offset(x: 8, y: -10)
-                }
+                )
 
             Spacer()
         }
@@ -243,14 +242,14 @@ struct HomeView: View {
                     Image("Images/LaunchScreen")
                         .resizable(resizingMode: /*@START_MENU_TOKEN@*/ .stretch/*@END_MENU_TOKEN@*/)
                         .frame(maxWidth: 120, maxHeight: 150)
-                        .overlay(alignment: .bottom) {
+                        .overlay(
                             Text("剩余100")
                                 .font(.system(size: 14))
                                 .foregroundColor(Color.white)
                                 .frame(maxWidth: .infinity)
                                 .padding(.vertical, 4)
                                 .background(Color.red.opacity(0.5))
-                        }
+                        )
                         .cornerRadius(8)
                     VStack {
                         Text("石床垫：阿特伍德黑暗就故事（有的人说啥就是啥呢有的人说啥就是啥呢有的人说啥就是啥呢）")

demo/Views/Layouts/NavigationPageView.swift

@@ -7,14 +7,14 @@
 
 import SwiftUI
 
-struct NavigationPageView: View {
+struct NavigationPageView<T: View>: View {
-    @Environment(\.dismiss) private var dismiss
+    @Environment(\.presentationMode) private var presentationMode
     var title: String = ""
-    var content: any View
+    var content: T?
 
     var body: some View {
         ScrollView {
-            AnyView(content)
+            content
         }
         .navigationBarTitleDisplayMode(.inline)
         .navigationTitle(title)
@@ -22,7 +22,7 @@ struct NavigationPageView: View {
         .toolbar {
             ToolbarItem(placement: .navigationBarLeading) {
                 Button {
-                    dismiss()
+                    presentationMode.wrappedValue.dismiss()
                 } label: {
                     HStack {
                         Image(systemName: "chevron.backward")

demo/Views/Layouts/TabBarView.swift

@@ -13,6 +13,9 @@ struct TabBarView: View {
     var body: some View {
         NavigationView {
             ZStack {
+                Rectangle()
+                    .fill(Color.gray.opacity(0.2))
+                    .ignoresSafeArea()
                 Group {
                     switch selectedTab {
                     case .home:
@@ -34,10 +37,7 @@ struct TabBarView: View {
                             VStack(spacing: 6) {
                                 Image(systemName: item.icon).resizable().frame(width: 18, height: 18)
                                 Text(item.text)
-                                    .font(.caption)
+                                    .navBarText()
-                                    .fontWeight(.regular)
-                                    .multilineTextAlignment(.center)
-                                    .lineLimit(1)
                             }
                             .frame(maxWidth: .infinity)
                         })
@@ -46,12 +46,11 @@ struct TabBarView: View {
                     }
                 }
                 .padding(.vertical, 12.0)
-                .background(Color("TabBarColor"))
+                .background(Color("TabBarColor").ignoresSafeArea())
                 .frame(maxHeight: .infinity, alignment: .bottom)
                 .shadow(color: Color.gray.opacity(0.5), radius: 6, x: 0, y: 6)
             }
         }
-        .navigationViewStyle(.columns)
     }
 }
 

demo/Views/Mall/CartView.swift

@@ -68,7 +68,6 @@ struct CartView: View {
         }
         .animation(.linear(duration: 10), value: isCheckAll)
         .padding(.bottom, 62)
-        .background(Color.gray.opacity(0.2))
     }
 }
 

demo/Views/Mall/GoodsDetailView.swift

@@ -8,104 +8,91 @@
 import SwiftUI
 
 struct GoodsDetailView: View {
-    @Environment(\.dismiss) private var dismiss
+    @Environment(\.presentationMode) private var presentationMode
     var title: String
 
     var body: some View {
-        ZStack {
+        HStack {
-            ScrollView {
+            Button {
-                VStack {
+                presentationMode.wrappedValue.dismiss()
-                    ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
+            } label: {
-                        Image("Images/banner1")
-                            .resizable()
-                            .scaledToFit()
-                    }
-
-                    HStack {
-                        Text(title)
-                        CamelPrice(amount: 32.112)
-                    }
-                    VStack {
-                        Text("商品详情部分")
-                    }
-                }
-            }
-
-            .padding(.bottom, 100)
-            .ignoresSafeArea(.all)
-
-            HStack {
                 Image(systemName: "chevron.backward")
-                Spacer()
-                Image(systemName: "ellipsis")
             }
-            .padding(12.0)
+            .accentColor(Color.black)
-            .background(LinearGradient(colors: [Color.white, Color.white.opacity(0)], startPoint: .top, endPoint: .bottom))
+            Text(title)
-            .frame(maxHeight: .infinity, alignment: .top)
+                .frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/)
-
+            Image(systemName: "ellipsis")
-            HStack(spacing: 0) {
-                HStack(spacing: 8) {
-                    Image(systemName: "house")
-                        .resizable()
-                        .foregroundColor(Color.gray)
-                        .frame(width: 20, height: 18)
-                    Image(systemName: "person.fill.questionmark")
-                        .resizable()
-                        .foregroundColor(Color.gray)
-                        .frame(width: 20, height: 18)
-                    Image(systemName: "star")
-                        .resizable()
-                        .foregroundColor(Color.gray)
-                        .frame(width: 20, height: 18)
-                    Image(systemName: "cart")
-                        .resizable()
-                        .foregroundColor(Color.gray)
-                        .frame(width: 20, height: 18)
-                }
-                Spacer()
-                HStack(spacing: 12) {
-                    Button {} label: {
-                        Text("加入购物车")
-                            .font(.system(size: 15))
-                            .foregroundColor(Color.white)
-                    }
-                    Rectangle()
-                        .fill(Color.white)
-                        .frame(width: 1, height: 14)
-                    Button {} label: {
-                        Text("立即购买")
-                            .font(.system(size: 15))
-                            .foregroundColor(Color.white)
-                    }
-                }
-                .padding(.vertical, 12)
-                .padding(.horizontal, 24)
-                .background(LinearGradient(colors: [Color.orange, Color.red], startPoint: .leading, endPoint: .trailing))
-                .clipShape(
-                    RoundedRectangle(cornerRadius: 24)
-                )
-            }
-            .padding(12.0)
-            .frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/)
-            .background(Color("TabBarColor"))
-            .frame(maxHeight: .infinity, alignment: .bottom)
         }
+        .padding(.horizontal, 12.0)
 
+        ScrollView {
+            VStack {
+                Image("Images/banner1")
+                    .resizable()
+                    .scaledToFit()
+
+                HStack {
+                    Text(title)
+                    CamelPrice(amount: 32.112)
+                }
+                VStack {
+                    Text("商品详情部分")
+                }
+            }
+        }
         .background(Color.gray.opacity(0.2))
-//        .navigationBarTitleDisplayMode(.inline)
+        .ignoresSafeArea()
-//        .navigationTitle(title)
+
-//        .navigationBarBackButtonHidden(true)
+        //            .background(Color.white)
-//        .toolbar {
+
-//            ToolbarItem(placement: .navigationBarLeading) {
+        //            .background(LinearGradient(colors: [Color.white, Color.white.opacity(0)], startPoint: .top, endPoint: .bottom))
-//                Button {
+
-//                    dismiss()
+        HStack(spacing: 0) {
-//                } label: {
+            HStack(spacing: 12) {
-//                    HStack {
+                Image(systemName: "house")
-//                        Image(systemName: "chevron.backward")
+                    .resizable()
-//                    }
+                    .foregroundColor(Color.gray)
-//                }
+                    .frame(width: 20, height: 18)
-//            }
+                Image(systemName: "person.fill.questionmark")
-//        }
+                    .resizable()
+                    .foregroundColor(Color.gray)
+                    .frame(width: 20, height: 18)
+                Image(systemName: "star")
+                    .resizable()
+                    .foregroundColor(Color.gray)
+                    .frame(width: 20, height: 18)
+                Image(systemName: "cart")
+                    .resizable()
+                    .foregroundColor(Color.gray)
+                    .frame(width: 20, height: 18)
+            }
+            Spacer()
+            HStack(spacing: 12) {
+                Button {} label: {
+                    Text("加入购物车")
+                        .font(.system(size: 14))
+                        .foregroundColor(Color.white)
+                }
+                Rectangle()
+                    .fill(Color.white)
+                    .frame(width: 0.4, height: 14)
+                Button {} label: {
+                    Text("立即购买")
+                        .font(.system(size: 14))
+                        .foregroundColor(Color.white)
+                }
+            }
+            .padding(.vertical, 10)
+            .padding(.horizontal, 24)
+            .background(LinearGradient(colors: [Color.orange, Color.red], startPoint: .leading, endPoint: .trailing))
+            .clipShape(
+                RoundedRectangle(cornerRadius: 24)
+            )
+        }
+        .padding(.horizontal, 12.0)
+        .frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/)
+        .background(Color("TabBarColor"))
+        .navigationBarBackButtonHidden(true)
     }
 }
 

demo/Views/User/Info/UserAvatarView.swift

@@ -8,7 +8,7 @@
 import SwiftUI
 
 struct UserAvatarView: View {
-    @Environment(\.dismiss) private var dismiss
+    @Environment(\.presentationMode) private var presentationMode
 
     @State private var showSheet = false
 
@@ -22,7 +22,7 @@ struct UserAvatarView: View {
         .toolbar {
             ToolbarItem(placement: .navigationBarLeading) {
                 Button {
-                    dismiss()
+                    presentationMode.wrappedValue.dismiss()
                 } label: {
                     Image(systemName: "chevron.backward")
                 }

demo/Views/User/UserView.swift

@@ -11,12 +11,6 @@ struct UserView: View {
     @State private var showDetail = false
     @State private var showUserInfo = false
 
-    var grayBackground = Color.gray.opacity(0.2)
-
-    init() {
-        print(UIScreen.main.bounds.width)
-    }
-
     var body: some View {
         ScrollView(.vertical, showsIndicators: false) {
             VStack(spacing: 0) {
@@ -64,6 +58,7 @@ struct UserView: View {
             }
         }
         .padding(.horizontal, 24)
+        .padding(.bottom, 12)
     }
 
     var ToVip: some View {
@@ -88,8 +83,7 @@ struct UserView: View {
         .frame(height: showDetail ? 64 : 150, alignment: .topLeading)
         .background(Color.red.opacity(0.3))
         .clipShape(
-            RoundedRectangle(cornerRadius: 12)
+            TopRoundedRectangle(cornerRadius: 8)
-                .offset(y: 12)
         )
         .padding(.horizontal, 12)
     }
@@ -109,25 +103,10 @@ struct UserView: View {
         }
         .padding(.top, 12)
         .background(
-            Color.white
+            TopRoundedRectangle(cornerRadius: 12)
-                .overlay(alignment: .top) {
+                .fill(LinearGradient(colors: [Color.orange, Color.clear], startPoint: .top, endPoint: UnitPoint(x: 0.5, y: 0.2)))
-                    RoundedRectangle(cornerRadius: 12)
-                        .fill(LinearGradient(colors: [Color.orange.opacity(0.3), grayBackground], startPoint: .top, endPoint: .bottom))
-                        .frame(height: 92)
-                }
         )
         .clipped()
-
-//        Rectangle()
-//            .fill(Color.white)
-//            .frame(height: 12)
-//            .overlay {
-//                RoundedRectangle(cornerRadius: 12)
-//                    .fill(grayBackground)
-//                    .frame(height: 24)
-//                    .offset(y: 6)
-//            }
-//            .clipped()
     }
 
     var Notice: some View {
@@ -167,7 +146,6 @@ struct UserView: View {
         .cornerRadius(8)
         .padding(.horizontal, 12)
         .padding(.vertical, 12)
-        .background(grayBackground)
     }
 
     var OrderShow: some View {
@@ -195,17 +173,16 @@ struct UserView: View {
                                 .resizable()
                                 .frame(width: 24, height: 24)
                                 .foregroundColor(Color.gray)
-                                .overlay(alignment: .topTrailing) {
+                                .overlay(
                                     Circle()
                                         .fill(Color.red.opacity(0.9))
                                         .frame(width: 20, height: 20)
-                                        .overlay {
+                                        .overlay(Text("5")
-                                            Text("5")
+                                            .foregroundColor(Color.white)
-                                                .foregroundColor(Color.white)
+                                            .font(.system(size: 12))
-                                                .font(.system(size: 12))
+                                        )
-                                        }
                                         .offset(x: 12, y: -10)
-                                }
+                                )
 
                             Text("待付款")
                                 .font(.system(size: 12))
@@ -221,7 +198,6 @@ struct UserView: View {
         .cornerRadius(6)
         .padding(.horizontal, 12)
         .padding(.bottom, 12)
-        .background(grayBackground)
     }
 
     var Coupons: some View {
@@ -237,17 +213,17 @@ struct UserView: View {
                                 .resizable()
                                 .frame(width: 24, height: 24)
                                 .foregroundColor(Color.gray)
-                                .overlay(alignment: .topTrailing) {
+                                .overlay(
                                     Circle()
                                         .fill(Color.red.opacity(0.9))
                                         .frame(width: 20, height: 20)
-                                        .overlay {
+                                        .overlay(
                                             Text("5")
                                                 .foregroundColor(Color.white)
                                                 .font(.system(size: 12))
-                                        }
+                                        )
                                         .offset(x: 12, y: -10)
-                                }
+                                )
                             Text("待付款")
                                 .font(.system(size: 12))
                                 .foregroundColor(Color.gray)
@@ -263,7 +239,6 @@ struct UserView: View {
         .cornerRadius(6)
         .padding(.horizontal, 12)
         .padding(.bottom, 12)
-        .background(grayBackground)
     }
 
     let columns = [GridItem(.flexible(), spacing: 12), GridItem(.flexible(), spacing: 12)]
@@ -290,7 +265,6 @@ struct UserView: View {
         }
         .padding(.horizontal, 12)
         .padding(.bottom, 12)
-        .background(grayBackground)
     }
 }