آشنایی با Binding@ در SwiftUI — به زبان ساده

اپل SwiftUI را برای ساخت رابط‌های کاربری بر روی همه پلتفرم‌های مختص خودش با بهره‌گیری از سوئیفت معرفی کرده است. پیش از آن که در مورد آن چه در این مقاله می‌خواهیم بسازیم صحبت کنیم، ابتدا به توضیح یکی از مهم‌ترین جنبه‌های توسعه SwiftUI یعنی Binding@ می‌پردازیم.

نکته: پیش از این که به مطالعه در مورد Binding@ بپردازید، پیشنهاد می‌کنیم به طور کامل در مورد State@ به مطالعه بپردازید، چون استفاده از Binding@ نیازمند کسب دانشی در مورد State@ است.

Binding@ چیست؟

View در SwiftUI می‌تواند شامل چند view فرزند باشد. ممکن است بخواهید با آن نماهای فرزند ارتباط بگیرید یا بخواهید یکی از نماهای فرزند مقدار والد خود را تغییر دهد. با استفاده از Binding@ می‌توانید مقدار متغیر State@ را از نمای والد به نمای فرزند ارسال کنید و در صورتی که نمای فرزند اقدام به دستکاری یا تغییر دادن مقدار State@ کند، والد به صورت خودکار مقدار را به‌روزرسانی کرده و نما را رندر مجدد می‌کند. این بدان معنی است که می‌توانید نمای والد را از روی نمای فرزند و صرفاً با تغییر دادن مقدار متغیر State@ نمای والد در نمای فرزند و با کمک گرفتن از Binding@ به‌روزرسانی کنید.

فیلم آموزش برنامه نویسی سوئیفت – برنامه نویسی iOS با Swift در فرادرس

کلیک کنید

در ادامه شیوه استفاده از متغیر Binding@ را در XCode بررسی می‌کنیم.

راه‌اندازی

برای ایجاد پروژه در Xcode باید مسیر زیر را طی کنید:

“File” > “New” > “Project” > “Single View App” > “Next” > “Select User Interface” > “SwiftUI” > “Next” >

پس از انتخاب مکان ذخیره‌سازی پروژه روی Done کلیک کنید.

فایل ContentView.swift

ContentView.swift به صورت پیش‌فرض با کد زیر عرضه می‌شود:

import SwiftUI
struct ContentView: View {
var body: some View {
    Text(”Hello World!”)
  }
}
struct ContentView_Previews: PreviewProvider {  
static var previews: some View {
     ContentView()
   }
}

از سوی دیگر می‌توانید پیش‌نمایشی از UI را ببینید. اگر این پیش‌نمایش را نمی‌بینید، در سمت راست به مسیر Adjust Editor Option بروید و گزینه Canvas را انتخاب کنید و یا کلیدهای Option+Command+Enter را بزنید. بدین ترتیب مطمئن می‌شوید که بوم در حال نشان دادن پیش‌نمایشی از UI است.

ایجاد یک رابط کاربری

«پشته افقی» (Vertical stack) را درون بدنه ContentView تعریف می‌کنیم. این پشته شامل Text و دکمه Plus One خواهد بود.

کد آن به صورت زیر است:

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

اینک خروجی به صورت زیر درمی‌آید:

اکنون که UI ما آماده است، به بررسی شیوه پیاده‌سازی 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()
   }
}

UI موردنیاز برای BindingView در ادامه نمایش یافته است. ما باید یک دکمه با متن «Minus One» بسازیم که دقیقاً برابر با دکمه‌ای است که در نمای والد یعنی 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

بنابراین هر زمان که کاربر روی دکمه Minus One در نمای فرزند کلیک کند، مقدار آن یک واحد کاهش می‌یابد. به محض انجام این کار نمای والد را بار دیگر رندر خواهیم کرد تا آخرین مقدار را پس از کاهش نمایش دهد. کد آن به صورت زیر است:

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

نمای والد در صورتی که مقدار در نمای فرزند تغییر پیدا کند، مجدداً رندر خواهد شد.

نتیجه نهایی

در این بخش به برسی کد کامل می‌پردازیم.

فیلم آموزش برنامه نویسی اپل واچ Apple Watch با زبان سوئیفت SWIFT در فرادرس

کلیک کنید

کد موجود در فایل 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))
   }
}

بدین ترتیب به پایان این مقاله می‌رسیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش های برنامه‌نویسی
• آموزش برنامه نویسی Swift (سوئیفت) برای برنامه نویسی iOS
• مجموعه آموزش‌های دروس علوم و مهندسی کامپیوتر
• آموزش سوئیفت (Swift) — مجموعه مقالات مجله فرادرس
• زبان برنامه‌نویسی سوئیفت را از این منابع به راحتی یاد بگیرید

==