เครื่องมือเลือก
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เครื่องมือเลือกช่วยให้ผู้ใช้เลือกและตั้งค่าข้อมูลที่ต้องการได้
เครื่องมือเลือก
ควรใช้เครื่องมือเลือกเพื่อให้ผู้ใช้เลือกจากรายการที่มีจำนวนจำกัด
โดยค่าเริ่มต้น ระบบจะวนรายการไปมาอย่างไม่มีที่สิ้นสุดในทั้ง 2 ทิศทาง ลองปิดใช้ลักษณะการทำงานนี้หากลําดับในรายการมีความสําคัญ หรือเพื่ออนุญาตให้ผู้ใช้ไปยังองค์ประกอบแรกและองค์ประกอบสุดท้ายด้วยการปัดอย่างรวดเร็ว
กายวิภาคศาสตร์
องค์ประกอบ
A. คอลัมน์ที่ไม่ได้ใช้งาน
ข. เครื่องหมายแบ่ง
ค. คอลัมน์เครื่องมือเลือก
ง. เนื้อหายอดนิยม
จ. เนื้อหากลาง
ฉ. เนื้อหาด้านล่าง
ความกว้างและความสูง
กลุ่มเครื่องมือเลือกจะเติมความสูงและความกว้างที่มีอยู่ ตัวเลือกเลย์เอาต์ของคอลัมน์เครื่องมือเลือกมี 4 ตัวเลือก เลย์เอาต์แต่ละรายการจะจัดกึ่งกลางและเติมความสูงที่มีอยู่ ความกว้างของคอลัมน์จะกำหนดตามความกว้างที่จำเป็นในการรองรับจำนวนตัวเลขที่ต้องการในแบบอักษร แต่จะมีข้อยกเว้นสำหรับเครื่องมือเลือกวันที่ ซึ่งจะแสดงเต็มหน้าจอในแนวนอนและตัดขอบ
เช่น ตัวเลขจะคํานวณความกว้างของ "00" แล้วตั้งค่าความกว้าง สำหรับช่องข้อความ เช่น ช่องเดือน ระบบจะคำนวณความกว้างเป็น "MMM" (ซึ่งเป็นตัวอักษรที่กว้างที่สุดในตัวอักษรละติน) ความกว้างและความสูง (ซึ่งเป็นความสูงบรรทัดของแบบอักษรที่ใช้) จึงจะได้รับผลกระทบจากแบบอักษรที่ใช้
รายการเครื่องมือเลือกมีขนาดแตกต่างกันไปตามจุดพัก
การใช้งาน
ดูตัวอย่างเครื่องมือเลือกวันที่และเวลาต่อไปนี้
หากต้องการใช้เครื่องมือเลือกวันที่และเวลาที่สร้างไว้ล่วงหน้า โปรดดูไลบรารี Horologist ใน GitHub
หากต้องการสร้างประสบการณ์ที่คล้ายกันซึ่งผู้ใช้เลือกค่าหลายส่วนในเครื่องมือเลือกหลายรายการ ให้ใช้คอมโพเนนต์ PickerGroup ในตัว ออบเจ็กต์นี้ใช้ออบเจ็กต์ผู้ประสานงานโฟกัสเพื่อกำหนดโฟกัสให้กับองค์ประกอบ Picker ที่ถูกต้อง
เลย์เอาต์ที่ปรับเปลี่ยนได้
TimePicker 24H
TimePicker 12H
เครื่องมือเลือกวันที่
ลักษณะการทํางานแบบตอบสนอง
เพิ่มขนาดข้อความ
เมื่อผ่านจุดหยุดที่ 225 ขึ้นไป ขนาดแบบอักษรขององค์ประกอบเครื่องมือเลือกจะเปลี่ยนไป ข้อความด้านบนและด้านล่างในคอลัมน์การเลื่อนแบบเลื่อนลงช้าจะปรับ (ก) เช่นเดียวกับข้อความกลาง ตัวอย่างบางส่วนมีดังนี้
เลย์เอาต์แบบ 2 คอลัมน์
ต่ำกว่าเบรกพอยต์ 225 dp
แบบอักษร: Display 2
เบรกพอยต์ที่ 225 dp ขึ้นไป
แบบอักษร: Display 1
เลย์เอาต์แบบ 3 คอลัมน์
ต่ำกว่าเบรกพอยต์ 225 dp
แบบอักษร: Display 3
สูงกว่าจุดพัก 225 dp
แบบอักษร: Display 2
เพิ่มขนาดการไล่ระดับสี
ความสูงของไล่ระดับสีในคอลัมน์เครื่องมือเลือกจะกำหนดตามพื้นที่ว่างที่มีอยู่ ทั้งไล่ระดับสีด้านบนและด้านล่างจะตั้งค่าไว้ที่ 1 ใน 3 (33%) ของความสูงที่ใช้ได้ ซึ่งหมายความว่าไล่ระดับสีจะปรับขนาดตามสัดส่วนสำหรับหน้าจอแต่ละขนาดที่มี อยู่นอกเหนือเลย์เอาต์คอลัมน์
ต่ำกว่าเบรกพอยต์ 225 dp
ขนาด: 33% ของความสูงของคอลัมน์
สูงกว่าจุดพัก 225 dp
ขนาด: 33% ของความสูงของคอลัมน์
เพิ่มระยะห่างของคอลัมน์
ระยะห่างระหว่างคอลัมน์จะปรับขนาดเกินเบรกพอยต์ 225+ โดยเริ่มจาก 2 dp หรือ 4 dp และเพิ่มขึ้นเป็น 6 dp การดำเนินการนี้ขึ้นอยู่กับเลย์เอาต์ที่คุณเลือก ซึ่งอาจเป็นเลย์เอาต์ 2 หรือ 3 คอลัมน์
เลย์เอาต์แบบ 2 คอลัมน์
ต่ำกว่าเบรกพอยต์ 225 dp
ระยะห่างของคอลัมน์ 4 dp
สูงกว่าจุดพัก 225 dp
ระยะห่างระหว่างคอลัมน์ 6 dp
เลย์เอาต์แบบ 3 คอลัมน์
ต่ำกว่าเบรกพอยต์ 225 dp
ระยะห่างระหว่างคอลัมน์ 2 dp
สูงกว่าจุดพัก 225 dp
ระยะห่างระหว่างคอลัมน์ 6 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,["# Pickers\n\nThe [Picker](/reference/kotlin/androidx/wear/compose/material/package-summary#Picker(androidx.wear.compose.material.PickerState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.material.ScalingParams,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Function2)) helps users select and set specific data. \n**Picker**\n\nPickers should be used to let users choose amongst a finite number of items. \n\nBy default items will be looped infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\n**Anatomy**\n\nA. Inactive Column \n\nB. Colon Breaker \n\nC. Picker Column \n\nD. Top Content \n\nE. Middle Content \n\nF. Bottom Content\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Widths and heights**\n\nThe Picker Group fills the available height and width. There are four layout options for the picker columns. Each layout is centred and fills the available height. Column widths are defined by the width needed to accommodate the number of digits needed in the font, Date-picker is the exception, horizontally it fills the screen and bleeds off the edge.\n\nFor example numbers will work out width of '00' is and then set the width. For text fields, for the month field for example, will be worked out as the width of 'MMM' (which is the widest letter in the latin alphabet). The width and height (which is the line height of that type style used) will therefore be affected by the font used.\n\nPicker items vary in size across the breakpoint.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nSee the following examples of Date and Time Pickers\n\nFor a prebuilt date and time picker implementation, check out the [Horologist Library](https://github.com/google/horologist#-composables) on GitHub. \n\n\nIf you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in [PickerGroup](/reference/kotlin/androidx/wear/compose/material/package-summary#PickerGroup(kotlin.Array,androidx.compose.ui.Modifier,androidx.wear.compose.material.PickerGroupState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.TouchExplorationStateProvider,kotlin.Function1)) component. This object uses a focus coordinator object to assign focus to the correct Picker element.\n\nAdaptive layouts\n----------------\n\n**TimePicker 24H**\n\n**TimePicker 12H**\n\n**Date Picker**\n\n**Responsive behavior**\n-----------------------\n\n### **Text size increase**\n\nPast the 225+ Breakpoint, the Picker element's font size changes. Top and Bottom copy within the lazy scrolling column adjusts (A), as does the Middle copy. Below are some examples of this:\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 2 \n**Above 225 dp breakpoint**\n\nFont: Display 1\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Three column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 3 \n**Above the 225 dp breakpoint**\n\nFont: Display 2\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Gradient size increase**\n--------------------------\n\nThe gradient on the Picker column is defined in height by the available space. Both Top and Bottom Gradients are set at a third (33%) of the available height. This means at each available screen size, the gradient scales proportionally. Sitting independent of the column layout. \n**Below the 225 dp breakpoint**\n\nSize: 33% of column height \n**Above the 225 dp breakpoint**\n\nSize: 33% of column height\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Column spacing increase**\n---------------------------\n\nColumn spacing scales past the 225+ Breakpoint, either starting at 2 dp or 4 dp and growing to 6 dp. This depends on which layout you've selected; either 2 or 3 column layouts\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\n4 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Three column layout**\n\n**Below the 225 dp breakpoint**\n\n2 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
