دکمه

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

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

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

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

منابع بیشتر

• دکمه کنش شناور
• نمای کلی دکمه‌های Material Design 3