[英]SwiftUI center items in LazyVGrid
我是 SwiftUI 的新手,正在尝试将LazyVGrid
视图中的元素居中。
这是我目前拥有的:
使用:
var body: some View {
ZStack {
Color(red: 75/255, green: 0, blue: 130/255).ignoresSafeArea()
VStack {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 30))], alignment: .center, spacing: 10) {
let letters = wordToArray(word: testWord)
ForEach(Array(letters.enumerated()), id: \.offset) { letter in
Text(String(letter.element).capitalized)
.foregroundColor(.blue)
.frame(width:30, height: 40)
.background(Color.yellow)
.cornerRadius(5)
}
}
.padding()
}
}
}
但是正如您所看到的,这只会将元素向左对齐 - 我也不知道我可能需要显示的字符数。 我还希望它们之间的间距与上面相同。
任何帮助将不胜感激!
谢谢。
2个选项
struct CenteredLVSView: View {
@State var letters: [String] = ["A", "B", "C", "D", "E","A", "B", "C", "D", "E","A", "B", "C", "D", "E"]
//Specify column count and it will justify/center by width
@State var columnCount: Int = 5
var body: some View {
ZStack {
Color(red: 75/255, green: 0, blue: 130/255).ignoresSafeArea()
LazyVGrid(columns: Array(repeating: GridItem(.flexible(minimum: 30
//If you set max it will center on width if smaller than max, uncomment below
//, maximum: 40
)), count: columnCount), spacing: 10){
ForEach(Array(letters.enumerated()), id: \.offset) { letter in
Text(String(letter.element).capitalized)
.foregroundColor(.blue)
.frame(width:30, height: 40)
.background(Color.yellow)
.cornerRadius(5)
}
}
.padding()
}
}
}
更改为LazyHGrid
struct CenteredLVSView: View {
@State var letters: [String] = ["A", "B", "C", "D", "E","A", "B", "C", "D", "E","A", "B", "C", "D", "E"]
//Specify row count and it will justify/center height
@State var rowCount: Int = 5
var body: some View {
ZStack {
Color(red: 75/255, green: 0, blue: 130/255).ignoresSafeArea()
LazyHGrid(rows: Array(repeating: GridItem(.flexible(minimum: 30
//If you set max it will center if smaller than max, height uncomment below
//, maximum: 40
)), count: rowCount), spacing: 10){
ForEach(Array(letters.enumerated()), id: \.offset) { letter in
Text(String(letter.element).capitalized)
.foregroundColor(.blue)
.frame(width:30, height: 40)
.background(Color.yellow)
.cornerRadius(5)
}
}
.padding()
}
}
}
正如评论中所述,如果您设置了maximum
它们将居中/对齐到该最大值
我遇到了同样的问题但无法解决,所以我使用了 ScrollView 和 foreach 来实现我需要的相同方式
struct Subview: View {
var Items = ["a","b","c","d","e"]
var body: some View {
ZStack(){
Color("AccentColor").edgesIgnoringSafeArea(.all)
VStack{
HStack(alignment:.center){
GeometryReader { geo in
ScrollView(.horizontal,showsIndicators: false){
HStack(alignment:.center){
ForEach(Items, id: \.self) { item in
Button {
} label: {
Text("\(item)")
}.frame(width:50,height: 50, alignment: .center).background(Color.red).cornerRadius(25)
}
}.frame(width:geo.size.width,height: geo.size.height ,alignment: .center)
}
}
}.frame(width: UIScreen.main.bounds.width - 40, height: 100, alignment: .center)
}
}.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height, alignment: .center)
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.