การ์ด
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
คอมโพเนนต์การ์ดมีเนื้อหาและการดําเนินการเกี่ยวกับเรื่องเดียว
กายวิภาคศาสตร์
คอมโพเนนต์การ์ดมีช่องเดียวเท่านั้น การ์ดอาจมีไอคอน รูปภาพ หรือป้ายกำกับ และปรับแต่งได้
โดยค่าเริ่มต้น การ์ดจะเป็นสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมนและพื้นหลังไล่ระดับสี ตั้งค่าความสูงสูงสุดของการ์ดเป็น 60% เพื่อให้การ์ดแสดงบนหน้าจอได้เต็มพื้นที่ เนื่องจากจอแสดงผลแบบวงกลมจะตัดด้านบนและด้านล่างของหน้าจอได้สูงสุด 20%
การ์ดไตเติ้ล
ใช้การ์ดชื่อเพื่อแสดงข้อมูลภายในแอปพลิเคชัน เช่น ข้อความ การ์ดชื่อมีเลย์เอาต์ 3 ช่อง ซึ่งประกอบด้วยชื่อ ฟิลด์เวลา (ไม่บังคับ) และเนื้อหาที่เกี่ยวข้อง ซึ่งอาจเป็นรูปภาพหรือข้อความ
การ์ดแอป
ใช้การ์ดแอปเพื่อแสดงองค์ประกอบแบบอินเทอร์แอกทีฟจากแอปพลิเคชันหลายรายการ การ์ดแอปมีเลย์เอาต์ 5 ช่อง ซึ่งประกอบด้วยไอคอนแอปพลิเคชัน ชื่อแอปพลิเคชัน เวลาที่เกิดกิจกรรม ชื่อของกิจกรรม และเนื้อหาที่เกี่ยวข้อง ซึ่งอาจเป็นรูปภาพหรือข้อความ
การไล่ระดับสีของการ์ด
การไล่ระดับสีของการ์ด
ด้านบน/ซ้าย + ระยะห่างจากขอบซ้าย 68dp = พื้นผิว 100%
ด้านล่าง/ขวา = พื้นผิว 0%
การวางซ้อนการ์ดรูปภาพ
ด้านบน/ซ้าย + ระยะห่างจากขอบ 56 dp จากด้านบน/ซ้าย = พื้นผิว 100%
ด้านล่าง/ขวา + ระยะห่างจากขอบ 24 dp จากด้านล่าง/ขวา = พื้นผิว 0%
(การวางซ้อนไล่ระดับสีบนพื้นหลังรูปภาพ)
ขนาด
ความกว้างของการ์ด
การ์ดจะมีขนาดความกว้างสูงสุดของคอนเทนเนอร์โดยค่าเริ่มต้น
ความสูงของการ์ด
ความสูงของการ์ดมีความยืดหยุ่น ซึ่งจะขึ้นอยู่กับเนื้อหาของคอมโพเนนต์
ในหน้าปัดทรงกลม การ์ดที่สูงเกิน 60% ของความสูงของหน้าจอจะถูกตัดออก
การใช้งาน
เลย์เอาต์ที่ปรับเปลี่ยนได้
TitleCard
ในหน้าจอขนาดใหญ่ เราอนุญาตให้เพิ่มข้อความอีก 1 บรรทัดสำหรับข้อความหลัก และหากต้องการแสดงรูปภาพให้มากขึ้น ให้เพิ่มระยะห่างจากขอบล่าง 24 dp ที่ด้านล่าง
TitleCard ที่มีรูปภาพในบรรทัด (แทนที่ช่องข้อความเนื้อหา)
ในหน้าจอขนาดใหญ่ รูปภาพจะไม่เปลี่ยนสัดส่วนภาพและมีการเว้นวรรคด้านขวาเพื่อไม่ให้ความสูงของการ์ดใหญ่เกินไป
การ์ดที่มีการปรับแต่งเพิ่มเติม
การ์ดที่มีพื้นหลังเป็นรูปภาพ
คุณจะต้องปรับแต่งเพื่อให้ได้เลย์เอาต์นี้
การ์ดรูปภาพแสดงเนื้อหาที่เกี่ยวข้องกับหัวข้อเดียวพร้อมรูปภาพพื้นหลัง การ์ดรูปภาพยังแสดงรูปภาพเดี่ยวๆ ได้ด้วย
เราขอแนะนำให้เพิ่มระยะห่างจากขอบล่างเป็น 24 dp เพื่อแสดงรูปภาพพื้นหลังมากขึ้นโดยไม่มีข้อความวางซ้อนอยู่
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","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 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"]]
