当前位置: 首页 > 面试题库 >

SwiftUI如何对齐大于屏幕宽度的视图

晋承嗣
2023-03-14
问题内容

我正在使用SwiftUI绘制一个表,该表的行和列太多,无法容纳
屏幕宽度/高度。在这种情况下,我无法将视图对齐为
领先,但总是以某种方式居中。我该如何调整他们的领先地位?这
是绘制表格的视图:

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
    }
}

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


问题答案:

这是一个可能的方法演示(以及改进的方向,因为我
没有测试所有情况和可能性)

注意:如果仅选择一个ScrollView轴
,则它会自动进行内容对齐,否则我现在很困惑,但是没有
配置功能。因此,以下可能被视为临时
解决方法。

这个想法是通过GeometryReader重新计算坐标空间中的
框架来读取网格内容偏移.global.并显式减轻它。

还尝试根据设备
方向来使偏移量无效并进行处理(可能不理想,但作为第一次尝试),因为它们是
不同的。

在此处输入图片说明 在此处输入图片说明

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))
        }
    }
}


 类似资料:
  • 问题内容: 给定此代码: 导致这种交互: 即使标签/文本组件不需要整个宽度,如何填充屏幕的宽度? 我发现的一个窍门是在结构中插入一个 空 ,如下所示: 产生所需的设计: 有没有更好的办法? 问题答案: 尝试将.frame修饰符与以下选项一起使用: 这被描述为是一个灵活的框架(请参阅文档),它将伸展以填充整个屏幕,并且当它有多余的空间时,它将使其内容居中。

  • 我正在尝试将CardView宽度与屏幕宽度匹配,但CardView的宽度与屏幕宽不匹配。我一次又一次地检查了我的代码,甚至使所有属性的宽度等于匹配的父级。 Recyclerview xml-- 卡片视图xml - 膨胀代码 这是屏幕截图

  • 我如何才能使它的应用程序是优化的所有屏幕?

  • 问题内容: 我试图找到屏幕的宽度和高度,但是我尝试过的任何方法都无法在我创建的类中使用,下面是我的代码。 有人知道如何找到它吗?我无法使用下面尝试的方式,因为.getWidth()已弃用? 问题答案: 使用以下代码

  • 我想显示 3x3 大小的网格视图。我想根据设备大小设置高度和宽度。我从这个链接中获取参考。 主要活动- 活动_主要- 编辑- 就像首先得到屏幕高度和宽度,然后每个项目的高度和宽度是我得到的屏幕高度和宽度值的1/3。

  • 如何在 React 原生中获取屏幕宽度?我需要它,因为我使用了一些重叠的绝对组件,并且它们在屏幕上的位置会随着不同的设备而变化。