Button

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

تصویر زیر پنج نوع دکمه در طراحی متریال را نشان می دهد.

سطح API

• onClick : تابعی که با فشار دادن دکمه توسط کاربر فراخوانی می شود.
• enabled : در صورت false، این پارامتر باعث می شود که دکمه در دسترس و غیرفعال به نظر برسد.
• colors : نمونه ای از ButtonColors که رنگ های استفاده شده در دکمه را تعیین می کند.
• contentPadding : بالشتک داخل دکمه.

دکمه پر شده

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

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

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

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

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

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

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

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

دکمه مشخص شده

جزء دکمه outlined از OutlinedButton قابل ترکیب استفاده می کند. به طور پیش فرض با یک طرح کلی ظاهر می شود.

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

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

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

دکمه مرتفع

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

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

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

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

دکمه متن

جزء دکمه متن از TextButton composable استفاده می کند. تا زمانی که فشار داده شود، فقط به عنوان متن ظاهر می شود. به طور پیش فرض پر شده یا طرح کلی ندارد.

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

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

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

منابع اضافی

• دکمه اکشن شناور
• اسناد رابط کاربری مواد