А как ты им пользуешься?
Apple выпустила SwiftUI для создания пользовательских интерфейсов на всех платформах Apple с использованием возможностей Swift. Прежде чем я покажу вам, что мы будем строить в этой статье, позвольте мне объяснить одну из наиболее важных концепций разработки SwiftUI: @Binding.
Примечание. Прежде чем приступить к @Binding, я настоятельно рекомендую вам прочитать мою @State статью, так как использование @Binding требует знания @State.
Что такое @Binding?
Представление в SwiftUI может содержать несколько дочерних представлений. Возможно, вы захотите связаться с этими дочерними представлениями или захотите, чтобы дочернее представление изменило значение своего родительского. С помощью @Binding вы можете передать значение @State variable из родительского представления в дочернее представление, и если дочернее представление изменяет, мутирует или изменяет значение @State, родительский элемент автоматически получит обновленное значение и повторно отобразит представление. Это означает, что вы можете обновить родительское представление из дочернего представления, просто изменив значение переменной @State родительского представления в дочернем представлении с помощью @Binding.
Давайте посмотрим, как использовать переменную @Binding в XCode.
Настраивать
Чтобы создать проект, в XCode выберите: «File» ›« New »› «Project» ›« Single View App »› «Next» ›« Select User Interface »› «SwiftUI» ›« Next »› выберите место, где вы хочу сохранить этот проект ›« Готово »
ContentView.swift
По умолчанию SwiftUI(ContentView) предлагает следующий код:
import SwiftUI
struct ContentView: View {
var body: some View {
Text(”Hello World!”)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Справа вы можете увидеть предварительный просмотр пользовательского интерфейса. Если вы не видите предварительный просмотр, перейдите в «Параметры редактора настройки» в правом верхнем углу и выберите «Холст» или нажмите «Option + Command + Enter ». Затем убедитесь, что на холсте отображается предварительный просмотр пользовательского интерфейса.
Создание пользовательского интерфейса
Определите вертикальный стек внутри тела ContentView. Он будет содержать Text и Plus Onebutton.
Код:
VStack {
Text("Hello World!")
Button("Plus One"){
//Action Goes Here
}
}
Для окончательного вывода мы хотим настроить размер шрифта текста, размер шрифта кнопки, цвет фона, цвет текста и сделать края кнопки круглыми.
Сначала мы изменяем код кнопки, чтобы получить доступ к свойству кнопки Text. После модификации код будет выглядеть примерно так:
VStack{
Text(”Hello World!”)
Button(action: {
//Button action goes here
}){
Text(“Plus One”)
}
}
Теперь давайте посмотрим на свойства, которые мы будем использовать для достижения желаемого результата.
Мы можем изменить размер шрифта с помощью свойства .font():
Text("Hello World")
.font(.largeTitle) // Font type
Мы можем изменить цвет фона с помощью свойства .background(Color.COLOR_NAME):
Text(“Hello World”) // Button Text .background(Color.orange) // Button Background Color
Чтобы изменить цвет текста, мы можем использовать свойство .foregroundColor(Color.COLOR_NAME):
Text(“Hello World”) // Button Text .foregroundColor(Color.white) // Button text color
Чтобы края были круглыми, мы можем использовать свойство .cornerRadius(CORNER_RADIUS_VALUE):
Text(“Hello World”) // Button Text .cornerRadius(10.0) // Button corner radius property
Если мы применим все вышеперечисленные свойства к тексту и кнопке соответствующим образом, наш код будет выглядеть так:
//Vertical Stack
VStack {
//Text containing current value
Text("Hello World")
.font(.largeTitle) // Font type or size
.fontWeight(.bold) // Font style
Button(action: {
//Button on click action goes here
}){
//Button Text a& its properties
Text("Plus One")
.font(.title) // Font type or size
.fontWeight(.bold) // Font style
.foregroundColor(Color.white) // Text Color
.padding(16) // Padding to the button
.background(Color.orange) // Background color of the button
.cornerRadius(10) // Corner radius to make edges circular
}
}
И вот такой вывод:
Теперь, когда наш пользовательский интерфейс готов, давайте посмотрим, как реализовать @Binding.
Объявите переменную @State
Теперь мы объявляем переменную @State. Чтобы объявить переменную @State, мы должны использовать ключевое слово @State перед объявлением переменной. Проверьте строку ниже, чтобы лучше понять, как объявлять переменные@State.
@State var currentValue = 0
Теперь мы установим значение переменной @State в Text. Код Text теперь выглядит так:
Text(“\(currentValue)”) .font(.largeTitle) // Font type or size .fontWeight(.bold) // Font style
Мы хотим изменять значение переменной @State всякий раз, когда пользователь нажимает кнопку. Для этого нам нужно изменить значение переменной внутри блока Button ACTION . Чтобы получить доступ к переменной @State внутри метода button ACTION, нам нужно определить self.STATE_VARIABLE_NAME , чтобы он выглядел примерно так:
self.currentValue += 1
Когда пользователь нажимает кнопку, изменяется значение переменной @State. Когда значение переменной @State изменяется, он снова отображает представление и изменяет отображаемое текстовое значение.
Весь код выглядит так:
//
// ContentView.swift
// State-Demo
//
// Created by Mayur on 14/10/19.
// Copyright © 2019 Mayur Rathod. All rights reserved.
//
import SwiftUI
struct ContentView: View {
@State var currentValue = 0
var body: some View {
//Vertical Stack
VStack {
//Text containing current value
Text("\(currentValue)")
.font(.largeTitle) // Font type or size
.fontWeight(.bold) // Font style
Button(action: {
//Button on click action goes here
self.currentValue += 1
}){
//Button Text a& its properties
Text("Plus One")
.font(.title) // Font type or size
.fontWeight(.bold) // Font style
.foregroundColor(Color.white) // Text Color
.padding(16) // Padding to the button
.background(Color.orange) // Background color of the button
.cornerRadius(10) // Corner radius to make edges circular
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Создать интерфейс дочернего представления
Теперь давайте создадим еще один файл SwiftUI, который будет дочерним представлением ContentView. Назовем этот файл BindingView.swift. Код будет примерно таким:
import SwiftUI
struct BindingView: View {
var body: some View {
Text(”Hello World!”)
}
}
struct BindingView_Previews: PreviewProvider {
static var previews: some View {
BindingView()
}
}
Требуемый пользовательский интерфейс для theBindingView показан ниже. Нам нужно создать одну кнопку с текстом «Минус один », которая идентична кнопке, которую мы создали в родительском представлении, ContentView.swift.
Код:
var body: some View {
VStack {
Button(action: {
//Button action goes here
}){
Text(“Minus One”)
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding(16)
.background(Color.blue)
.cornerRadius(10)
}
}
}
Объявите переменную @Binding
Теперь мы создадим переменную @Binding. Для этого мы должны использовать ключевое слово @Binding перед объявлением переменной.
Переменная @Binding должна быть объявлена вне тела представления:
@Binding var valueFromParent : Int
Мы хотим изменять значение переменной @Binding всякий раз, когда пользователь нажимает кнопку. Для этого нам теперь нужно изменить значение переменной внутри блока Button ACTION . Определите self.BINDING_VARIABLE_NAME так, чтобы он выглядел примерно так:
self.valueFromParent -= 1
Поэтому, когда пользователь нажимает кнопку «Минус один» в дочернем представлении, мы уменьшаем значение на единицу. Как только мы это сделаем, он снова отобразит родительское представление, показывающее последнее значение после декремента.
Код:
import SwiftUI
struct BindingView: View {
@Binding var valueFromParent : Int
var body: some View {
VStack {
Button(action: {
self.valueFromParent -= 1
}){
Text(“Minus One”)
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding(16)
.background(Color.blue)
.cornerRadius(10)
}
}
}
}
struct BindingView_Previews: PreviewProvider {
static var previews: some View {
BindingView(valueFromParent: .constant(0))
}
}
Родительское представление будет отображаться снова, если мы изменим значение в дочернем представлении.
Поскольку мы будем передавать переменную @State в качестве параметра дочернему представлению из родительского представления, дочернее представление изменит значение переменной @Binding. Это эквивалентно изменению значения переменной @State в родительском представлении и, согласно определению переменной@State, всякий раз, когда мы изменяем значение переменной @State, представление будет отображаться снова.
Конечный продукт
Полный код выглядит так:
Родительское представление, то есть ContentView.swift:
import SwiftUI
struct ContentView: View {
@State var currentValue = 0
var body: some View {
//Vertical Stack
VStack {
//Text containing current value
Text(“\(currentValue)”)
.font(.largeTitle) // Font type or size
.fontWeight(.bold) // Font style
Button(action: {
//Button on click action goes here
self.currentValue += 1
}){
//Button Text a& its properties
Text(“Plus One”)
.font(.title) // Font type or size
.fontWeight(.bold) // Font style
.foregroundColor(Color.white) // Text Color
.padding(16) // Padding to the button
.background(Color.orange) // Background color of the button
.cornerRadius(10) // Corner radius to make edges circular
}
//Child View
BindingView(valueFromParent: $currentValue)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Дочернее представление или BindingView.swift:
import SwiftUI
struct BindingView: View {
@Binding var valueFromParent : Int
var body: some View {
VStack {
Button(action: {
self.valueFromParent -= 1
}){
Text(“Minus One”)
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding(16)
.background(Color.blue)
.cornerRadius(10)
}
}
}
}
struct BindingView_Previews: PreviewProvider {
static var previews: some View {
BindingView(valueFromParent: .constant(0))
}
}
