SwiftUIでScrollViewに横並びにボタン２つと縦のボタンを５つ並べるコード

構成と書き方はこんな感じ。

ScrollView {

        // 縦方向のスタックビュー

        VStack {

                    

            // 横方向のスタックビュー

            HStack {

                // ボタン2つ

            }

            // 縦にボタン5つ

        }

}

 

 

コード

import SwiftUI



struct TopView: View {

    var body: some View {

        // 外部のスクロールビュー。内容が画面サイズを超えた場合にスクロールが可能になります。

        ScrollView {

            

            // GeometryReaderを使用して、親ビューのサイズや位置を取得できます。

            GeometryReader { geometry in

                

                // 縦方向のスタックビュー

                VStack {

                    

                    // 横方向のスタックビュー

                    HStack {

                        

                        // 画面の5%分の左端のスペース

                        Spacer().frame(width: geometry.size.width * 0.05)

                        

                        // 青色の"テスト１"ボタン

                        Button(action: {

                            print("テスト１ボタンがタップされました。")

                        }) {

                            Text("テスト１")

                                .font(.system(size: 30))

                                .frame(width: geometry.size.width * 0.35, height: 40)

                                .padding()

                                .background(Color.blue)

                                .foregroundColor(.white)

                                .cornerRadius(8)

                        }

                        

                        // 画面の5%分の中央のスペース

                        Spacer().frame(width: geometry.size.width * 0.05)

                        

                        // 緑色の"テスト２"ボタン

                        Button(action: {

                            print("テスト２がタップされました。")

                        }) {

                            Text("テスト２")

                                .font(.system(size: 30))

                                .frame(width: geometry.size.width * 0.35, height: 40)

                                .padding()

                                .background(Color.green)

                                .foregroundColor(.white)

                                .cornerRadius(8)

                        }

                        

                        // 画面の5%分の右端のスペース

                        Spacer().frame(width: geometry.size.width * 0.05)

                    }

                    // ボタン群の上下のパディング

                    .padding(.vertical, 15)

                    

                    // 5つのオレンジ色の"追加ボタン"

                    ForEach(0..<5) { _ in

                        Button(action: {

                            print("追加ボタンがタップされました。")

                        }) {

                            Text("追加ボタン")

                                .font(.system(size: 30))

                                .frame(width: geometry.size.width * 0.825, height: 40)

                                .padding()

                                .background(Color.orange)

                                .foregroundColor(.white)

                                .cornerRadius(8)

                        }

                        // ボタンとボタンの間の上下のスペース

                        .padding(.vertical, 15)

                    }

                    

                    // VStackの下部にスペースを追加して、ボタン群を上部に押し上げる

                    Spacer()

                }

            }

            // 全体のパディング

            .padding()

        }

    }

}

実行結果はこんな感じになります。

ボタンのテキストやボタン押下時の処理の書き方に注目です。