В этом руководстве мы узнаем, как использовать Forms в SwiftUI. Что касается Форм, мы также рассмотрим их ограничения, использование и то, как мы можем использовать их с Section и Group для достижения желаемого пользовательского интерфейса.
Формы представляют собой прокручиваемый список статических элементов управления, таких как текст и изображения, а также пользовательские интерактивные элементы управления, такие как текстовые поля, переключатели переключатели, кнопки и т. д.
Вы можете создать базовую форму, просто обернув текстовое представление по умолчанию внутри формы следующим образом:
var body: some View {
Form {
Text("Hello, world!")
}
}
Вы можете добавить в форму столько элементов, сколько хотите, хотя, если вы собираетесь добавить более 10, вам необходимо добавить Группу, чтобы избежать ошибок.
Примечание. Мы можем добавить только 10 дочерних представлений в родительский. Это применимо везде в SwiftUI. Это ограничение SwiftUI.
Чтобы преодолеть ограничение, мы можем использовать 2 варианта.
- Группа (на самом деле это не меняет внешний вид вашего пользовательского интерфейса)
- Раздел (разделение элементов на куски)
Хватит теории. Вы узнаете больше, когда будете реализовывать это на практике.
Вот пользовательский интерфейс, который мы собираемся реализовать. Он похож на экран настроек с небольшим содержанием профиля.
Итак, в этой первой части мы собираемся реализовать только пользовательский интерфейс. В следующей части мы добавим средство выбора для выбора параметров сравнения при щелчке по ячейкам сравнения.
Для первого раздела мы будем использовать Группу. В нем мы будем использовать HStack и VStack, чтобы настроить пользовательский интерфейс в соответствии с требованиями.
HStack: Представление, которое упорядочивает свои подпредставления по горизонтальной линии.
VStack: представление, в котором его подпредставления расположены вертикально.
И добавьте строки в разделы в соответствии с требуемым дизайном. мы можем добиться этого, обернув их в HStack [он будет содержать изображение/текст/переключатель/выборщик в соответствии с нашим требованием]
вот полный вид контента
struct ContentView: View {
@State var isDarkModeEnabled: Bool = true
@State var downloadViaWifiEnabled: Bool = false
var body: some View {
NavigationView {
Form {
Group {
HStack{
Spacer()
VStack {
Image(uiImage: UIImage(named: "UserProfile")!)
.resizable()
.frame(width:100, height: 100, alignment: .center)
Text("Wolf Knight")
.font(.title)
Text("[email protected]")
.font(.subheadline)
.foregroundColor(.gray)
Spacer()
Button(action: {
print("Edit Profile tapped")
}) {
Text("Edit Profile")
.frame(minWidth: 0, maxWidth: .infinity)
.font(.system(size: 18))
.padding()
.foregroundColor(.white)
.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.white, lineWidth: 2)
)
}
.background(Color.blue)
.cornerRadius(25)
}
Spacer()
}
}
Section(header: Text("CONTENT"), content: {
HStack{
Image(uiImage: UIImage(named: "Favorite")!)
Text("Favorites")
}
HStack{
Image(uiImage: UIImage(named: "Download")!)
Text("Downloads")
}
})
Section(header: Text("PREFRENCES"), content: {
HStack{
Image(uiImage: UIImage(named: "Language")!)
Text("Language")
}
HStack{
Image(uiImage: UIImage(named: "DarkMode")!)
Toggle(isOn: $isDarkModeEnabled) {
Text("Dark Mode")
}
}
HStack{
Image(uiImage: UIImage(named: "DownloadViaWifi")!)
Toggle(isOn: $downloadViaWifiEnabled) {
Text("Only Download via Wi-Fi")
}
}
HStack{
Image(uiImage: UIImage(named: "PlayInBackground")!)
Text("Play in Background")
}
})
}
.navigationBarTitle("Settings")
}
}
}
Вот и все. В следующей части мы узнаем больше о привязках с Toggle и Picker, чтобы сделать экран настроек интерактивным.
Вторая часть здесь:
