6

わかりました。SwiftUI は考え方の変化であり、特に HTML と CSS の世界から来ています。しかし、私はかなり簡単なはずなのにできないと感じている何かを動作させるために4日間ほど費やしました。助けてください!

私は、1 つの画面が結果の表であるアプリを持っています。動的データは、1 つまたは 2 つの行/列になる可能性がありますが、数百になる可能性もあります。そのため、テーブルが巨大な場合にスクロールできるようにしたいと考えています。

セットアップを複製し、Swift プレイグラウンドで問題を再現しました。

import Foundation
import UIKit
import PlaygroundSupport
import SwiftUI

struct ContentView : View {
    var cellSize: CGFloat = 50
    var numRows: Int = 3
    var numCols: Int = 3
    var body : some View {

        ZStack {
            ScrollView([.horizontal,.vertical]) {

                    HStack( spacing: 0) {
                        VStack ( spacing: 0) {
                            ForEach(0 ..< numRows, id: \.self) { row in
                                Text("row " + row.description)
                                    .frame( height: self.cellSize )
                            }
                        }
                        ForEach(0 ..< self.numCols, id: \.self) { col in
                            VStack( spacing: 0) {
                                ForEach(0 ..< self.numRows, id: \.self) { row in
                                    Rectangle()
                                    .stroke(Color.blue)
                                        .frame( width: self.cellSize, height: self.cellSize )
                                }
                            }
                        }
                    }
                  .frame( alignment: .topLeading)
            }
        }
    }
}

let viewController = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = viewController

グリッドが3x3の場合に得られるものは次のとおりです

3x3

SwiftUI ではデフォルトで中央に配置するのが好きなことは知っていますが、HStack で.frame( alignment: .topLeading)テーブルが画面の左上隅に配置されないのはなぜですか?

さらに悪いことに、そのテーブルが大きくなると、次のようになります。

15x15

  1. まだ左上に揃っていませんが、これは出発点としては理にかなっています。
  2. 左にスクロールすると、ヘッダー列が表示されるところまでたどり着けません
  3. 私が近づくと、視界は端から私を跳ね返します。テーブルの上端が見えるところまでたどり着いたとしても、すぐに跳ね返ります。
  4. 右側に大量の空白があります。これはおそらく、左側にヘッダー列が表示されないことに関連しています。

ここで何が間違っていますか?ここのさまざまなビューでさまざまなオプションをframe試して疲れ果てています。alignment

4

0 に答える 0