زر

keywords: AiAssisted, product:JetpackCompose

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

توضّح هذه الصورة أنواع الأزرار الخمسة في Material Design:

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

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