gpt4 book ai didi

SwiftUI:为什么这个ScrollView的内容放错了地方?

转载 作者:行者123 更新时间:2023-12-04 15:34:47 26 4
gpt4 key购买 nike

下面的示例代码应该在 ScrollView 中生成一个圆角矩形网格。使用 NavigationBar 中的按钮,您可以更改行数和列数。它在 iPad 上运行最佳,因为它的屏幕更大。

当您运行这段代码时,您会看到(或者至少,我看到)ScrollView 的内容没有很好地居中。当你添加一些行和列时,你看不到最上面和最左边的,在底部和右边有一些空白。

有更多人遇到这个问题吗?有人找到解决办法了吗?有人知道另一种创建具有灵活宽度和高度的可滚动网格的方法吗?

import SwiftUI

struct ContentView: View {
@State var x: Int = 5
@State var y: Int = 5
var body: some View {
NavigationView {
ScrollView([.horizontal, .vertical]) {
VStack(spacing: 8) {
ForEach(0 ..< self.y, id: \.self) { yCoor in
HStack(spacing: 8) {
ForEach(0 ..< self.x, id: \.self) { xCoor in
RoundedRectangle(cornerRadius: 10)
.frame(width: 120, height: 120)
.foregroundColor(.orange)
.overlay(Text("(\(xCoor), \(yCoor))"))
}
}
}
}
.border(Color.green)
}
.border(Color.blue)
.navigationBarTitle("Contents of ScrollView misplaced", displayMode: .inline)
.navigationBarItems(
leading: HStack(spacing: 16) {
Text("x:")
.bold()
Button(action: { if self.x > 0 { self.x -= 1 } }) {
Image(systemName: "minus.circle.fill")
.imageScale(.large)
}
Button(action: { self.x += 1 }) {
Image(systemName: "plus.circle.fill")
.imageScale(.large)
}
},
trailing: HStack(spacing: 16) {
Text("y:")
.bold()
Button(action: { if self.y > 0 { self.y -= 1 } }) {
Image(systemName: "minus.circle.fill")
.imageScale(.large)
}
Button(action: { self.y += 1 }) {
Image(systemName: "plus.circle.fill")
.imageScale(.large)
}
}
)
}
.navigationViewStyle(StackNavigationViewStyle())
}
}

最佳答案

一些解决方法是将垂直轴和水平轴的 ScrollView 分开。

import SwiftUI

struct Row: View {
var _y: Int
var x: Range<Int>
var body: some View {
HStack {
ForEach(x) { _x in
RoundedRectangle(cornerRadius: 10).tag(_x)
.frame(width: 120, height: 120)
.foregroundColor(.orange)
.overlay(Text("(\(_x), \(self._y))"))
}
}
}
}

struct Grid: View {
var m: Int
var n: Int

var body: some View {
ScrollView(.horizontal){
ScrollView(.vertical) {
ForEach(0 ..< n) { _y in
Row(_y: _y, x: 0 ..< self.m)
}
}
}
}
}

struct ContentView: View {
var body: some View {
VStack {
Text("Grid").font(.title)
Grid(m: 5, n: 5)
}
}
}

enter image description here

enter image description here

它仍然不完美,但可以使用。最好的是只使用一个滚动轴并填充第二个方向具有正确数量的细胞。

我想念如何知道并能够调整滚动位置。 SwiftUI 处于非常早期的阶段,一旦它会更可靠,请耐心等待

关于SwiftUI:为什么这个ScrollView的内容放错了地方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60120497/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com