Android Jetpack Compose NumberPicker 小部件等效项

Question

在 Jetpack Compose 中创建 NumberPicker 小部件的推荐解决方案是什么？类似于下图。我能够在我的可组合中使用 AndroidView 创建一个 NumberPicker，但该视图似乎不允许翻转或对齐位置。顺便说一句，下面的 UI 显示了三个排成一行的 NumberPickers。它不应该代表 DatePicker

Answer 1

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

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" />

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

@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
        }
    )
}

3. 最后，在 ModalBottomSheetLayout 中使用它

Answer 2

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

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