SwiftUI: Почему содержимое этого ScrollView неуместно?

Question

Приведенный ниже пример кода должен создать сетку RoundedRectangles внутри ScrollView. С помощью кнопок на панели навигации вы можете изменить количество строк и столбцов. Он лучше всего работает на 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())
    }
}

Answer 1

Некоторым обходным решением является разделение вида прокрутки для вертикальной и горизонтальной оси.

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

Это все еще не идеально, но пригодно для использования. Лучше всего использовать только одну ось прокрутки и заполнить второе направление нужным количеством ячеек.

Я скучаю по тому, как узнать и уметь регулировать положение прокрутки. SwiftUI находится на очень ранней стадии, как только он станет более надежным, наберитесь терпения