切換方塊
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
ToggleChip 是特殊的方塊，可讓使用者選取各種選項。
切換方塊包含雙狀態切換控制項。雙狀態切換控制項的範例包括切換按鈕、圓形按鈕或核取方塊。如果需要快速輕鬆設定多個選項，請使用切換方塊，例如「設定」。
圖解
切換方塊有四個版位，包括兩個文字標籤、一個選取控制項和一個應用程式圖示。圖示和次要標籤為選用項目。
A. 標籤
B. 次要標籤
C. 圖示
D. 選取控制項
E. 容器
切換方塊漸層
上方/左側 = 0% 途徑
底部/右側 = 50% 主要
(表面顏色背景上的漸層疊加層)
選取控制項
圓形按鈕
在使用者只能選取一個選項清單中，使用圓形按鈕。
Checkbox
在使用者可選取多個選項的清單中，使用核取方塊。
分割切換方塊
如要有兩個可輕觸的區域，請使用分割切換方塊。
分割切換方塊
SplitToggleChip 與 ToggleChip 不同，包含兩個可輕觸的區域、一個可點選的區域，另一個有切換按鈕。
在分割切換方塊中，為各個區塊設定不同顏色，以便區分可輕觸的背景區域和切換鈕控制項。
使用方式
請使用 ToggleChips，如以下範例所示。
自動調整式版面配置
回應式行為
ToggleChips 會在較大的螢幕上延展可用寬度。
圖示 (24 x 24 dp)
容器 (52 x XX dp)
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[[["容易理解","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-07-27 (世界標準時間)。"],[],[],null,["# Toggle chips\n\nA [ToggleChip](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleChip(kotlin.Boolean,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.wear.compose.material.ToggleChipColors,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,kotlin.Function0)) is a specialized chip that allows users to select various options. \nToggle chips include a bi-state toggle control. Some examples of a bi-state toggle control include a switch, radio button, or checkbox. Use toggle chips for situations in which many options may need to be quickly and easily set, such as in Settings.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nToggle chips have four slots that accommodate two text labels, one selection control and one application icon. The icon and secondary label are optional.\n\n**A. Label\nB. Secondary label\nC. Icon\nD. Selection control\nE. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nToggle Chips Gradient\n---------------------\n\nTop/Left = 0% Surface \n\nBottom/Right = 50% Primary \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSelection control\n-----------------\n\n**Switch**\n\nUse a switch to turn a selection on or off.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Radio button**\n\nUse radio buttons in lists where the user can select only one option.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Checkbox**\n\nUse checkboxes in lists where the user can select multiple options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Split toggle chips**\n\nUse split toggle chips when you want two tappable areas.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Split ToggleChips**\n\nThe SplitToggleChip differs from the ToggleChip by having two tappable areas, one clickable and one with the toggle. \n\n\nOn split toggle chips, differentiate between the tappable background area and the toggle control by making each section a different color.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse ToggleChips as shown in the following examples.\n\nAdaptive layouts\n----------------\n\n**Responsive behavior**\n\nToggleChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
