Button

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

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

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

• 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