Alat Pilih
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Picker membantu pengguna memilih dan menetapkan data tertentu.
Alat pilih
Alat pilih harus digunakan untuk memungkinkan pengguna memilih di antara sejumlah item yang terbatas.
Secara default, item akan diulang tanpa batas di kedua arah. Pertimbangkan untuk menonaktifkan perilaku ini jika urutan dalam daftar penting, atau untuk memungkinkan pengguna mencapai elemen pertama dan terakhir dengan geser cepat.
Anatomi
Anatomi
A. Kolom Tidak Aktif
B. Pemisah Titik Dua
C. Kolom Pemilih
D. Konten Populer
E. Konten Tengah
F. Konten Bawah
Lebar dan tinggi
Grup Pemilih mengisi tinggi dan lebar yang tersedia. Ada empat opsi tata letak untuk kolom pemilih. Setiap tata letak dipusatkan dan mengisi tinggi yang tersedia. Lebar kolom ditentukan oleh lebar yang diperlukan untuk mengakomodasi jumlah digit yang diperlukan dalam font. Pemilih tanggal adalah pengecualian, secara horizontal mengisi layar dan melampaui tepi.
Misalnya, angka akan menghitung lebar '00', lalu menetapkan lebar. Untuk kolom teks, misalnya kolom bulan, akan dihitung sebagai lebar 'MMM' (yang merupakan huruf terluas dalam alfabet latin). Oleh karena itu, lebar dan tinggi (yaitu tinggi baris gaya huruf yang digunakan) akan terpengaruh oleh font yang digunakan.
Ukuran item pemilih bervariasi di seluruh titik henti sementara.
Penggunaan
Lihat contoh Pemilih Tanggal dan Waktu berikut
Untuk implementasi alat pilih tanggal dan waktu bawaan, lihat Library Horologis di GitHub.
Jika Anda ingin membuat pengalaman serupa, dengan pengguna memilih nilai multi-bagian di beberapa pemilih, gunakan komponen PickerGroup bawaan. Objek ini menggunakan objek koordinator fokus untuk menetapkan fokus ke elemen Pemilih yang benar.
Tata letak adaptif
TimePicker 24H
TimePicker 12H
Date Picker
Perilaku responsif
Peningkatan ukuran teks
Setelah Titik Pembatas 225+, ukuran font elemen Pemilih akan berubah. Salinan Atas dan Bawah dalam kolom scroll lambat disesuaikan (A), begitu juga dengan Salinan Tengah. Berikut beberapa contohnya:
Tata letak dua kolom
Di bawah titik henti sementara 225 dp
Font: Display 2
Titik henti sementara di atas 225 dp
Font: Display 1
Tata letak tiga kolom
Di bawah titik henti sementara 225 dp
Font: Tampilan 3
Di atas titik henti sementara 225 dp
Font: Display 2
Peningkatan ukuran gradien
Gradien pada kolom Pemilih ditentukan tingginya berdasarkan ruang yang tersedia. Gradien Atas dan Bawah ditetapkan pada sepertiga (33%) dari tinggi yang tersedia. Artinya, pada setiap ukuran layar yang tersedia, gradien akan diskalakan secara proporsional. Berada di luar tata letak kolom.
Di bawah titik henti sementara 225 dp
Ukuran: 33% dari tinggi kolom
Di atas titik henti sementara 225 dp
Ukuran: 33% dari tinggi kolom
Penambahan jarak kolom
Spasi kolom diskalakan setelah 225+ Titik Henti Sementara, baik dimulai dari 2 dp atau 4 dp dan bertambah menjadi 6 dp. Hal ini bergantung pada tata letak yang Anda pilih; tata letak 2 atau 3 kolom
Tata letak dua kolom
Di bawah titik henti sementara 225 dp
Jarak kolom 4 dp
Di atas titik henti sementara 225 dp
Jarak kolom 6 dp
Tata letak tiga kolom
Di bawah titik henti sementara 225 dp
Jarak kolom 2 dp
Di atas titik henti sementara 225 dp
Jarak kolom 6 dp
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[null,null,["Terakhir diperbarui pada 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"]]
