Android Jetpack Compose NumberPicker 小部件等效项

Question

在 Jetpack Compose 中创建 NumberPicker Widget 的推荐解决方案是什么？类似于下图。我可以在我的可组合项中使用 AndroidView 创建一个 NumberPicker，但该视图似乎不允许快速移动或对齐定位。顺便说一下，下面的 UI 显示了三个 NumberPickers 排成一行。它不应该代表 DatePicker

Answer 1

巧合的是，我上周实现了一个类似的屏幕。我不能在这里分享整个代码，但基本上我所做的是：

创建具有 DatePicker (res/layout/date_picker.xml) 的布局。

<DatePicker xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/datePicker"
    android:theme="@style/DatePickerStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:calendarViewShown="false"
    android:datePickerMode="spinner" />

然后，在您的可组合函数中使用它。

@Composable
fun DatePicker(
    onDateSelected: (Date) -> Unit
) {
    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            val view = LayoutInflater.from(context).inflate(R.layout.date_picker, null)
            val datePicker = view.findViewById<DatePicker>(R.id.datePicker)
            val calendar = Calendar.getInstance() // show today by default
            datePicker.init(
                calendar.get(Calendar.YEAR),
                calendar.get(Calendar.MONTH),
                calendar.get(Calendar.DAY_OF_MONTH)
            ) { _, year, monthOfYear, dayOfMonth ->
                val date = Calendar.getInstance().apply {
                    set(year, monthOfYear, dayOfMonth)
                }.time
                onSelectedDateUpdate(date)
            }
            datePicker
        }
    )
}

最后，用在ModalBottomSheetLayout

正在编辑我的答案...使用 NumberPicker 也能正常工作...

AndroidView(
    modifier = Modifier.fillMaxWidth(),
    factory = { context ->
        NumberPicker(context).apply {
            setOnValueChangedListener { numberPicker, i, i2 ->  }
            minValue = 0
            maxValue = 50
        }
    }
)

这是结果。

Answer 2

我知道你可能不是在找这样的东西。但是由于在 compose 中还没有这样的小部件，而 compose 就是为了让您更轻松地构建自己的组件。所以除了 android.widget NumberPicker，你还可以制作类似这样的东西。您可以将可视化更改得更像 NumberPicker 小部件，并添加您的回调和内容。

你在 github 上检查过这个吗？ ComposeNumberPicker.Kt

Answer 3

我们在数字选择器小部件的撰写项目中使用此库。 https://github.com/ChargeMap/Compose-NumberPicker

Android Jetpack Compose NumberPicker 小部件等效项

Android Jetpack Compose NumberPicker Widget Equivalent

kotlin

numberpicker

android-number-picker

android-jetpack

android-jetpack-compose