SwiftUI 水平分区表单

Question

我正在尝试使用SwiftUI重建这个。

所以我是SwiftUI的初学者，想创建一个包含2个部分的表单，这两个部分在HStack中，其中标题为“乘客”，有一个步进器，另一个部分的标题为“出发”，里面有一个日期选择器。

我的代码如下：

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

但结果是这样的：

有人能告诉我如何操作吗？

如何创建两个部分，就像第一张截图中的那样？

如果我的想法有误，我该怎么更好地实现它？

- Uni_x

---

你有没有找到解决办法？我这里也有同样的问题。 - Yann Morin Charbonneau

不好意思，我已经转向ReactJS了 - 我认为SwiftUI并不远。使用UIKit可能会更容易。 - Uni_x

Answer 1

我之前也遇到了同样的问题，但它其实很容易找到解决办法。 实际上，你必须忘记“表单”这个你可能已经知道的东西，即它在这里只是一个带有一些有用的布局自动化的可视界面。 不是一个完全功能的结构，旨在发送用户信息。 因此，2个或更多表单不会分裂任何你的信息。

从那里开始，你可以创建一个有两个“表单”项目的HStack，然后就完成了 :)

HStack (spacing: 0) { 

Form {
    your input
    
    }

Form {

    your input
   }

}

- NightCoder

Answer 2

你可以在表单和选择器之间使用GeometryReader和spacer，将它们全部水平堆叠。这将使您对UI中2个项目之间的比例距离有清晰的控制。至于“分组外观”，可以用圆角矩形或使用Zstacks重叠每个元素。最后，您可以通过在Hstack中使用间距（例如，Hstack（spacing：20））来避免使用GR，因此只需将其添加到您的代码中：

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

}

- Yann Massard

Answer 3

试试这个：

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

                    }
                }

            }
        }
    }
}

- Chris

---

感谢您提供手动步进视图的手册。但是，您的ContentView的结果不是具有“乘客”和“出发”的Sectionheader的2个单独的部分。它就像我的第二个屏幕截图一样，带有您的manualStepperView。 我不想让乘客步进器和出发日期选择器看起来像一个元素。它们需要像第一个屏幕截图中那样分开。 - Uni_x