---
title: "Jetpack Compose"
description: "أضف Tanrei إلى تطبيق Android مبني بـ Jetpack Compose."
url: "https://tanrei.chnotchy.com/ar/getting-started/compose/"
last_updated: 2026-10-20T01:38:40.000Z
---

# Jetpack Compose

> أضف Tanrei إلى تطبيق Android مبني بـ Jetpack Compose.

توفّر مكتبة Compose دوال composable و `TanreiTheme` وكائنات رموز (tokens) مولَّدة. تعتمد المكتبة على Compose Foundation لا على مكتبة مكوّنات Material، فلا تجلب إلى تطبيقك نظام تصميم ثانيًا.

> [!WARNING]
> **لم يُنشر بعد**
>
> `io.github.chnotchy:tanrei` غير موجودة بعدُ على Maven Central. تُنشر المنصة حين تلحق بالمواصفات الحالية، والتكامل المستمر (CI) الخاص بـ Jetpack Compose متوقف حتى ذلك الحين. يبيّن قسم «من الشيفرة المصدرية» أدناه كيف تُضاف الحزمة من [chnotchy/tanrei](https://github.com/chnotchy/tanrei)، ويبيّن قسم «بعد نشرها» طريقة التثبيت حينها.

## التثبيت

### من الشيفرة المصدرية

> [!WARNING]
> **لا تُبنى اليوم**
>
> لم تلحق مكتبة Compose بعد بالمواصفات والرموز (tokens) الحالية: كُتبت مصادرها على إصدار سابق من شيفرة الرموز المولَّدة، ولا تُترجَم (compile) على شيفرة اليوم. والتكامل المستمر (CI) الخاص بها متوقف إلى أن تلحق، و[صفحة الحالة](https://tanrei.chnotchy.com/ar/status/) تَسِم مكوّناتها بأنها _متأخرة_. الخطوات أدناه هي طريقة إضافتها إلى تطبيق، وتعمل حين تلحق المكتبة.

استنسخ المستودع بجانب تطبيقك وضمِّن بناء Gradle الخاص به، الذي يحمل المكتبة بوصفها المشروع `:tanrei`:

```kotlin
// settings.gradle.kts
includeBuild("../tanrei/packages/compose") {
  dependencySubstitution {
    substitute(module("io.github.chnotchy:tanrei")).using(project(":tanrei"))
  }
}
```

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei")
}
```

### بعد نشرها

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei:<version>")
}
```

## الاستخدام

ضع محتواك داخل `TanreiTheme` مرة واحدة قرب الجذر:

```kotlin
import io.github.chnotchy.tanrei.components.TanreiButton
import io.github.chnotchy.tanrei.theme.TanreiTheme
import io.github.chnotchy.tanrei.tokens.TanreiButtonVariant

@Composable
fun DeployScreen(isDeploying: Boolean, onDeploy: () -> Unit) {
  TanreiTheme {
    TanreiButton(
      text = "نشر",
      onClick = onDeploy,
      variant = TanreiButtonVariant.Filled,
      enabled = !isDeploying,
    )
  }
}
```

العرف في Compose هو الراية الإيجابية `enabled`، وهي ما يستخدمه Tanrei؛ والخاصية `disabled` في المواصفة تقابل عكسها. وتوجد صيغة أخرى للدالة ذات منفذ (slot) تأخذ دالة `content` حين تحتاج إلى أكثر من تسمية نصية.

## السمة والتباين

يتبع `TanreiTheme` افتراضيًّا السمة الداكنة للنظام وإعداد التباين فيه. ويمكن تثبيت الاثنين:

```kotlin
TanreiTheme(theme = TanreiThemeMode.Dark, contrast = TanreiContrast.High) {
  App()
}
```

## الخطوط

يُحَلّ السلّم الطباعي افتراضيًّا إلى عائلة الخطوط الافتراضية للمنصة. مرِّر `TanreiFontFamilies` خاصًّا بك إلى `TanreiTheme` لاستخدام Inter (و Noto Sans JP و Roboto Mono) من موارد الخطوط في تطبيقك. تُسمّى أنماط النص بحسب المستوى (`TanreiTheme.tokens.typescale.heading2` و `.body` و `.label`؛ و `.toTextStyle()` يحوّل أحدها إلى `TextStyle` في Compose)، و `TanreiTheme.tokens.typescale.heading1.emphasized()` هو النمط نفسه بوزنه مضافًا إليه درجة التوكيد الخاصة بفئة العناوين (وخارج التركيب: `emphasized(system.typescale.emphasis)`).