kotlin - Android Jetpack Compose NumberPicker 小部件等效

Question

在 Jetpack Compose 中创建 NumberPicker 小部件的推荐解决方案是什么？类似于下图。我可以在我的可组合物中使用 AndroidView 创建一个 NumberPicker，但该视图似乎不允许甩动或对齐定位。顺便说一句，下面的 UI 显示了三个排成一行的 NumberPicker。它不应该代表 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

编辑我的答案......也使用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

我们在 compose 项目中将这个库用于数字选择器小部件。 https://github.com/ChargeMap/Compose-NumberPicker