دکمه

دکمه‌ها عناصر بنیادی‌ای هستند که به کاربر امکان می‌دهند کنش تعریف‌شده‌ای را راه‌اندازی کند. پنج نوع دکمه وجود دارد. این جدول ظاهر هریک از پنج نوع دکمه و همچنین مکان‌هایی را که باید از آن‌ها استفاده کنید شرح می‌دهد:

این تصویر پنج نوع دکمه در «طراحی Material» را نشان می‌دهد:

سطح میانای برنامه‌سازی کاربردی

onClick

عملکردی که سیستم وقتی کاربر دکمه را فشار می‌دهد فرا می‌خواند.

enabled

وقتی false، این پارامتر باعث می‌شود دکمه دردسترس نباشد و غیرفعال شود.

colors

نمونه‌ای از ButtonColors که رنگ‌های استفاده‌شده در دکمه را تعیین می‌کند.

contentPadding

حاشیه داخل دکمه.

دکمه توپر

عنصر دکمه پر از Button قابل ترکیب پایه استفاده می‌کند. به‌طور پیش‌فرض با رنگ یکدست پر می‌شود. تکه‌کد نحوه پیاده‌سازی عنصر را نشان می‌دهد:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

دکمه تونال پرشده

عنصر دکمه رنگی پر از FilledTonalButton ترکیب‌شدنی استفاده می‌کند. به‌طور پیش‌فرض با رنگ تونال پر می‌شود.

تکه‌کد نحوه پیاده‌سازی عنصر را نشان می‌دهد:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

دکمه خط‌دار

عنصر دکمه خط‌دار از عنصر ترکیبی OutlinedButton استفاده می‌کند. به‌طور پیش‌فرض با یک طرح کلی ظاهر می‌شود.

تکه‌کد نحوه پیاده‌سازی عنصر را نشان می‌دهد:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

دکمه برجسته

عنصر دکمه برجسته از ElevatedButton ترکیب‌شدنی استفاده می‌کند. به‌طور پیش‌فرض سایه‌ای دارد که نشان‌دهنده جلوه ارتفاع است. این دکمه‌ای توپر است که سایه دارد.

تکه‌کد نحوه پیاده‌سازی عنصر را نشان می‌دهد:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

دکمه نوشتار

عنصر دکمه نوشتاری از عنصر ترکیبی TextButton استفاده می‌کند. تا زمانی که فشار داده نشود، فقط به‌صورت نوشتار نمایش داده می‌شود. به‌طور پیش‌فرض، دارای رنگ یکدست یا خطوط محیطی نیست.

تکه‌کد نحوه پیاده‌سازی عنصر را نشان می‌دهد:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

منابع بیشتر

• دکمه کنش شناور
• نمای کلی دکمه‌های «طراحی سه‌بعدی ۳»