آموزش انواع Stack در سوئیفت یو آی

زمان مطالعه : ۲ دقیقه
آخرین بروزرسانی : ۰۲ اسفند ۱۴۰۰
آموزش Stack ها در SwiftUI

احتمالا تا به حال براتون سوال ایجاد شده که چگونه میتوانیم جای دقیق هر المنت را در SwiftUI مشخص کنیم؟ در این جلسه میخواهیم با استفاده از Stack ها این موارد را به شما یاد بدهیم.

Stack چیست؟

در واقع Stack یک چارچوبی را ایجاد میکند که درون آن شما میتوانید view های متفاوت مثل Text, Button, Image و غیره را بصورتی که میخواهید در کنار هم قرار دهید.

انواع Stack در SwiftUI

در سوئیفت یو ای سه نوع Stack وجود دارد:

  1. VStack یا Vertical Stack که المنت ها را بصورت عمودی زیر هم قرار میدهد.
  2. HStack یا Horizontal Stack که المنت ها را بصورت افقی کنار هم قرار میدهد.
  3. ZStack یا Depth-based Stack که المنت ها را بصورت عمقی روی هم قرار میدهد.

خب حالا میخواهیم هر کدام از این Stack ها را بصورت جدا و کامل براتون توضیح بدهیم.

1. استفاده از VStack در SwiftUI

برای تعریف آن میتوانید از کلمه کلیدی VStack استفاده کنید، و درون آن تمام ویو ها یا المنت های دیگری که میخواهید در یک چارچوب و بصورت عمودی زیر هم باشند را تعریف کنید.

import SwiftUI

struct ContentView: View {
var body: some View {

VStack {
Text("I am learning SwiftUI")
Text("This blog is about stacks")
}

}
}

ایجاد فاصله در VStack

اگر نیاز دارید بین view های داخل یک VStack فاصله ایجاد کنید، میتوانید از spacing استفاده کنید.

VStack(spacing: 10) {
Text("I am learning SwiftUI")
Text("This blog is about stacks")
}

انواع Alignment در VStack

3 نوع حالت برای مشخص کردن جهت view ها داریم:

  1. center: که حالت پیش فرض هست، و تمام view های داخل Stack را، وسط Stack (از نظر عمودی) قرار میدهد.
  2. trailing: تمام view های داخل Stack را به سمت راست میچسباند.
  3. leading: تمام view های داخل Stack را به سمت چپ میچسباند.
VStack(alignment: .leading) {
Text("I am learning SwiftUI")
Text("This blog is about stacks")
}
نکته:
  • امکان استفاده alignment و spacing با هم در VStack و HStack وجود دارد.
  • حالت هایی که میتوانید در alignment استفاده کنید، در Stack های مختلف متفاوت هست. که جلوتر به حالت های Stack های دیگر هم میرسیم.

2. استفاده از HStack در SwiftUI

برای تعریف آن میتوانید از کلمه کلیدی HStack استفاده کنید، و درون آن تمام view هایی را که میخواهید در یک چارچوب و بصورت افقی کنار هم باشند را تعریف کنید.

import SwiftUI

struct ContentView: View {
var body: some View {

HStack {
Image("Milad")
Text("Milad KhatShab")
}

}
}

ایجاد فاصله در HStack

اگر نیاز دارید بین view های داخل یک HStack فاصله ایجاد کنید، میتوانید از spacing استفاده کنید.

HStack(spacing: 15) {
Image("Milad")
Text("Milad KhatShab")
}

انواع Alignment در HStack

3 نوع حالت برای مشخص کردن جهت view ها داریم:

  1. center: که حالت پیش فرض هست، و تمام view های داخل Stack را، وسط Stack (از نظر افقی) قرار میدهد.
  2. top: تمام view های داخل Stack را به بالای Stack میچسباند.
  3. bottom: تمام view های داخل Stack را به پایین Stack میچسباند.
HStack(alignment: .top) {
Image("Milad")
Text("Milad KhatShab")
}
نکته:
  • این مبحث از اون مبحثایی هستش که اگر خودتان تمرین نکنید، اصلا براتون جا نمیوفته! من مثال های فراوان براتون گذاشتم، اما خودتان حتما تمرین کنید.

ترکیب VStack و HStack

خب حالا که دو Stack اصلی را یاد گرفتیم بهتر یک تمرین ساده بکنیم که این موضوع بیشتر براتون جا بیوفته.

import SwiftUI

struct ContentView: View {
var body: some View {

HStack(alignment: .top) {
Image("Milad")
VStack(alignment: .leading) {
Text("name: Milad")
Text("website: SwiftAcademy.ir")
Text("email: support@swiftacademy.ir")
}
}

}
}

3. استفاده از ZStack در SwiftUI

این Stack نسبت به قبلیا کاربرد کمتری دارد، ولی خب حتما باید یادش بگیرید.برای تعریف ZStack میتوانید از کلمه کلیدی ZStack استفاده کنید.

import SwiftUI

struct ContentView: View {
var body: some View {

ZStack {
Image("Taylor")
Text("Taylor Swift")
}

}
}
نکته:
  • هر view ای را که دیرتر درون ZStack بنویسید، رو تر قرار میگیرد. مثلا در نمونه بالای Text روی Image قرار گرفته است.
  • در ZStack فاصله معنی ندارد، برای همین spacing نداریم.

انواع Alignment در ZStack

9 نوع حالت برای مشخص کردن جهت view ها در ZStack داریم، که در واقع ترکیب حالت های VStack و HStack هستند:

  1. center: که حالت پیش فرض هست، و تمام view های داخل Stack را هم از نظر عمودی و هم افقی در، وسط Stack قرار میدهد.
  2. leading: تمام view های داخل Stack را به وسط و چپ میچسباند
  3. trailing: تمام view های داخل Stack را به وسط و راست میچسباند
  4. top: تمام view های داخل Stack را به بالا و وسط میچسباند.
  5. topLeading: تمام view های داخل Stack را به بالا و چپ میچسباند
  6. topTrailing: تمام view های داخل Stack را به بالا و راست میچسباند
  7. bottom: تمام view های داخل Stack را به پایین و وسط میچسباند .
  8. bottomTrailing: تمام view های داخل Stack را به پایین و راست میچسباند
  9. bottomLeading: تمام view های داخل Stack را به پایین و چپ میچسباند
ZStack(alignment: .bottom) {
Image("Taylor")
Text("Taylor Swift")
}
نکته آخر:
  • این مبحث تمرین زیاد میخواد! حتما خودتون هم تمرین کنید و اگر سوالی هم داشتید همین زیر بپرسید کمکتون میکنم.

این مقاله در حال بروز رسانی است و در آینده نزدیک مباحث جدید تری اضافه میشود...
میلاد خط شب
میلاد خط شب
معتقدم هر آدمی میتواند در یک زمینه ای مفید و تاثیر گذار باشد و اصولا آدم "غیر مفید" نداریم. فقط کافی است به موقع و صحیح راهنمایی شود.
پاسخ دهید


به این مقاله علاقه داشتید؟ 🥰

41