آکادمی الیشا

حساب کاربری

جلسه ۳ – طراحی رابط کاربری (UI) با SwiftUI

هدف جلسه:

  • آشنایی با طراحی صفحات اپلیکیشن

  • استفاده از عناصر رابط کاربری (Label, Button, TextField)

  • اتصال UI به کد و ایجاد تعامل ساده

  • نمایش پیغام (Alert) به کاربر

۱. معرفی SwiftUI

  • SwiftUI یک فریم‌ورک رسمی اپل برای طراحی رابط کاربری است.

  • ویژگی‌ها:

    • سریع و آسان برای مبتدی‌ها

    • قابلیت طراحی بصری و کدنویسی همزمان

    • ریسپانسیو خودکار برای iPhone و iPad

۲. آشنایی با عناصر اصلی UI

عنصرتوضیح
Textنمایش متن روی صفحه
Buttonدکمه برای انجام عملیات
TextFieldفیلد ورود اطلاعات
Imageنمایش عکس

تمرین: یک Text و یک Button ساده روی صفحه اضافه کن.

۳. اضافه کردن Text و Button

 
import SwiftUI struct ContentView: View { var body: some View { VStack { Text("سلام به دوره iOS!") .font(.title) .padding() Button(action: { print("دکمه زده شد") }) { Text("کلیک کن") .padding() .background(Color.blue) .foregroundColor(.white) .cornerRadius(10) } } } }

تمرین: متن و رنگ دکمه را تغییر بده و اجرا کن تا نتیجه را ببینی.

۴. استفاده از TextField برای ورود اطلاعات

 
@State private var name: String = "" var body: some View { VStack { TextField("نام خود را وارد کنید", text: $name) .textFieldStyle(RoundedBorderTextFieldStyle()) .padding() Button("نمایش نام") { print("نام وارد شده: \(name)") } .padding() } }

تمرین: نام خودت را وارد کن و با کلیک روی دکمه، خروجی را در کنسول ببین.

۵. نمایش پیغام (Alert)

 
@State private var showAlert = false var body: some View { Button("نمایش پیام") { showAlert = true } .alert(isPresented: $showAlert) { Alert(title: Text("سلام!"), message: Text("این اولین پیام شماست"), dismissButton: .default(Text("باشه"))) }

تمرین: متن Alert را تغییر بده و اجرا کن.

۶. تمرین پایان جلسه سوم

  1. یک Text و Button بساز

  2. یک TextField اضافه کن تا کاربر نامش را وارد کند

  3. با کلیک روی Button، نام وارد شده در Alert نمایش داده شود

  4. صفحه را اجرا کن و عملکرد همه عناصر را تست کن

۷. نکات کلیدی

  • SwiftUI برای مبتدی‌ها ساده است و همه چیز بصری دیده می‌شود

  • هر تغییر در کد بلافاصله روی Simulator یا دستگاه نمایش داده می‌شود

  • تمرین عملی باعث می‌شود مفاهیم UI و تعامل کاربر در ذهن تثبیت شود