با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
هنگامی که کاربر با برنامه شما تعامل دارد، اغلب این کار را با لمس عناصر روی صفحه نمایش خود انجام می دهد. با این حال، این تنها شکل تعامل نیست. سایر اشکال تعامل می تواند شامل موارد زیر باشد:
یک کاربر ChromeOS ممکن است از کلیدهای پیکان روی صفحه کلید فیزیکی خود برای پیمایش در صفحه استفاده کند.
شخصی که بازی می کند می تواند از کنترلر بازی متصل خود برای پیمایش در منوی بازی استفاده کند.
یک کاربر برنامه تلفن همراه ممکن است با استفاده از صفحه‌کلید روی صفحه از میان عناصر بچرخد.
در این موارد، ردیابی اینکه کدام مؤلفه در هر نقطه از زمان فعال است، مهم است که ما آن را فوکوس می نامیم. عناصر روی صفحه باید به ترتیب منطقی متمرکز شوند. Jetpack Compose یک روش پیش‌فرض برای مدیریت فوکوس دارد که در بیشتر موارد درست است. با این حال، در برخی موارد، ممکن است لازم باشد این رفتار پیش‌فرض را اصلاح کنید.
صفحات زیر نحوه استفاده از فوکوس را در برنامه خود شرح می دهند:
تغییر ترتیب پیمایش فوکوس : نحوه تغییر ترتیب فوکوس پیش‌فرض، افزودن گروه‌های فوکوس، و غیرفعال کردن فوکوس قابل ترکیب را توضیح می‌دهد.
تغییر رفتار فوکوس : نحوه درخواست، گرفتن و رها کردن فوکوس و نحوه تغییر جهت فوکوس پس از ورود به صفحه را شرح می دهد.
واکنش نسبت به فوکوس : نحوه واکنش به تغییرات فوکوس، اضافه کردن نشانه های بصری به عناصر و درک وضعیت فوکوس یک عنصر را توضیح می دهد.
ترتیب پیمایش فوکوس پیش‌فرض
قبل از اینکه به رفتار پیش‌فرض جستجوی فوکوس بپردازیم، درک مفهوم سطح در سلسله مراتب مهم است: به طور کلی، می‌توان گفت که دو Composables زمانی که خواهر و برادر هستند در یک سطح هستند، به این معنی که والدین یکسان دارند. . به عنوان مثال، عناصر داخل یک Column در یک سطح هستند. بالا رفتن از یک سطح یعنی رفتن از یک فرزند به والد Composable آن، یا با حفظ همان مثال، بازگشت از یک آیتم به Column که حاوی آن است. پایین آمدن یک سطح برعکس است، از Column اصلی تا آیتم های موجود. این مفهوم را می توان برای هر Composable که می تواند Composables دیگر را شامل شود اعمال کرد.
ناوبری UI می تواند به روش های مختلفی اتفاق بیفتد، که برخی از آنها را اکثر کاربران قبلاً می دانند:
TAB ها: ناوبری یک بعدی، به جلو یا عقب . ناوبری TAB تمرکز را به عنصر بعدی یا قبلی در سلسله مراتب ارتقا می دهد. به طور پیش فرض، Compose از اعلان Composables پیروی می کند. ناوبری یک جهته را می توان از طریق کلید tab روی صفحه کلید یا قاب چرخشی در ساعت انجام داد و این نوع جستجوی فوکوس از هر عنصر روی صفحه بازدید می کند.
کلیدهای پیکان: پیمایش دو بعدی، رفتن به چپ، راست، بالا یا پایین . ناوبری دو بعدی را می توان از طریق D-Pad روی تلویزیون یا کلیدهای جهت دار روی صفحه کلید به دست آورد و ترتیب پیمایش آن فقط عناصر را در یک سطح مشخص مشاهده می کند. می توانید از مرکز D-Pad و دکمه Back برای پایین آمدن و بالا رفتن به سطح دیگری استفاده کنید.
به عنوان مثال اسکرین شات زیر را در نظر بگیرید، که در آن شما چهار دکمه دارید، یکی زیر دیگری، و می خواهید همه آنها را به ترتیب ظاهر بچرخانید. Jetpack Compose این رفتار را در خارج از جعبه ارائه می‌کند: جعبه ابزار به شما امکان می‌دهد با استفاده از کلید tab از بالا به پایین در میان هر یک از اجزای سازنده به ترتیب عمودی بچرخید، یا با فشار دادن فلش بالا یا پایین ، فوکوس را حرکت دهید.
شکل 1 . فهرست دکمه‌هایی که به شکل کوچک نمایش داده می‌شوند
وقتی به نوع دیگری از چیدمان تغییر می‌کنید، همه چیز کمی تغییر می‌کند. اگر طرح‌بندی شما بیش از یک ستون دارد، مانند طرح‌بندی زیر، Jetpack Compose به شما امکان می‌دهد بدون نیاز به اضافه کردن کد، در میان آنها پیمایش کنید. اگر کلید tab را فشار دهید، Jetpack Compose به طور خودکار موارد را به ترتیب اعلام، از اول تا چهارم برجسته می کند. استفاده از کلیدهای جهت دار روی صفحه کلید باعث می شود که انتخاب در فضای دوبعدی جهت دلخواه را دنبال کند.
این چیدمان موارد را به صورت عمودی، از بالا به پایین، از ابتدای صفحه تا انتها طی می کند:
شکل 3 . فهرستی از دکمه‌هایی که در دو ستون در کنار هم قرار گرفته‌اند و با فرمی بزرگ‌تر
دو نمونه قبلی، در حالی که در ناوبری یک جهته متفاوت هستند، تجربه یکسانی را در مورد ناوبری دو بعدی ارائه می دهند. این معمولاً به این دلیل است که موارد روی صفحه در هر دو نمونه موقعیت جغرافیایی یکسانی دارند. پیمایش به سمت راست از Column اول، فوکوس را به ستون دوم منتقل می کند و با پیمایش از Row اول به پایین، فوکوس را به ستون زیر آن منتقل می کند.
{% کلمه به کلمه %} {% آخر کلمه %}
برای شما توصیه می شود
توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-08-28 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-08-28 بهوقت ساعت هماهنگ جهانی."],[],[],null,["When a user interacts with your app, they often do so by touching elements on\ntheir screen. However, this is not the only form of interaction. Other forms of\ninteraction could include the following:\n\n- A ChromeOS user might use the *arrow keys* on their physical keyboard to navigate the screen.\n- Someone playing a game could use their attached *game controller* to navigate through the game's menu.\n- A mobile app user might cycle through elements using the *on-screen keyboard*.\n\nIn these cases, it is important to track which component is active at any given\npoint in time, which is what we call **focus**. Elements on the screen should be\nfocused in a logical order. Jetpack Compose has a default way of handling focus\nthat is correct in most cases. However, in some cases, you might need to modify\nthis default behavior.\n\nThe following pages describe how to use focus in your app:\n\n- [Change focus traversal order](/develop/ui/compose/touch-input/focus/change-focus-traversal-order): Explains how to change the default focus order, add focus groups, and disable focus of a composable.\n- [Change focus behavior](/develop/ui/compose/touch-input/focus/change-focus-behavior): Describes how to request, capture, and release focus, and how to redirect focus upon entering a screen.\n- [React to focus](/develop/ui/compose/touch-input/focus/react-to-focus): Explains how to react to focus changes, add visual cues to elements, and understand the focus state of an element.\n\nDefault focus traversal order\n\nBefore we dive into the default behavior of the focus search, it's important to\nunderstand the concept of *level* in the hierarchy: generally speaking, we can\nsay that two `Composables` are at the same level when they are siblings, meaning\nthat they have the same parents. For instance, elements inside a `Column` are at\nthe same level. Getting up a level means going from a child to its `Composable`\nparent, or, keeping the same example, going back from an item to a `Column` that\ncontains it. Going down a level is the other way around, from the `Column`\nparent to the contained items. This concept can be applied to every `Composable`\nthat can contain other `Composables`.\n| **Note:** For information about manually controlling focus order, see [Control traversal order](/develop/ui/compose/accessibility/traversal).\n\nUI navigation can happen in multiple ways, some of which most users will already\nknow:\n\n- TABs: one-dimensional navigation, going *forward* or *backward* . TAB navigation advances focus to the next or previous element in the hierarchy. By default, Compose follows the declaration of the `Composables`. One-directional navigation can be achieved through the `tab` key on a keyboard, or the Rotary Bezel on a watch, and this kind of focus search will visit each element on the screen.\n- Arrow keys: two-dimensional navigation, going *left, right, up* , or *down*. Two-dimensional navigation can be achieved through a D-Pad on a TV or arrow keys on a keyboard, and its traversal order only visits elements at a given level. You can use the D-Pad center and Back button to go down and back up to a different level.\n\nTake as an example the screenshot below, where you have four buttons, one below\nthe other, and you want to cycle through them all in order of appearance.\nJetpack Compose delivers this behavior out of the box: the toolkit lets you\ncycle through each composable in vertical order from top to bottom using the\n`tab` key, or move focus by pressing the *up* or *down* arrow.\n**Figure 1**. List of buttons displayed in a small form factor\n\nWhen you switch to a different kind of layout, things change a bit. If your\nlayout has more than one column, like the layout below, Jetpack Compose lets you\nnavigate through them without having to add any code. If you press the `tab`\nkey, Jetpack Compose automatically highlights the items in order of declaration,\nfrom First to Fourth. Using arrow keys on your keyboard makes the selection\nfollow the desired direction in 2D space.\n\n\n```kotlin\nColumn {\n Row {\n TextButton({ }) { Text(\"First field\") }\n TextButton({ }) { Text(\"Second field\") }\n }\n Row {\n TextButton({ }) { Text(\"Third field\") }\n TextButton({ }) { Text(\"Fourth field\") }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L82-L91\n```\n\n\u003cbr /\u003e\n\nThe `Composables` are declared in two `Rows`, and the focus elements are\ndeclared in order, from first to fourth. When you press the `tab` key, this\nproduces the following focus order:\n**Figure 2**. List of buttons placed in two columns side by side in a bigger form factor\n\nIn the snippet below, you declare the items in `Columns` rather than in `Rows`:\n\n\n```kotlin\nRow {\n Column {\n TextButton({ }) { Text(\"First field\") }\n TextButton({ }) { Text(\"Second field\") }\n }\n Column {\n TextButton({ }) { Text(\"Third field\") }\n TextButton({ }) { Text(\"Fourth field\") }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L101-L110\n```\n\n\u003cbr /\u003e\n\nThis layout traverses the items vertically, from top to bottom, from the start\nof the screen towards the end:\n**Figure 3**. List of buttons placed in two columns side by side in a bigger form factor\n\nThe previous two samples, while differing in one-directional navigation, provide\nthe same experience when it comes to two-dimensional navigation. This is usually\nbecause the items on the screen have the same geographic placement in both\nexamples. Navigating right from the first `Column` moves the focus to the\nsecond, and navigating down from the first `Row` moves the focus to the one\nbelow it.\n| **Note:** Focus properties are a special case, in which the parents always win in case of collisions or duplicates.This is something to keep in mind when working with focus.\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Change focus behavior](/develop/ui/compose/touch-input/focus/change-focus-behavior)\n- [ConstraintLayout in Compose](/develop/ui/compose/layouts/constraintlayout)\n- [Flow layouts in Compose](/develop/ui/compose/layouts/flow)"]]
