یک کارت به عنوان ظرف ایجاد کنید

Card composable به عنوان یک محفظه طراحی متریال برای رابط کاربری شما عمل می کند. کارت ها یک محتوای منسجم را ارائه می دهند، مانند:

  • یک محصول در یک اپلیکیشن خرید.
  • یک خبر در یک اپلیکیشن خبری.
  • یک پیام در یک برنامه ارتباطی

تمرکز بر به تصویر کشیدن یک محتوا، Card از سایر کانتینرها متمایز می کند. به عنوان مثال، Scaffold ساختار کلی را برای یک صفحه نمایش کامل فراهم می کند. کارت یک عنصر رابط کاربری کوچکتر در یک طرح بندی بزرگتر است، در حالی که یک مؤلفه طرح بندی مانند Column یا Row یک API ساده تر و عمومی تر ارائه می دهد.

این موضوع به شما نشان می دهد که چگونه چهار نوع کارت را پیاده سازی کنید:

سازگاری نسخه

این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.

وابستگی ها

یک کارت پایه ایجاد کنید

Card بسیار شبیه سایر کانتینرها در Compose عمل می کند. شما محتوای آن را با فراخوانی سایر اجزای سازنده درون آن اعلام می کنید. به عنوان مثال، در نظر بگیرید که چگونه Card شامل یک تماس به Text در مثال حداقل زیر است:

یک کارت پر شده ایجاد کنید

نکته کلیدی در اینجا استفاده از ویژگی colors برای تغییر رنگ پر شده است:

نتایج

یک کارت با رنگ سطحی از تم متریال پر شده است.
شکل 1. نمونه ای از کارت پر شده.

یک کارت مرتفع ایجاد کنید

قطعه زیر نحوه پیاده سازی کارت elevated را نشان می دهد. از ElevatedCard اختصاصی composable استفاده کنید.

می توانید از ویژگی elevation برای کنترل ظاهر elevation و سایه حاصل استفاده کنید.

نتایج

یک کارت در بالای پس‌زمینه برنامه، با یک سایه قرار دارد.
شکل 2. نمونه ای از یک کارت بالا.

یک کارت مشخص ایجاد کنید

در زیر نمونه ای از یک کارت مشخص شده است. از OutlinedCard اختصاصی composable استفاده کنید.

نتایج

یک کارت با حاشیه مشکی نازک مشخص شده است.
شکل 3. نمونه ای از یک کارت مشخص شده.

نکات کلیدی

مرجع تعریف API Card را ببینید. چندین پارامتر را تعریف می کند که می توانید از آنها برای سفارشی کردن ظاهر و رفتار جزء استفاده کنید.

برخی از پارامترهای کلیدی عبارتند از:

  • elevation : سایه ای به مولفه اضافه می کند که باعث می شود آن را بالاتر از پس زمینه به نظر برسانید.
  • colors : از نوع CardColors برای تنظیم رنگ پیش‌فرض ظرف و هر فرزند استفاده می‌کند.
  • enabled : اگر این پارامتر را false ارسال کنید، کارت غیرفعال شده ظاهر می شود و به ورودی کاربر پاسخ نمی دهد.
  • onClick : معمولاً یک Card رویدادهای کلیک را نمی پذیرد. به این ترتیب، اضافه بار اولیه ای که می خواهید به آن توجه کنید همان چیزی است که یک پارامتر onClick را تعریف می کند. زمانی که می‌خواهید پیاده‌سازی Card به کلیک‌های کاربر پاسخ دهد، از این اضافه بار استفاده کنید.

کارت‌ها با پیمایش ذاتی یا رد کردن کنش‌ها ارائه نمی‌شوند، اما می‌توانند در ترکیب‌هایی که این ویژگی‌ها را ارائه می‌دهند، ادغام شوند. به عنوان مثال، برای پیاده سازی Swipe to dismiss روی کارت، آن را با SwipeToDismiss composable ادغام کنید. برای ادغام با اسکرول، از اصلاح کننده های اسکرول مانند verticalScroll استفاده کنید. برای اطلاعات بیشتر به مستندات Scroll مراجعه کنید.

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

بیاموزید که چگونه توابع ترکیب‌پذیر می‌توانند به شما کمک کنند تا به راحتی اجزای رابط کاربری زیبا را بر اساس سیستم طراحی مواد طراحی کنید.
مجموعه راهنمای سریع

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.
به سؤالات متداول بروید بازخورد بگذارید