我必須做一個帶有影像、兩個文本和兩個按鈕的 collectionView。我想在 LazyVGrid 中增加 VStack 的填充，但無法實作。你能幫我弄清楚出了什么問題嗎？
let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .center), count: 2)
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: columns, spacing: 20, content: {
ForEach(data, id:\.self) { item in
VStack(alignment: .leading, spacing: 10) {
Image("\(item.image)")
.resizable()
.frame(width: 150, height: 200)
.padding(4)
.cornerRadius(10)
Text(item.name)
Text(item.price)
HStack(spacing: 15) {
Button(action: {}) {
HStack {
Image(systemName: "cart")
Text("В Корзину")
.fixedSize(horizontal: true, vertical: false)
}
.padding(10)
.background(Color.blue)
.foregroundColor(Color.white)
.cornerRadius(10)
}
Button(action: {}) {
Image(systemName: "heart")
}
.padding(10)
.background(Color.white)
.clipShape(Rectangle())
.foregroundColor(.blue)
.cornerRadius(10)
}
} .foregroundColor(Color.black)
.background(Color.red)
.cornerRadius(25)
.padding(15)
}
}).padding(15)
}
}
}
}
uj5u.com熱心網友回復：
歡迎使用堆疊溢位！請參加游覽并查看：我如何提出一個好問題？以及如何創建最小的、可重現的示例。
你在這里有一堆問題，它們都是小事情，加起來你的觀點有重大問題。我做的第一件事就是把你的column改為.fixed(). 這可能是也可能不是您想要的，但似乎您想要相同大小的網格專案。
我還通過設定.aspectRatio(contentMode: .fit)和 a.frame(height: 140)來控制影像。
接下來，我盡可能多地洗掉了.padding()。我也把更多的VStacks和HStacks在保持邏輯順序的事情。當我完成此操作時，問題似乎出在HStack. 根本沒有空間，所以我移動了favorite按鈕。
我的總體建議。設定框架，但如果可能，只設定一個方向。按邏輯分組思考。確保適合不同的視圖。使用框架和縱橫比管理您的影像。
最后一件事：關于如何像您一樣使用視圖的問題，請給出一個最小的、可重現的示例來使用。我必須制作一個資料結構，并使用 SF Symbols，這樣它才能在其他人的機器上運行。你在問這個問題，所以這是你應該做的作業，花時間幫助他們。這樣你會得到更多的答案。
struct GridPaddingView: View {
let dataArray: [Datum] = [
Datum(name: "square", image: "square.and.arrow.up.trianglebadge.exclamationmark", price: "$1.00"),
Datum(name: "trash", image: "trash.slash.fill", price: "$1.00"),
Datum(name: "folder", image: "folder.badge.minus", price: "$1.00"),
Datum(name: "external drive", image: "externaldrive.fill.badge.minus", price: "$1.00"),
Datum(name: "doc", image: "doc.fill.badge.plus", price: "$1.00"),
Datum(name: "calendar", image: "calendar.day.timeline.leading", price: "$1.00")
]
let columns = Array(repeating: GridItem(.fixed(180), spacing: 10), count: 2)
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: columns) {
ForEach(dataArray) { item in
VStack(alignment: .leading) {
VStack(alignment: .leading) {
Image(systemName: item.image)
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(10)
.frame(height: 140)
HStack {
VStack(alignment: .leading) {
Text(item.name)
.fixedSize(horizontal: false, vertical: true)
Text(item.price)
}
Spacer()
Button(action: {}) {
Image(systemName: "heart")
}
.padding(10)
.background(Color.white)
.foregroundColor(.blue)
.cornerRadius(10)
}
}
.padding(5)
Spacer()
HStack() {
Spacer()
Button(action: {}) {
HStack {
Image(systemName: "cart")
Text("В Корзину")
.fixedSize(horizontal: true, vertical: false)
}
.padding()
.background(Color.blue)
.foregroundColor(Color.white)
.cornerRadius(10)
}
Spacer()
}
}
.padding(10)
.frame(height: 300)
.background(Color.red)
.cornerRadius(25)
}
}
}
}
}
}
struct Datum: Identifiable {
let id = UUID()
let name: String
let image: String
let price: String
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/346320.html