پشته‌های عمودی در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا

این راهنما به شما کمک می‌کند تا برای این نوع دستگاه‌های XR تجربه ایجاد کنید.

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

در Jetpack Compose Glimmer، VerticalStack یک طرح‌بندی تنبل و عمودی قابل اسکرول است که آیتم‌ها را در یک توالی سه‌بعدی با همپوشانی بصری مرتب می‌کند. آیتم اصلی به طور برجسته در پیش‌زمینه نمایش داده می‌شود، در حالی که آیتم‌های بعدی در پشت آن قرار می‌گیرند.

رفتارهای پیمایش و موقعیت‌یابی

از آنجا که پشته‌ها آیتم‌ها را در یک طرح فشرده و همپوشانی مرتب نگه می‌دارند، رفتارهایی دارند که با سایر انواع اجزای ترتیبی مانند لیست‌ها متفاوت است:

• وقتی کاربر به صورت عمودی اسکرول می‌کند، آیتم فعال پیش‌زمینه از دید خارج می‌شود و به آیتمی که بلافاصله زیر آن قرار دارد اجازه می‌دهد تا به موقعیت برجسته پیش‌زمینه منتقل شود.
• آیتم‌ها همیشه پس از پایان حرکت کاربر، با استفاده از یک انیمیشن فنری مخصوص، به موقعیت پیش‌زمینه منتقل می‌شوند.
• آیتم‌ها در امتداد محور z قرار می‌گیرند و آیتم‌های بعدی در لیست، پشت آیتم اصلی قرار می‌گیرند.

مدیریت تمرکز

VerticalStack از یک سیستم فوکوس تخصصی استفاده می‌کند تا اطمینان حاصل کند که آیتم پیش‌زمینه فعلی همیشه هدف اصلی تعامل کاربر است:

• تمرکز اولیه و ورود مجدد : تمرکز اولیه و ورود مجدد تمرکز به بالاترین آیتم فعلی پشته می‌رود.
• اعلان فوکوس خودکار : همزمان با انتقال آیتم‌ها، پشته درخواست فوکوس روی آیتم بالایی را می‌دهد.
• ردیابی فوکوس : هر آیتم onFocusChanged برای اطلاع‌رسانی وضعیت فوکوس خود به StackState استفاده می‌کند.

مثال: ایجاد یک پشته عمودی

کد زیر یک پشته عمودی با چندین آیتم ایجاد می‌کند:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}
StackSamples.kt

نکات کلیدی در مورد کد

• textMotion برای LocalTextStyle متن روی Animated تنظیم می‌کند. این کار باعث می‌شود متن در طول انیمیشن‌های طرح‌بندی یا انتقال مقیاس‌بندی، روان‌تر رندر شود تا از ایجاد آثار مصنوعی ناشی از شکستن پیکسل‌ها جلوگیری شود.
• اندازه مشخصی برابر با 364.dp برای ارتفاع پشته عمودی ارائه می‌دهد. همیشه یک ارتفاع مشخص ارائه دهید، از یک اصلاح‌کننده ارتفاع استفاده کنید یا اصلاح‌کننده fillMaxSize را برای تعریف ناحیه بصری برای انتقال کارت‌ها اعمال کنید.
• برخلاف سایر کامپوننت‌هایی که مستقیماً پارامتر شکل (shape) می‌گیرند، VerticalStack مرزهای بصری آیتم‌های خود را با استفاده از اصلاح‌کننده itemDecoration مدیریت می‌کند. این مثال برای itemDecoration آیتم اولیه، همان شکلی را که به همه آیتم‌های فرزند می‌دهد، ارسال می‌کند تا برش و جلوه‌های بصری ثابتی حفظ شود. این مثال از CardDefaults.shape پیش‌فرض استفاده می‌کند.