آموزش TextField در سوئیفت یو آی

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

در این جلسه میخواهیم در مورد TextField صحبت کنیم، TextField ها در واقع ورودی هایی هستند که از طریق آن میتوانیم از کاربر داده و اطلاعات مثل نام یا ایمیل را بگیریم.

تعریف TextField در SwiftUi

برای این کار از کلمه کلیدی TextField استفاده میکنیم و سپس متن درون آن و بعد متغیری که قراره مقدار ورودی در آن ذخیره شود را مشخص میکنیم.

import SwiftUi

struct ContentView: View {
@State var textFieldValue = ""

var body: some View {

TextField("type your name", text: $textFieldValue)
}
}
توضیحات بیشتر کد بالا:
  1. همانطور که قبلا و در درس Button ها گفتیم، برای این که تغییرات متغیر در صفحه نمایش اعمال شود نیاز داریم که از State استفاده کنیم.
  2. دقت کنید که وقتی خواستید اسم متغیری که قراره مقدار TextField در آن ذخیره شود را مشخص کنید، قبل از آن حتما علامت $ را قرار دهید.
  3. بصورت پیش فرض حاشیه و border برای TextField وجود ندارد، این ممکن باعث شود که شما آن را در صفحه نمایش نبینید و فکر کنید کد شما درست کار نمیکند.

قرار دادن متن TextField درون Text

میخواهیم برنامه ای بنویسیم که بلافاصله بعد از تغییر مقدار TextField مقدار آن را درون Text قرار دهد.

import SwiftUi

struct ContentView: View {
@State var textFieldValue = ""

var body: some View {

TextField("type your name", text: $textFieldValue)
Text("my name is \(textFieldValue)")
}
}

غیر فعال کردن TextField در SwiftUi

ممکن است شما نیاز پیدا کنید که در مواقعی، TextField را غیر فعال کنید، برای این کار میتوانید از دستور disabled استفاده کنید و مقدار آن را برابر با true قرار دهید.

TextField("type your name", $textFieldValue)
.disabled(true)
حال میخواهیم برنامه بنویسیم که با کلیک کردن روی دکمه TextField را فعال یا غیر فعال کند.
import SwiftUi

struct ContentView: View {
@State var text = ""
@State var disableTextField = false

var body: some View {

TextField("type your name", text: $text)
.disabled(disableTextField)

Button("Disable or enable TextField") {
disableTextField = !disableTextField
}

Text("my name is \(text)")
}
}
توضیحات بیشتر کد بالا:
  • متغیری تعریف کردیم به اسم disableTextField که بصورت پیش فرض مقدار false را دارد، و این متغیر را درون دستور disabled قرار دادیم. حالا با هر بار کلیک کردن روی دکمه مقدار این متغیر عوض میشود. (اگر true باشد false میشود و برعکس) پس با هر بار کلیک کردن روی دکمه TextField فعال و یا غیر فعال میشود.

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


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

45