توفّر Jetpack Compose تنفيذًا للتصميم المتعدد الأبعاد 3، وهو التطور التالي للتصميم المتعدد الأبعاد. يتضمّن Material 3 ميزات معدّلة للمظاهر والمكوّنات وميزات تخصيص Material You، مثل الألوان الديناميكية، وتم تصميمه ليكون متسقًا مع النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث.
سنوضِّح أدناه تنفيذ التصميم Material Design 3 باستخدام نموذج تطبيق Response (الرد) كمثال. تستند عينة الرد بالكامل إلى التصميم متعدد الأبعاد 3.
التبعية
لبدء استخدام المادة 3 في تطبيق Compose، أضِف التبعية Compose Material 3 إلى ملفات build.gradle:
implementation "androidx.compose.material3:material3:$material3_version"
بمجرد إضافة التبعية، يمكنك البدء في إضافة أنظمة Material Design، بما في ذلك اللون وأسلوب الخط والشكل، إلى تطبيقاتك.
واجهات برمجة التطبيقات التجريبية
تُعد بعض واجهات برمجة التطبيقات M3 API تجريبية. وفي مثل هذه الحالات، عليك تفعيل الميزة على مستوى الوظيفة أو الملف باستخدام التعليق التوضيحي ExperimentalMaterial3Api:
// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
تحديد نسق المواد
يحتوي المظهر M3 على الأنظمة الفرعية التالية: نظام الألوان وأسلوب الخط والأشكال. عند تخصيص هذه القيم، تنعكس التغييرات التي أجريتها تلقائيًا في مكونات M3 التي تستخدمها لإنشاء تطبيقك.
تنفّذ Jetpack Compose هذه المفاهيم باستخدام الإصدار MaterialTheme من M3
القابل للإنشاء:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
لوضع موضوع لمحتوى تطبيقك، حدد نظام الألوان وأسلوب الخط والأشكال الخاصة بتطبيقك.
النمط اللوني
أساس نظام الألوان هو مجموعة من خمسة ألوان رئيسية. ويرتبط كل لون من هذه الألوان بلوحة ألوان من 13 درجة لون تستخدمها مكوّنات المادة 3. على سبيل المثال، في ما يلي نظام الألوان للمظهر الفاتح لعملية الرد:
يمكنك الاطّلاع على المزيد من المعلومات حول أدوار الألوان وأنظمة الألوان.
إنشاء مخططات الألوان
يمكنك إنشاء ColorScheme مخصّص يدويًا، ولكن غالبًا ما يكون من الأسهل إنشاء واحدة باستخدام ألوان المصدر من علامتك التجارية. تتيح لك أداة أداة إنشاء
مظاهر المواد إجراء ذلك، ويمكنك تصدير رمز إنشاء المظاهر اختياريًا. يتم إنشاء الملفات التالية:
- يحتوي
Color.ktعلى ألوان المظهر مع جميع الأدوار المحددة لكل من ألوان المظهر الفاتح والداكن.
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
- يحتوي
Theme.ktعلى إعداد لدرجات الألوان الفاتحة والداكنة ومظهر التطبيق.
private val LightColorScheme = lightColorScheme(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
// ..
)
private val DarkColorScheme = darkColorScheme(
primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary,
primaryContainer = md_theme_dark_primaryContainer,
// ..
)
@Composable
fun ReplyTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colorScheme =
if (!darkTheme) {
LightColorScheme
} else {
DarkColorScheme
}
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
لإتاحة المظهرَين الفاتح والداكن، استخدِم isSystemInDarkTheme(). بناءً على إعداد النظام، حدد نظام الألوان المطلوب استخدامه: فاتح أم داكن.
أنظمة ألوان ديناميكية
اللون الديناميكي هو جزء أساسي في Material You، حيث تستمد الخوارزمية ألوانًا مخصّصة من خلفية المستخدم ليتم تطبيقها على التطبيقات وواجهة مستخدم النظام. تُستخدم لوحة الألوان هذه كنقطة بداية لإنشاء مخططات ألوان فاتحة وداكنة.
تتوفّر الألوان الديناميكية على نظام التشغيل Android 12 والإصدارات الأحدث. إذا كان اللون الديناميكي متاحًا،
يمكنك إعداد ColorScheme ديناميكي. وإذا لم يكن كذلك، عليك العودة
إلى استخدام ضوء مخصّص أو إضاءة داكنة ColorScheme.
توفر ColorScheme دوال الإنشاء لإنشاء نظام ألوان فاتح أو داكن:
// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
استخدام الألوان
يمكنك الوصول إلى ألوان نسق المواد في تطبيقك من خلال
MaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
يمكن استخدام كل دور لون في مجموعة متنوعة من الأماكن اعتمادًا على حالة المكون وبروزه وتوكيده.
- اللون الأساسي هو اللون الأساسي، المستخدم للمكونات الرئيسية مثل الأزرار البارزة والحالات النشطة ودرجة لون الأسطح المرتفعة.
- يُستخدم لون المفتاح الثانوي للمكوّنات الأقل بروزًا في واجهة المستخدم، مثل شرائح الفلتر، ويزيد من فرصة التعبير عن اللون.
- يُستخدم لون المفتاح الثالث لاستنتاج أدوار اللكنات المتباينة التي يمكن استخدامها لتحقيق التوازن بين الألوان الأساسية والثانوية أو جذب انتباه محسّن إلى عنصر ما.
يستخدم تصميم تطبيق نموذج الرد لون الحاوية الأساسية أعلى الحاوية الأساسية للتوكيد على العنصر المحدد.
Card(
colors = CardDefaults.cardColors(
containerColor =
if (isSelected) MaterialTheme.colorScheme.primaryContainer
else
MaterialTheme.colorScheme.surfaceVariant
)
) {
Text(
text = "Dinner club",
style = MaterialTheme.typography.bodyLarge,
color =
if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
else MaterialTheme.colorScheme.onSurface,
)
}
يمكنك أن ترى هنا في درج التنقل "الرد" كيفية استخدام ألوان الحاويات الثانوية والثالثية على عكس لإنشاء التوكيد والتمييز.
أسلوب الخط
يحدد Material Design 3 مقياس النوع، بما في ذلك أنماط النص التي تم تعديلها من Material Design 2. تم تبسيط التسمية والتجميع إلى: عرض، وعنوان، عنوان، ونص، وتصنيف، بأحجام كبيرة ومتوسطة وصغيرة لكل منها.
| م3 | حجم الخط/ارتفاع السطر التلقائي |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
تعريف أسلوب الخط
يوفر Compose الفئة M3 Typography، بالإضافة إلى فئتَي
TextStyle والمتعلّقة بالخطوط الحالية، لوضع نموذج لمقياس النوع Material 3. تقدّم الدالة الإنشائية Typography إعدادات تلقائية لكل نمط، ما يتيح لك حذف أي معلمات لا تريد تخصيصها:
val replyTypography = Typography(
titleLarge = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp
),
titleMedium = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp
),
// ..
)
// ..
من المحتمل ألا يحتاج منتجك إلى جميع الأنماط الافتراضية الـ 15 من مقياس نوع التصميم متعدد الأبعاد. في هذا المثال، يتم اختيار خمسة أحجام لمجموعة مخفّضة بينما يتم حذف بقية الأحجام.
يمكنك تخصيص أسلوب الخط من خلال تغيير القيم التلقائية للسمتَين TextStyle
والمرتبطة بالخطوط، مثل fontFamily وletterSpacing.
bodyLarge = TextStyle(
fontWeight = FontWeight.Normal,
fontFamily = FontFamily.SansSerif,
fontStyle = FontStyle.Italic,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp,
baselineShift = BaselineShift.Subscript
),
بعد تحديد Typography، مرِّره إلى MaterialTheme على M3:
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
استخدام أنماط النص
يمكنك استرداد رسم الخط المتوفّر في MaterialTheme M3 القابل للإنشاء باستخدام MaterialTheme.typography:
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
يمكنك قراءة المزيد عن إرشادات المواد بشأن تطبيق أسلوب الخط.
الأشكال
يمكن عرض الأسطح المادية بأشكال مختلفة. والأشكال الانتباه المباشر، وتحديد المكونات، وتوصيل الحالة، والتعبير عن العلامة التجارية.
يحدد مقياس الشكل نمط زوايا الحاوية، بحيث تتوفر مجموعة من الاستدارة بدءًا من المربع إلى الشكل الدائري بالكامل.
تحديد الأشكال
توفّر Compose للفئة M3 Shapes مَعلمات موسّعة لإتاحة الأشكال الجديدة من M3. مقياس الشكل M3 أشبه بمقياس النوع،
ما يتيح مجموعة معبرة من الأشكال عبر واجهة المستخدم.
هناك أحجام مختلفة للأشكال:
- صغير جدًا
- صغير
- متوسطة
- كبير
- كبيرة جدًا
بشكل افتراضي، لكل شكل قيمة افتراضية، ولكن يمكنك تجاوز ما يلي:
val replyShapes = Shapes(
extraSmall = RoundedCornerShape(4.dp),
small = RoundedCornerShape(8.dp),
medium = RoundedCornerShape(12.dp),
large = RoundedCornerShape(16.dp),
extraLarge = RoundedCornerShape(24.dp)
)
بعد تحديد Shapes، يمكنك تمريره إلى MaterialTheme على M3:
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
استخدام الأشكال
يمكنك تخصيص مقياس الشكل لجميع المكونات في MaterialTheme أو يمكنك إجراء ذلك على أساس كل مكوّن على حدة.
تطبيق شكل متوسط وكبير بقيم تلقائية:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
shape = MaterialTheme.shapes.large,
onClick = {
}
) {
/* fab content */
}
هناك شكلان آخران، وهما RectangleShape وCircleShape، وهما جزءان من Compose. لا يحتوي شكل المستطيل على نصف قطر حدي ويعرض شكل الدائرة حواف دائرية كاملة:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
توضح الأمثلة أدناه بعض المكونات ذات قيم الشكل الافتراضية المطبقة عليها:
يمكنك قراءة المزيد عن إرشادات Material بشأن تطبيق الشكل.
التوكيد
يتم توفير التوكيد في M3 باستخدام أشكال مختلفة من الألوان ومجموعات الألوان الخاصة بها. في M3، هناك طريقتان لإضافة التوكيد إلى واجهة المستخدم الخاصة بك:
- باستخدام ألوان السطح وتباين السطح والخلفية إلى جانب ألوان متغيّرات على السطح من نظام ألوان M3 الموسّع. على سبيل المثال، يمكن استخدام السطح مع صيغ سطحية مختلفة، ويمكن استخدام تباين سطحي لتوفير مستويات مختلفة من التوكيد.
- استخدام درجات كثافة خطوط مختلفة للنص أعلاه، لقد رأيت أنه يمكنك توفير ترجيحات مخصصة لمقياس النوع لدينا لتوفير توكيد مختلف.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
الارتفاع
يمثل المادة 3 المسقط الرأسي باستخدام تراكبات ألوان من حيث الدرجات اللونية. هذه طريقة جديدة للتمييز بين الحاويات والأسطح عن بعضها البعض، حيث يستخدم ارتفاع درجة اللون المتزايد نغمة أكثر بروزًا، بالإضافة إلى الظلال.
وقد تغيرت أيضًا تراكبات الارتفاع في المظاهر الداكنة إلى تراكبات لون من الدرجات اللونية في المادة 3. يأتي لون التراكب من خانة اللون الأساسي.
يشمل السطح M3، الجزء الخلفي القابل للإنشاء لمعظم مكونات M3، إمكانية تحديد ارتفاع درجة اللون وارتفاع الظل:
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
مكوّنات المادة
يأتي التصميم المتعدد الأبعاد مع مجموعة غنية من مكونات Material (مثل الأزرار والشرائح والبطاقات وشريط التنقل) التي تتبع حاليًا ميزة Material Design وتساعدك على إنشاء تطبيقات Material Design جميلة. يمكنك البدء في استخدام المكونات ذات الخصائص الافتراضية مباشرة من البداية.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
توفر M3 العديد من الإصدارات من نفس المكونات لاستخدامها في أدوار مختلفة وفقًا للتأكيد والاهتمام.
- زر إجراء عائم موسع لإجراء أعلى توكيد:
ExtendedFloatingActionButton(
onClick = { /*..*/ },
modifier = Modifier
) {
Icon(
imageVector = Icons.Default.Edit,
contentDescription = stringResource(id = R.string.edit),
)
Text(
text = stringResource(id = R.string.add_entry),
)
}
- زر معبأ لإجراء تركيز عالي:
Button(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.view_entry))
}
- زر نصي لإجراء منخفض التركيز:
TextButton(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.replated_articles))
}
يمكنك قراءة المزيد من المعلومات عن الأزرار والمكوّنات الأخرى في Material. ويوفر المادة 3 مجموعة متنوعة من مجموعات المكوّنات مثل الأزرار وأشرطة التطبيقات ومكونات التنقل المصممة خصيصًا لحالات الاستخدام وأحجام الشاشات المختلفة.
مكوّنات التنقّل
يوفر Material أيضًا العديد من مكونات التنقل التي تساعدك في تنفيذ التنقل، اعتمادًا على أحجام الشاشة وحالاتها المختلفة.
تُستخدم السمة NavigationBar للأجهزة الصغيرة عندما تريد استهداف 5 وجهات أو أقل:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
يُستخدم NavigationRail مع الأجهزة اللوحية أو الهواتف ذات الحجم الصغير إلى المتوسط في الوضع الأفقي. حيث توفر هندسة مريحة للمستخدمين ويحسن تجربة المستخدم لتلك الأجهزة.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
BottomNavigationBar (يسار) وNavigationRail (يمين)يمكنك الردّ باستخدام كلا المظهرَين التلقائيَين لتحسين تجربة المستخدم الغامرة على جميع أحجام الأجهزة.
يُستخدم NavigationDrawer مع الأجهزة اللوحية ذات الحجم المتوسط إلى الكبير، حيث تتوفر لديك مساحة كافية لعرض التفاصيل. يمكنك استخدام السمة PermanentNavigationDrawer أو السمة ModalNavigationDrawer مع السمة NavigationRail.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { },
label = { }
)
}
}) {
}
تُحسِّن خيارات التنقل من تجربة المستخدم وهندسة التصميم وسهولة الوصول إليه. يمكنك معرفة المزيد من المعلومات عن مكوّنات التنقّل باستخدام Material في الدرس التطبيقي حول الترميز التكيُّفي.
تخصيص تصميم المكوِّن
يوفّر الإصدار M3 إمكانية التخصيص والمرونة. تستخدم جميع المكوّنات ألوانًا تلقائية، مع أنّها تعرض واجهات برمجة تطبيقات مرنة لتخصيص ألوانها إذا لزم الأمر.
توفر معظم المكونات، مثل البطاقات والأزرار، كائنًا افتراضيًا يعرض واجهات للّون والمسقط الرأسي يمكن تعديله لتخصيص المكون:
val customCardColors = CardDefaults.cardColors(
contentColor = MaterialTheme.colorScheme.primary,
containerColor = MaterialTheme.colorScheme.primaryContainer,
disabledContentColor = MaterialTheme.colorScheme.surface,
disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
defaultElevation = 8.dp,
pressedElevation = 2.dp,
focusedElevation = 4.dp
)
Card(
colors = customCardColors,
elevation = customCardElevation
) {
// m3 card content
}
ويمكنك الاطّلاع على مزيد من المعلومات عن تخصيص المادة 3.
واجهة مستخدِم النظام
إنّ بعض جوانب Material You تأتي من النمط المرئي الجديد وواجهة مستخدم النظام على الإصدار 12 من Android والإصدارات الأحدث. هناك مجالان رئيسيان توجد فيهما التغييرات هما التموج والتمرير الزائد. لا يلزم اتخاذ أي إجراء إضافي لتنفيذ هذه التغييرات.
تمويج
يستخدم تطبيق Ripple الآن بريقًا خفيفًا لإضاءة الأسطح عند الضغط عليه. يستخدم Compose Material Ripple النظام الأساسي RippleDrawable للتحكّم في نظام التشغيل Android، لذلك تتوفّر ميزة "تموج البراق" في الإصدار 12 من نظام التشغيل Android والإصدارات الأحدث لجميع مكوّنات Material.
التمرير الزائد
يستخدم التمرير الزائد الآن تأثير التوسيع عند حافة حاويات التمرير.
تكون ميزة "التمرير الزائد" مفعَّلة تلقائيًا في العناصر القابلة للإنشاء لحاوية التمرير، على سبيل المثال، LazyColumn وLazyRow وLazyVerticalGrid، في الإصدار
Compose Foundation 1.1.0 والإصدارات الأحدث، بغض النظر عن مستوى واجهة برمجة التطبيقات.
تسهيل الاستخدام
تم تصميم معايير سهولة الوصول المضمنة في مكونات Material لتوفير أساس لتصميم المنتج الشامل. يمكن أن يؤدي فهم سهولة الوصول إلى المنتج إلى تحسين سهولة الاستخدام لجميع المستخدمين، بما في ذلك الأشخاص الذين يعانون من ضعف البصر أو العمى أو الإعاقات السمعية أو العجز الإدراكي أو الإعاقات الحركية أو الإعاقات الظرفية (مثل كسر الذراع).
تسهيل استخدام الألوان
تم تصميم اللون الديناميكي لتلبية معايير إمكانية الوصول لتباين الألوان. يعد نظام لوحات الدرجات اللونية أمرًا بالغ الأهمية لجعل أي نظام ألوان متاحًا بشكل افتراضي.
ويوفر نظام ألوان Material قيم درجات اللون والقياسات القياسية التي يمكن استخدامها لتحقيق نسب التباين التي يمكن الوصول إليها.
إنّ جميع مكوّنات Material والتصميمات الديناميكية تستخدم حاليًا أدوار الألوان المذكورة أعلاه من مجموعة من لوحات الألوان التي تم اختيارها لتلبية متطلبات تسهيل الاستخدام. ومع ذلك، إذا كنت تقوم بتخصيص المكونات، فتأكد من استخدام أدوار الألوان المناسبة وتجنب عدم التطابق.
يمكنك استخدام اللون الأساسي فوق الحاوية الأساسية، والحاوية الأساسية فوق الحاوية الأساسية، واستخدام نفس الشيء مع الألوان المحايدة واللكنة الأخرى لتوفير تباين يسهل الوصول إليه للمستخدم.
يمنح استخدام حاوية ثلاثية أعلى القائمة الأساسية زر تباين ضعيف للمستخدم:
// ✅ Button with sufficient contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary
)
) {
}
// ❌ Button with poor contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
contentColor = MaterialTheme.colorScheme.primaryContainer
)
) {
}
سهولة الوصول إلى أسلوب الخط
يعمل مقياس النوع M3 على تحديث منحدر النوع الثابت وقيمه لتوفير إطار عمل مبسّط وديناميكي لفئات الحجم التي يمكن توسيعها على جميع الأجهزة.
على سبيل المثال، في الإصدار M3، يمكن تخصيص قيم مختلفة لشاشة العرض الصغيرة بناءً على سياق الجهاز، مثل الهاتف أو الجهاز اللوحي.
شاشات كبيرة الحجم
توفّر Material إرشادات حول التصاميم التكيُّفية والأجهزة القابلة للطي لتسهيل الوصول إلى التطبيقات وتحسين الجوانب المريحة للمستخدمين الذين لديهم أجهزة كبيرة.
يوفر Material أنواعًا مختلفة من التنقل لمساعدتك في تقديم تجربة مستخدم أفضل للأجهزة الكبيرة.
يمكنك معرفة المزيد من المعلومات حول إرشادات الشاشات الكبيرة لأجهزة Android والاطّلاع على نموذج الرد الخاص بالتصميم المتكيف الذي يسهل الوصول إليه.
مزيد من المعلومات
للمزيد من المعلومات حول تخصيص المواد في Compose، يمكنك الاطّلاع على المراجع التالية:
نماذج التطبيقات
مستندات Google
مرجع واجهة برمجة التطبيقات ورمز المصدر
الفيديوهات الطويلة
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
- نقل البيانات من المادة 2 إلى المادة 3 في Compose
- Material Design 2 في Compose
- أنظمة التصميم المخصّصة في Compose