Thiệp
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.
Thành phần Card (Thẻ) chứa nội dung và các thao tác về một chủ đề.
Phân tích
Mỗi thành phần thẻ chỉ chiếm một ô. Thẻ có thể chứa biểu tượng, hình ảnh hoặc nhãn có thể tuỳ chỉnh.
Theo mặc định, thẻ có hình chữ nhật với góc bo tròn và nền chuyển màu. Đặt chiều cao tối đa của thẻ là 60% để đảm bảo thẻ hiển thị đầy đủ trên màn hình vì màn hình tròn có thể cắt tới 20% phần trên cùng và dưới cùng của màn hình.
Thẻ tiêu đề
Sử dụng Thẻ tiêu đề để hiển thị thông tin trong ứng dụng, chẳng hạn như một thông báo. Thẻ tiêu đề có bố cục 3 ô bao gồm tiêu đề, trường thời gian (không bắt buộc) và nội dung liên quan (có thể là hình ảnh hoặc văn bản).
Thẻ ứng dụng
Sử dụng Thẻ ứng dụng để hiển thị các thành phần tương tác từ nhiều ứng dụng. Thẻ ứng dụng có bố cục 5 ô bao gồm biểu tượng ứng dụng, tên ứng dụng, thời gian diễn ra hoạt động, tiêu đề của một số loại và nội dung có liên quan (ví dụ: hình ảnh hoặc văn bản).
Chuyển màu thẻ
Độ dốc của thẻ
Khoảng đệm trên cùng/Trái + 68 dp từ bên trái = 100% bề mặt
Dưới cùng/Phải = 0% bề mặt
Lớp phủ thẻ hình ảnh
Khoảng đệm Trên cùng/Trái + 56 dp từ T/L = 100% Vùng đệm
Khoảng đệm Dưới cùng/Phải + 24 dp từ B/R = 0% Vùng hiển thị
(Lớp phủ chuyển màu trên nền hình ảnh)
Kích thước
Chiều rộng thẻ
Theo mặc định, các thẻ có chiều rộng tối đa của vùng chứa.
Chiều cao thẻ
Chiều cao thẻ có kích thước linh hoạt. Yếu tố này là do nội dung của các thành phần quyết định.
Trên mặt đồng hồ hình tròn, các thẻ cao hơn 60% chiều cao màn hình sẽ bị cắt bớt.
Cách sử dụng
Bố cục thích ứng (Adaptive Layouts)
Thẻ tiêu đề
Trên màn hình lớn hơn, chúng tôi cho phép thêm một dòng văn bản cho nội dung. Và để hiển thị thêm hình ảnh, hãy thêm khoảng đệm 24 dp ở dưới cùng.
Thẻ tiêu đề có hình ảnh cùng dòng (thay thế vị trí cho nội dung)
Trên màn hình lớn, hình ảnh không thay đổi tỷ lệ khung hình và có khoảng đệm ở bên phải để chiều cao của thẻ không quá lớn.
Thẻ có khả năng tuỳ chỉnh bổ sung
Thẻ có nền hình ảnh
Để làm được bố cục này, bạn cần tuỳ chỉnh.
Thẻ hình ảnh hiển thị nội dung liên quan đến một chủ đề kèm theo hình nền. Thẻ hình ảnh cũng có thể hiển thị hình ảnh một cách độc lập.
Bạn nên tăng khoảng đệm dưới cùng lên 24 dp để có thể hiển thị nhiều hình nền hơn mà không cần có văn 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.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],null,["# Cards\n\nThe [Card](/reference/kotlin/androidx/wear/compose/material/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component contains content and actions about a single subject.\n\nAnatomy\n-------\n\nA card component only has a single slot. Cards can contain icons, images or labels, are customizable.\n\nBy default, cards are rectangular with rounded corners and a gradient background. Set the maximum height of your card to 60% to ensure that it's fully displayed on the screen because circular displays can clip up to 20% of the top and bottom of the screen.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Title Card**\n\nUse [Title cards](/reference/kotlin/androidx/wear/compose/material/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show information within an application, such as a message. Title cards have a three-slot layout which includes a title, an optional time field, and the relevant content, which is either an image or text. \n**App Card**\n\nUse [App cards](/reference/kotlin/androidx/wear/compose/material/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show interactive elements from multiple applications. App cards have a five-slot layout that includes an application icon, the application name, the time that the activity occurred, a title of some sort and the relevant content, which is either an image or text.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCards gradient\n--------------\n\n**Card Gradient**\n\nTop/Left + 68dp padding from Left = 100% Surface \n\nBottom/Right = 0% Surface\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Card Overlay**\n\nTop/Left + 56 dp padding from T/L = 100% Surface \n\nBottom/Right + 24 dp padding from B/R = 0% Surface \n\n(Gradient overlays on a image background)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\n**Card width**\n\nCards default to the maximum width of the container.\n\n\u003cbr /\u003e\n\n**Card height**\n\n\u003cbr /\u003e\n\nCard height is flexible. It is determined by the components' content.\n\nOn round watch faces, cards that are taller than 60% of the height of the screens are clipped.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\n**TitleCard**\n\nOn larger screens we allow an extra line of text for body copy. And in order to display more of the image, add an enlarged 24 dp padding at the bottom.\n\n**TitleCard with in-line image (replacing the body copy slot)**\n\nOn larger screens, the image doesn't change its aspect ratio and has the padding on the right in order to not make the height of the card too big.\n\n### Cards with additional customization\n\n**Card with an image background** \nIn order to achieve this layout you will need customization. \n\n\nImage cards display content relating to a single topic with a background image. Image cards can also display standalone images. \n\n\nIt is recommended that the bottom padding is increased to 24 dp in order to display more of the background image without text over it.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
