shape.strokeBorder(lineWidth: 3) //解决裁边的问题
LazyVGrid(columns: [GridItem(),GridItem(),GridItem()]) //设置为固定3列
ScrollView //滑动,解决超出
.aspectRatio(2/3, contentMode: .fit) //设置默认宽高比
LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) //设置卡片最小宽度,横屏不会超大
代码备份
import SwiftUI
struct ContentView: View {
var emojis = ["🚙", "🚗", "⛱", "🎡", "🪝", "🗿", "🛖", "⏱", "☎️", "🎰","🚜","🛴", "✈️"]
@State var emojiCount = 4
var body: some View {
VStack {
ScrollView {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]){
ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
}
}
}
.foregroundColor(.red)
Spacer()
HStack {
remove
Spacer()
add
}
.font(.largeTitle)
.padding(.horizontal)
}
.padding(.horizontal)
}
var remove: some View {
Button(action:{
if emojiCount > 1{
emojiCount -= 1
}
}, label: {
Image(systemName: "minus.circle")
})
}
var add: some View {
Button(action:{
if emojiCount < emojis.count {
emojiCount += 1
}
}, label: {
Image(systemName: "plus.circle")
})
}
}
struct CardView: View {
var content: String
@State var isFaceUp: Bool = true
var body: some View {
ZStack {
let shape = RoundedRectangle(cornerRadius: 20)
if isFaceUp {
shape.fill().foregroundColor(.white)
shape.strokeBorder(lineWidth: 3)
Text(content).font(.largeTitle)
} else {
shape.fill()
}
}
.onTapGesture {
isFaceUp = !isFaceUp
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.preferredColorScheme(/*@START_MENU_TOKEN@*/.dark/*@END_MENU_TOKEN@*/)
ContentView()
.preferredColorScheme(.light)
}
}
网友评论