Jason/swift-study
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

自定义形状，

Browse Source
This commit is contained in:
Jason.Chen
2024-01-30 18:06:53 +08:00
parent 5109b242a6
commit 073ff4aa68
11 changed files with 194 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
demo/Views/Home/HomeView.swift
View File

@@ -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("石床垫：阿特伍德黑暗就故事（有的人说啥就是啥呢有的人说啥就是啥呢有的人说啥就是啥呢）")

10
demo/Views/Layouts/NavigationPageView.swift
View File

@@ -7,14 +7,14 @@
import SwiftUI
struct NavigationPageView: View {
@Environment(\.dismiss) private var dismiss
struct NavigationPageView<T: View>: View {
@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")

11
demo/Views/Layouts/TabBarView.swift
View File

@@ -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)
.fontWeight(.regular)
.multilineTextAlignment(.center)
.lineLimit(1)
.navBarText()
}
.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)
}
}

1
demo/Views/Mall/CartView.swift
View File

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

167
demo/Views/Mall/GoodsDetailView.swift
View File

@@ -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 {
ScrollView {
VStack {
ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
Image("Images/banner1")
.resizable()
.scaledToFit()
}
HStack {
Text(title)
CamelPrice(amount: 32.112)
}
VStack {
Text("商品详情部分")
}
}
}
.padding(.bottom, 100)
.ignoresSafeArea(.all)
HStack {
HStack {
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Image(systemName: "chevron.backward")
Spacer()
Image(systemName: "ellipsis")
}
.padding(12.0)
.background(LinearGradient(colors: [Color.white, Color.white.opacity(0)], startPoint: .top, endPoint: .bottom))
.frame(maxHeight: .infinity, alignment: .top)
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)
.accentColor(Color.black)
Text(title)
.frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/)
Image(systemName: "ellipsis")
}
.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)
// .navigationTitle(title)
// .navigationBarBackButtonHidden(true)
// .toolbar {
// ToolbarItem(placement: .navigationBarLeading) {
// Button {
// dismiss()
// } label: {
// HStack {
// Image(systemName: "chevron.backward")
// }
// }
// }
// }
.ignoresSafeArea()
// .background(Color.white)
// .background(LinearGradient(colors: [Color.white, Color.white.opacity(0)], startPoint: .top, endPoint: .bottom))
HStack(spacing: 0) {
HStack(spacing: 12) {
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: 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)
}
}

4
demo/Views/User/Info/UserAvatarView.swift
View File

@@ -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")
}

54
demo/Views/User/UserView.swift
View File

@@ -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)
.offset(y: 12)
TopRoundedRectangle(cornerRadius: 8)
)
.padding(.horizontal, 12)
}
@@ -109,25 +103,10 @@ struct UserView: View {
}
.padding(.top, 12)
.background(
Color.white
.overlay(alignment: .top) {
RoundedRectangle(cornerRadius: 12)
.fill(LinearGradient(colors: [Color.orange.opacity(0.3), grayBackground], startPoint: .top, endPoint: .bottom))
.frame(height: 92)
}
TopRoundedRectangle(cornerRadius: 12)
.fill(LinearGradient(colors: [Color.orange, Color.clear], startPoint: .top, endPoint: UnitPoint(x: 0.5, y: 0.2)))
)
.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 {
Text("5")
.foregroundColor(Color.white)
.font(.system(size: 12))
}
.overlay(Text("5")
.foregroundColor(Color.white)
.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)
}
}