آموزش انواع Stack در سوئیفت یو آی
احتمالا تا به حال براتون سوال ایجاد شده که چگونه میتوانیم جای دقیق هر المنت را در SwiftUI مشخص کنیم؟ در این جلسه میخواهیم با استفاده از Stack ها این موارد را به شما یاد بدهیم.
Stack چیست؟
در واقع Stack یک چارچوبی را ایجاد میکند که درون آن شما میتوانید view های متفاوت مثل Text, Button, Image و غیره را بصورتی که میخواهید در کنار هم قرار دهید.
انواع Stack در SwiftUI
در سوئیفت یو ای سه نوع Stack وجود دارد:
- VStack یا Vertical Stack که المنت ها را بصورت عمودی زیر هم قرار میدهد.
- HStack یا Horizontal Stack که المنت ها را بصورت افقی کنار هم قرار میدهد.
- 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 ها داریم:
- center: که حالت پیش فرض هست، و تمام view های داخل Stack را، وسط Stack (از نظر عمودی) قرار میدهد.
- trailing: تمام view های داخل Stack را به سمت راست میچسباند.
- 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 ها داریم:
- center: که حالت پیش فرض هست، و تمام view های داخل Stack را، وسط Stack (از نظر افقی) قرار میدهد.
- top: تمام view های داخل Stack را به بالای Stack میچسباند.
- 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 هستند:
- center: که حالت پیش فرض هست، و تمام view های داخل Stack را هم از نظر عمودی و هم افقی در، وسط Stack قرار میدهد.
- leading: تمام view های داخل Stack را به وسط و چپ میچسباند
- trailing: تمام view های داخل Stack را به وسط و راست میچسباند
- top: تمام view های داخل Stack را به بالا و وسط میچسباند.
- topLeading: تمام view های داخل Stack را به بالا و چپ میچسباند
- topTrailing: تمام view های داخل Stack را به بالا و راست میچسباند
- bottom: تمام view های داخل Stack را به پایین و وسط میچسباند .
- bottomTrailing: تمام view های داخل Stack را به پایین و راست میچسباند
- bottomLeading: تمام view های داخل Stack را به پایین و چپ میچسباند
ZStack(alignment:
.bottom)
{
Image("Taylor")
Text("Taylor Swift")
}
- این مبحث تمرین زیاد میخواد! حتما خودتون هم تمرین کنید و اگر سوالی هم داشتید همین زیر بپرسید کمکتون میکنم.
