SwiftUI 水平部分表单答案

【问题标题】：SwiftUI Horizontal Sections FormsSwiftUI 水平部分表单
【发布时间】：2020-05-02 15:16:43
【问题描述】：

我正在尝试在 SwiftUI 中重建它

所以我是 SwiftUI 的初学者，我认为我可以在 HStack 中创建一个包含 2 个部分的表单，其中标题为“Passengers”，另一个部分的标题为“Departure”和 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 个部分？

如果我的想法错了……我怎样才能做得更好？

【问题讨论】：

您找到解决方案了吗？我这里也有同样的问题
不抱歉，我切换到了 ReactJS - 我认为 SwiftUI 并没有那么远。使用 UIKit 可能更容易

标签： swift forms swiftui

【解决方案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")

                    }
                }

            }
        }
    }
}

【讨论】：

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

【解决方案2】：

您可以在表单和选取器之间使用 GeometryReader 和间隔器，所有 3 个 Hstacked。这将使您可以清楚地控制 2 个项目之间的 UI 比例距离。关于“截面外观”，用圆角矩形覆盖每个，或使用 Zstacks。最后，您可以通过在 Hstack 中使用间距来避免使用 GR（例如，Hstack(spacing: 20)），因此您只需将其添加到您的代码中：

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

}

【讨论】：

【解决方案3】：

我遇到了同样的问题，但很容易找到。实际上，您必须忘记您可能知道的“表单”，即这里只是一个带有一些有用布局自动化的可视界面。不是设计用于发送用户信息的功能齐全的结构。因此，2 个或更多表单不会拆分您的任何信息。

从那里，您创建一个包含 2 个“表单”项的 HStack，然后瞧 :)

HStack (spacing: 0) { 

Form {
    your input
    
    }

Form {

    your input
   }

}

【讨论】：