ios - SwiftUI如何对齐大于屏幕宽度的 View

标签 ios swift view swiftui

我正在使用 SwiftUI 绘制一个表格,该表格具有太多的行和列,无法适应屏幕的宽度/高度。在这种情况下,我无法将 View 对齐为领先,但总是居中。我怎样才能将它们排在首位?
这是绘制表格的 View :

struct TableView: View {
    let columnCount: Int = 9
    let rowCount: Int = 14

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            ScrollView([.vertical, .horizontal], showsIndicators: false) {
                GridStack(rows: self.rowCount, columns: self.columnCount) { row, col in
                    Text("ROW \(String(row)) COL \(String(col))")
                        .frame(width: 120)

                }
            }
        }
    }
}

这是 GridStack:
struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content

    var body: some View {
        VStack(alignment: .leading) {
            ForEach(0 ..< rows) { row in
                HStack(alignment: .top) {
                    ForEach(0 ..< self.columns) { column in
                        self.content(row, column)
                    }
                }
            }
        }
        .padding([.top, .bottom], 20)
    }

    init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
        self.rows = rows
        self.columns = columns
        self.content = content
    }
}

这就是它在应用程序中的样子。请注意边缘不适合屏幕。即使我尝试在那里滚动,它也会反弹回来。

Example screenshot

最佳答案

这是可能方法的演示(以及改进方向,因为我没有测试所有案例和可能性)
注意:如果只选择一个ScrollView轴它会自动进行内容对齐,否则现在我认为它很困惑,但没有配置的能力。因此,以下可能被视为临时解决方法。
这个想法是通过 GeometryReader 读取网格内容偏移量重新计算 .global. 中的帧协调空间并显式减轻它。
还有一个尝试根据设备方向使偏移无效和处理(可能不理想,但作为第一次尝试),因为它们是不同的。
enter image description here
enter image description here

import Combine

struct TableView: View {
    let columnCount: Int = 9
    let rowCount: Int = 14

    @State private var offset: CGFloat = .zero

    private let orientationPublisher = NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)
    
    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            ScrollView([.horizontal, .vertical], showsIndicators: false) {
                GridStack(rows: self.rowCount, columns: self.columnCount) { row, col in
                    Text("ROW \(String(row)) COL \(String(col))")
                        .fixedSize()
                        .frame(width: 150)
                }
                .background(rectReader())
                .offset(x: offset)
            }
        }
        .onReceive(orientationPublisher) { _ in
            self.offset = .zero
        }
    }

    func rectReader() -> some View {
        return GeometryReader { (geometry) -> AnyView in
            let offset = -geometry.frame(in: .global).minX
            if self.offset == .zero {
                DispatchQueue.main.async {
                    self.offset = offset
                }
            }
            return AnyView(Rectangle().fill(Color.clear))
        }
    }
}
backup

关于ios - SwiftUI如何对齐大于屏幕宽度的 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59737694/

相关文章:

ios - 文件路径为零

ios - 如何创建静态库并可以在 ios 中的任何项目上添加 .a 文件

ios - Parse 的排序结果无法按预期使用 query.limit

swift - 相机 View 作为模糊背景?

java - 我的 Spring-MVC ContentNegotiatingViewResolver 设置是否正确?如何为不受支持的媒体类型发送 404 错误?

ios - 从其他 ViewController 调用方法 | swift

Android 将 View 添加到锁定屏幕

ios - 触摸列表项仅触摸其他所有单元格

ios - 解析是否支持原子性?

Swift change String with range & and shouldChangeTextInRange 如何知道退格