دکمه

کلمات کلیدی: AiAssisted، محصول:JetpackCompose

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

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

سطح 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

این پیاده سازی به شکل زیر ظاهر می شود:

منابع اضافی

• دکمه اکشن شناور
• نمای کلی متریال طراحی 3 دکمه