Nú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.
Sử dụng thành phần Button (Nút) cho các thao tác mà người dùng hiểu rõ và không cần có nhãn văn bản. Các nút được phân biệt với khối theo hình tròn.
Phân tích
A. Nội dung
Các nút có một khe duy nhất dành riêng cho biểu tượng hoặc văn bản. Chọn một biểu tượng liên quan đến hành động mà nút thực hiện. Bạn có thể sử dụng tối đa 3 ký tự cho văn bản nếu một biểu tượng không thể mô tả hành động liên quan. Hãy cân nhắc việc sử dụng thành phần Khối nếu một biểu tượng không thể mô tả rõ ràng thao tác
B. Vùng chứa
Các vùng chứa của nút bị giới hạn ở một màu đồng nhất.
Nút bật tắt
Nút bật/tắt cho phép người dùng chuyển đổi giữa hai trạng thái.
Các nút thu gọn
Các nút thu gọn hiển thị nhỏ hơn nhưng có vùng nhấn lớn hơn. Vùng nhấn mặc định là 48x48 dp.
Hệ phân cấp
Dùng màu tô khác nhau để biểu thị hệ phân cấp nút.
Nhấn mạnh
Các nút nhấn mạnh chứa những thao tác chính dành cho ứng dụng. Đối với các nút nhấn mạnh, hãy sử dụng màu Primary (màu chính) hoặc Secondary (màu phụ) cho vùng chứa, đồng thời sử dụng màu On Primary (màu cơ bản) và màu On Secondary (màu thứ cấp) cho nội dung. Để biết thêm thông tin, hãy xem bài viết Sắp xếp theo chủ đề Material cho Wear.
Nhấn trung bình
Các nút nhấn trung bình được phân biệt bằng màu tô ít tương phản hơn. Các khối này chứa các thao tác ít quan trọng hơn các thao tác chính. Hãy sử dụng màu Surface cho vùng chứa và màu On Surface cho nội dung.
Ngoài ra, hãy sử dụng thành phần OutlinedButton tuỳ chỉnh cho nút nhấn trung bình. Thành phần này có nền trong suốt, nét vẽ màu biến thể chính có độ mờ 60% và nội dung được tô màu chính.
Nhấn thấp (chỉ dùng cho biểu tượng)
Các nút nhấn thấp được phân biệt bằng cách không tô màu. Các nút này phù hợp nhất với những khu vực nhỏ trên mặt đồng hồ, nơi cần được sắp xếp gọn gàng. Sử dụng màu On Surface cho nội dung.
Kích thước
Hãy sử dụng các nút có kích thước khác nhau để nhấn mạnh hoặc giảm nhẹ các hành động.
Lớn
Biểu tượng (30 x 30 dp)
Vùng chứa (60 x 60 dp)
Mặc định
Biểu tượng (26 x 26 dp)
Vùng chứa (52 x 52 dp)
Nhỏ
Biểu tượng (24 x 24 dp)
Vùng chứa (48 x 48 dp)
Rất nhỏ
Biểu tượng (24 x 24 dp)
Vùng chứa (32 x 32 dp)
Bạn nên thêm khoảng đệm xung quanh nút này để tạo mục tiêu nhấn có kích thước tối thiểu là 48 dp. Đây là kích thước mục tiêu nhấn tối thiểu của chúng tôi để hỗ trợ tiếp cận.
Cách sử dụng
Sử dụng các nút tiêu chuẩn để cho phép người dùng thực hiện một thao tác đơn lẻ như chấp nhận hoặc từ chối một cuộc gọi, hoặc bắt đầu hẹn giờ.
Sử dụng các nút bật/tắt để cho phép người dùng bật hoặc tắt một lựa chọn, chẳng hạn như chọn và bỏ chọn các ngày trong tuần, hoặc tạm dừng và khởi động lại bộ hẹn giờ.
Bố cục thích ứng (Adaptive Layouts)
Hành vi thích ứng
1 nút
Khoảng đệm nội bộ sẽ giữ nguyên và lề phải là tỷ lệ phần trăm để ngăn các nút bị kéo giãn quá xa và giữ kích thước tương đối.
2 nút
Khi có 2 nút, hệ thống sẽ thêm tỷ lệ phần trăm lề nội bộ để ngăn các nút bị kéo giãn quá xa và giữ kích thước tương đối.
IME
1 hoặc 2 nút
IME có 2 hoặc 1 nút khoá luôn kéo giãn đến lề bên bất kể kích thước màn hình.
3 nút
Trên màn hình nhỏ hơn 225 dp, các nút vẫn giữ nguyên hình tròn và không bị kéo giãn. Trên màn hình lớn hơn, từ 225 dp trở lên, các nút sẽ kéo giãn đến tận lề bên.
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,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
