Khối bật/tắt
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
ToggleChip là một khối chuyên dụng cho phép người dùng chọn nhiều tùy chọn.
Khối bật/tắt bao gồm một nút điều khiển bật/tắt hai trạng thái. Một số ví dụ về nút điều khiển bật/tắt hai trạng thái bao gồm nút chuyển, nút chọn hoặc hộp đánh dấu. Sử dụng khối bật/tắt trong các trường hợp có thể cần thiết lập nhiều tuỳ chọn một cách nhanh chóng và dễ dàng, chẳng hạn như trong phần Cài đặt.
Phân tích
Khối bật/tắt có 4 khe chứa 2 nhãn văn bản, một thành phần điều khiển lựa chọn và một biểu tượng ứng dụng. Biểu tượng và nhãn phụ là không bắt buộc.
A. Nhãn
B. Nhãn phụ
C. Biểu tượng
D. Chế độ điều khiển lựa chọn
E. Vùng chứa
Chuyển đổi độ dốc của khối
Trên cùng/Trái = 0% Vùng hiển thị
Dưới cùng/Phải = 50% chính
(Lớp phủ chuyển màu trên nền có màu của vùng hiển thị)
Thành phần điều khiển lựa chọn
Switch
Sử dụng nút chuyển để bật hoặc tắt lựa chọn.
Nút chọn
Sử dụng nút chọn trong các danh sách mà người dùng chỉ có thể chọn một tuỳ chọn.
Checkbox
Sử dụng hộp đánh dấu trong các danh sách nơi người dùng có thể chọn nhiều tuỳ chọn.
Phân tách khối bật/tắt
Sử dụng khối bật/tắt chia tách khi bạn muốn hai vùng có thể nhấn vào.
Split ToggleChips
SplitSwitchChip khác với ToggleChip ở chỗ có hai khu vực có thể nhấn vào, một khu vực có thể nhấp vào và một khu vực có nút bật/tắt.
Trên khối bật/tắt chế độ phân tách, hãy phân biệt giữa khu vực nền có thể nhấn vào và chế độ điều khiển bật/tắt bằng cách đặt một màu riêng cho mỗi phần.
Cách sử dụng
Sử dụng ToggleChips như minh hoạ trong các ví dụ sau.
Bố cục thích ứng (Adaptive Layouts)
Hành vi thích ứng
ConversionChips kéo giãn để lấp đầy chiều rộng có sẵn trên màn hình lớn hơn.
Biểu tượng (24 x 24 dp)
Vùng chứa (52 x XX dp)
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],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"]]
