Android Jetpack Compose NumberPicker 小部件等效答案

【问题标题】：Android Jetpack Compose NumberPicker Widget EquivalentAndroid Jetpack Compose NumberPicker 小部件等效
【发布时间】：2021-09-12 04:55:35
【问题描述】：

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

【问题讨论】：

标签： kotlin android-jetpack android-jetpack-compose numberpicker android-number-picker

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

使用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
        }
    }
)

这是结果。

【讨论】：

感谢您的回答，但这个问题是针对 android.widget 包中的 NumberPicker 小部件的。不是日期选择器。 UI 显示三个 NumberPicker 并排放置。