Stack

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

زمان مطالعه : ۲ دقیقه

آخرین بروزرسانی : ۰۲ اسفند ۱۴۰۰

دکمه ها یا Button ها از مهم ترین المنت هایی هست که میتوانیم در برنامه هامون استفاده کنیم، تو این جلسه قصد داریم مبحث Button ها را در SwiftUi تدریس کنیم.

تعریف یک Button در SwiftUi

برای این کار میتوانیم از کلمه کلیدی Button استفاده کنیم، و بعد باید متن درون Button و سپس کاری که میخواهیم با کلیک کردن روی آن انجام شود را مشخص کنیم. به مثال زیر دقت کنید.


        import
        SwiftUi


        struct
        ContentView:
        View
        {

        var
        body:
        some
        View
        {


        Button("Click Me")
        {

        // do something

        }


        }

        }

حالا میخواهیم با کلیک کردن روی Button متنی را چاپ کنیم.


        Button("Click Me")
        {

        print("Button Clicked")

        }

State چیست و چرا به آن نیاز داریم؟

به طور خودمانی وقتی شما متغیری را از نوع State تعریف میکنید، وظیفه کنترل کردنش را به SwiftUi میسپارید و با بروز شدن مقدار متغیر، تغییرات آن داخل صفحه نمایش نیز اعمال میشود.

میخواهیم برنامه ای بنویسیم که وقتی روی Button کلیک میشود شمارنده درون Text یک عدد زیاد شود. و این تغییر به کاربر هم نشان داده شود. به کدهای زیر دقت کنید.


        import
        SwiftUi


        @State
        var
        counter
        =
        0


        struct
        ContentView:
        View
        {

        var
        body:
        some
        View
        {


        Button("Click Me")
        {

        counter
        =
        counter
        +
        1

        }

        Text("counter:
        \(counter)")


        }

        }

نکته:

اگر Text را داخل Button تعریف کنید اصلا Text را نشان نمیدهد، و باید آن ها را جدا از تعریف کنید.
اگر متغیر counter را بدون State تعریف کنید با هر بار کلیک کردن مقدار counter زیاد میشود، ولی داخل Text مقدار بروز شده آن را نشان نمیدهد.

روشی دیگر برای طراحی Button در SwiftUi

اگر قصد دارید روی ظاهر Button زیاد کار کنید بهتر هست که از ساختار زیر استفاده کنید که کد شما را مرتب تر میکند.


        import
        SwiftUi


        struct
        ContentView:
        View
        {

        var
        body:
        some
        View
        {


        Button(action:
        {

        // do something

        })
        {

        // design the button

        }


        }

        }

حالا میخواهیم با یکسری تابع آشنا بشویم و یک Button طراحی کنیم.

تابع	وظیفه	مثال
background	ایجاد یک background	background(Color.orange)
padding	ایجاد یک حاشیه	padding(10)
cornerRadius	خمیده کردن لبه ها	cornerRadius(15)

شخصی سازی Button در SwiftUi

میخواهیم از تابع هایی که معرفی کردیم استفاده کنیم تا یک Button شخصی سازی شده را ایجاد کنیم.


        Button(action:
        {

        print("Button Tapped")

        })
        {

        Text("Click Here")

        
        .font(.title)

        .fontWeight(.bold)

        .foregroundColor(.black)

        .padding(10)

        .background(Color.orange)

        .cornerRadius(15)

        .padding(5)

        .background(Color.red)

        .cornerRadius(20)

        }