SwiftUI Горизонтальные формы разделов

Question

Я пытаюсь восстановить это в SwiftUI

Так что я новичок в SwiftUI и подумал, что могу создать форму с 2 Разделы в HStack, заголовок которых «Пассажиры», с другим разделом Stepper, заголовок которого «Вылет» и DatePicker внутри.

Мой код выглядит следующим образом:

var body: some View {
    Form {
        HStack {
            Section(header: Text("Passengers")) {
                Stepper(value: $passengerCount) {
                    Text("\(self.passengerCount)")
                 }
            }
             Divider()               
             Section(header: Text("Departure")) {
                 //Pseudo date picker
                 Text("21 April, 2020")
             }  
        }
    }
}

Но результат это так:

Может кто-нибудь сказать мне, как это сделать?

Как я могу создать 2 раздела, как в первом снимок экрана?

Если это не так, как я думаю ... как я могу сделать это лучше?

Answer 1

попробуйте это:

var body: some View {
        Form {
            HStack {

                VStack {
                    Text("Passengers")
                    Stepper(value: $passengerCount) {
                        Text("\(self.passengerCount)")
                    }
                }
                Divider()
                VStack {

                    Text("Departure")
                    //Pseudo date picker
                    Text("21 April, 2020")

                }
            }
        }
    }

, и если вам нужен такой же степпер, как у вас, вы можете попробовать даже это.

import SwiftUI

struct ManualStepperView : View {

    @Binding var value : Int

    var body: some View {

        HStack {

            Text("-")
                .font(.title)
                .foregroundColor(Color.black)
                .padding(.vertical, 2)
                .padding(.horizontal, 15)
                .background(RoundedRectangle(cornerRadius: 10)
                    .foregroundColor(Color.gray.opacity(0.2)))
                .onTapGesture {
                    self.value -= 1
            }

            Text("\(value)")
                .padding()

            Text("+")
                .font(.title)
                .foregroundColor(Color.black)
                .padding(.vertical, 2)
                .padding(.horizontal, 15)
                .background(RoundedRectangle(cornerRadius: 10)
                    .foregroundColor(Color.gray.opacity(0.2)))
                .onTapGesture {
                    self.value += 1
            }

        }
    }
}

struct ContentView: View {


    @State var passengerCount : Int = 0

    var body: some View {
        Form {
            VStack {
                HStack {

                    VStack {
                        Text("Passengers")
                        ManualStepperView(value: $passengerCount)


                    }.frame(width:190)
                    Divider()
                    VStack {
                        Text("Departure")
                        Spacer()
                        //Pseudo date picker
                        Text("21 April, 2020")

                    }
                }

            }
        }
    }
}