Bộ chọn
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.
Bộ chọn giúp người dùng chọn và đặt dữ liệu cụ thể.
Bộ chọn
Bạn nên dùng bộ chọn để cho phép người dùng có thể chọn trong số các mục hữu hạn.
Theo mặc định, các mục sẽ lặp lại vô hạn ở cả hai hướng. Hãy cân nhắc tắt hành vi này nếu thứ tự trong danh sách là quan trọng, hoặc cho phép người dùng truy cập vào phần tử đầu tiên và cuối cùng bằng cách vuốt nhanh.
Phân tích
Cấu trúc
A. Cột không hoạt động
B. Dấu ngắt dòng bằng dấu hai chấm
C. Cột bộ chọn
D. Nội dung hàng đầu
E. Nội dung giữa
F. Nội dung dưới cùng
Chiều rộng và chiều cao
Nhóm bộ chọn sẽ lấp đầy chiều cao và chiều rộng có sẵn. Có 4 lựa chọn bố cục cho các cột bộ chọn. Mỗi bố cục được căn giữa và lấp đầy chiều cao có sẵn. Chiều rộng cột được xác định theo chiều rộng cần thiết để chứa số chữ số cần thiết trong phông chữ, Bộ chọn ngày là trường hợp ngoại lệ, theo chiều ngang, nó lấp đầy màn hình và tràn ra ngoài cạnh.
Ví dụ: các số sẽ tính chiều rộng của "00" rồi đặt chiều rộng. Đối với các trường văn bản, chẳng hạn như trường tháng, sẽ được tính là chiều rộng của "MMM" (chữ cái rộng nhất trong bảng chữ cái Latinh). Do đó, chiều rộng và chiều cao (là chiều cao dòng của kiểu chữ được sử dụng) sẽ chịu ảnh hưởng của phông chữ được sử dụng.
Các mục bộ chọn có kích thước khác nhau trên điểm ngắt.
Cách sử dụng
Xem các ví dụ sau về Bộ chọn ngày và giờ
Để triển khai bộ chọn ngày và giờ được tạo sẵn, hãy xem Thư viện Horologist trên GitHub.
Nếu bạn muốn tạo một trải nghiệm tương tự, trong đó người dùng chọn một giá trị gồm nhiều phần trên nhiều bộ chọn, hãy sử dụng thành phần PickerGroup tích hợp sẵn. Đối tượng này sử dụng đối tượng điều phối tiêu điểm để gán tiêu điểm cho đúng phần tử Bộ chọn.
Bố cục thích ứng (Adaptive Layouts)
TimePicker 24H
TimePicker 12H
Bộ chọn ngày
Hành vi thích ứng
Tăng cỡ chữ
Sau Điểm ngắt 225+, cỡ chữ của phần tử Bộ chọn sẽ thay đổi. Bản sao trên cùng và dưới cùng trong cột cuộn từng phần sẽ điều chỉnh (A), cũng như bản sao giữa. Dưới đây là một số ví dụ về điều này:
Bố cục hai cột
Dưới điểm ngắt 225 dp
Phông chữ: Hiển thị 2
Điểm ngắt trên 225 dp
Phông chữ: Hiển thị 1
Bố cục ba cột
Dưới điểm ngắt 225 dp
Phông chữ: Hiển thị 3
Trên điểm ngắt 225 dp
Phông chữ: Hiển thị 2
Tăng kích thước chuyển màu
Độ dốc trên cột Bộ chọn được xác định theo chiều cao theo không gian có sẵn. Cả hiệu ứng chuyển màu trên cùng và dưới cùng đều được đặt ở một phần ba (33%) chiều cao có sẵn. Điều này có nghĩa là ở mỗi kích thước màn hình có sẵn, độ dốc sẽ điều chỉnh theo tỷ lệ. Nằm độc lập với bố cục cột.
Dưới điểm ngắt 225 dp
Kích thước: 33% chiều cao cột
Trên điểm ngắt 225 dp
Kích thước: 33% chiều cao cột
Tăng khoảng cách cột
Khoảng cách cột sẽ tăng theo tỷ lệ sau Điểm ngắt 225 trở lên, bắt đầu từ 2 dp hoặc 4 dp và tăng lên 6 dp. Điều này tuỳ thuộc vào bố cục bạn đã chọn; bố cục 2 hoặc 3 cột
Bố cục hai cột
Dưới điểm ngắt 225 dp
Khoảng cách cột 4 dp
Trên điểm ngắt 225 dp
Khoảng cách cột 6 dp
Bố cục ba cột
Dưới điểm ngắt 225 dp
Khoảng cách cột 2 dp
Trên điểm ngắt 225 dp
Khoảng cách cột 6 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,["# 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"]]
