実現したいこと
Swift UIを使って点検表を作っています
自動で一定の記入をしてらもい、顧客名や数値などは自分で入力できるようなものを考えています
入力機能など細かいものは後で実装するとして、雛形となる点検表をまずは作ってしまおうと言う最中です
発生している問題・分からないこと
ある程度点検表の一部を少しずつ作っておき、後でZ(V,H)Stackで点検表と同じ並びになるよう設置しました。
ところが、小さい部品の時にPreviewで確認すると特に大きなズレは確認できないのですが、大きなまとまりにしようとするとズレて表示されてしまいます。
該当のソースコード
SwiftUI
1import SwiftUI 2struct ryoupi1View: View { 3 @State var isOn = true 4 var body: some View { 5 6 HStack(spacing: 0) { 7 ZStack { 8 Rectangle() 9 .stroke(Color.black, lineWidth: 0.5) 10 .frame(width: 12.7575, height: 14.175) 11 Text("１") 12 .font(.system(size: 10)) 13 } 14 15 ZStack { 16 Rectangle() //一番大きい四角 17 .stroke(Color.black, lineWidth: 0.5) 18 .frame(width: 163.0125, height: 14.175) 19 Text("点検項目１") 20 .font(.system(size: 10)) 21 .frame(width: 160, alignment: .leading) 22 } 23 24 ZStack { 25 Rectangle() //良否を囲む 26 .stroke(Color.black, lineWidth: 0.5) 27 .frame(width: 68.04, height: 14.175) 28 if isOn { 29 HStack { 30 ZStack { 31 Text("良") 32 .font(.system(size: 10)) 33 Circle()//良を囲む丸 34 .stroke(Color.black, lineWidth: 1.5) // 外枠の色と太さを設定 35 .frame(width: 11, height: 11) // 円のサイズを指定 36 37 } 38 Text("不良") 39 .font(.system(size: 10)) 40 } 41 } else { 42 HStack { 43 Text("良") 44 .font(.system(size: 10)) 45 ZStack { 46 Text("不良") 47 .font(.system(size: 10)) 48 Circle()//否を囲む丸 49 .stroke(Color.black, lineWidth: 1.5) 50 .frame(width: 11, height: 11) 51 52 } 53 } 54 } 55 } 56 } 57 } 58 } 59 60//↑これで点検表の１項目を表しています。似たようなものが５２個あります。 61 62//↓１度このような塊にして 63 64import SwiftUI 65 66struct ryoupi1to8View: View { 67 var body: some View { 68 VStack(spacing:0){ 69 hosyutenkenzikouView() 70 HStack(spacing:0){ 71 koumoku1View() 72 VStack(spacing:0){ 73 ryoupi1View() 74 ryoupi2View() 75 ryoupi3View() 76 ryoupi4View() 77 ryoupi5View() 78 ryoupi6View() 79 ryoupi7View() 80 ryoupi8View() 81 } 82 } 83 } 84 } 85} 86 87//ここまでは正常に表示される 88//下記のようにまとめると表示がズレる 89 90import SwiftUI 91 92struct ContentView: View { 93 94 var body: some View { 95 ScrollView{ 96 ScrollView(.horizontal){ 97 HStack(spacing:0){ 98 VStack(spacing:0){ 99 ryoupi1to8View() 100 ryoupi9to17View() 101 ryoupi18to27View() 102 } 103 VStack(spacing:0){ 104 ryoupi28to31View() 105 ryoupi32to35View() 106 ryoupi36to38View() 107 ryoupi39to43View() 108 ryoupi44to49View() 109 ryoupi50to52View() 110 } 111 } 112 } 113 } 114 } 115} 116 117#Preview { 118 ContentView() 119} 120
試したこと・調べたこと
上記の詳細・結果
最初は四角形Rectangleを作るための数値や、それをまとめて表示させるときに隙間の無いようにするためにSpacing：0と書いた箇所がおかしい数字になっていないかなどを確認しましたが
difff.jpなどテキストの違いを確認できるサイトなどを使っても特別変なところは発見できませんでした。
この際どのようなことを試せば良いか知りたいです。
補足
ChatGPTに聞いてみたところ、自分がしたことと同じようなことを提案されました。
0 コメント