چگونه یک دکمه FAB-ulous بسازیم – #30DaysOfSwift

روز 0: شروع به Swift & SwiftUI Odyssey

به اولین پست در کاوش 30 روزه من در SwiftUI خوش آمدید!

امروز، ما در حال بررسی یک عنصر اساسی رابط کاربری هستیم: دکمه عمل شناور (FAB).

بیایید یک FAB بصری جذاب و تعاملی برای برنامه iOS مبتنی بر SwiftUI ایجاد کنیم.

قرار دادن: برای دسترسی آسان در گوشه پایین سمت راست قرار گرفته است.

نماد: یک علامت مثبت (+) که به وضوح یک عمل “افزودن” را نشان می دهد.

سبک: طراحی تمیز و مینیمالیستی که می تواند با رابط کاربری شما ترکیب شود.

در اینجا نگاهی اجمالی از آنچه به دست خواهیم آورد آورده شده است:

اسکرین شات از یک برنامه با دکمه FABاسکرین شات از یک برنامه با دکمه FAB

آماده کدنویسی هستید؟ بیایید شیرجه بزنیم:

کد برای اجرای دکمه FABکد برای اجرای دکمه FAB

var body: some View {
    VStack(spacing: 20) {
        // ...
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .overlay(
        VStack {
            Spacer() // Pushes the button to the bottom
            HStack {
                Spacer() // Pushes the button to the right
                Button(action: {
                    // Button Action here
                }) {
                    Image(systemName: "plus")
                        .foregroundColor(.white)
                        .padding()
                        .background(Color(.green))
                        .clipShape(Circle())
                        .shadow(color: Color(.gray), radius: 2.5)
                }
                .padding() 
            }
        }
    ...

Source link