Button

الأزرار هي مكوّنات أساسية تسمح للمستخدم بتنفيذ أحد الإجراءات المحدّدة. هناك خمسة أنواع من الأزرار. يوضّح الجدول التالي شكل كل نوع من الأنواع الخمسة للأزرار، بالإضافة إلى مواضع استخدامها.

توضِّح الصورة التالية الأنواع الخمسة للأزرار في تصميم المواد.

واجهة برمجة التطبيقات

• onClick: الدالة التي يتمّ استدعاؤها عندما يضغط المستخدم على الزر
• enabled: عندما تكون هذه المَعلمة غير صحيحة، يؤدي ذلك إلى ظهور الزر غير متاح وغير نشط.
• 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