Android Jetpack Compose 能够在每个项目上创建带有交互式按钮和值的列表？

Question

我目前正在考虑为我的一个朋友创建一个主动跟踪器应用程序，因为我已经有一段时间不接触应用程序开发了，所以我正在尝试评估哪些工具最适合我的需求.

由于该应用程序是为 Android 开发的，我很确定我会使用 Kotlin，因此 Jetpack Compose 引起了我的注意。在进行了一些研究并浏览了文档之后，我不确定它是否能够实现我想要实现的目标：我希望能够创建一个动态的入口卡列表，该列表按分配给每张卡的特定值排序。（我相对确定 LazyColumns 能够处理）。问题是：这些卡片中的每一张都需要有按钮和几个可以用这些按钮操作的附加值。
我无法在文档或使用 Jetpack Compose LazyColumns 的任何示例中找到类似内容的描述。

我创建了一个（制作糟糕的）模型，希望能更好地描述我想做的事情：

任何人都可以分享关于 Jetpack Compose 是否具有这些功能的见解，或者如果不能，可以分享关于使用什么工具的建议吗？

非常感谢和亲切的问候。

Answer 1

是的，使用 Compose，您可以非常轻松地制作这样的应用程序。

这是一个基本的例子UI。

class MainActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                ItemsScreen()
            }
        }
    }
}

class Item(val title: String, value1: Int, value2: Int, value3: Int) {
    val value1 = mutableStateOf(value1)
    val value2 = mutableStateOf(value2)
    val value3 = mutableStateOf(value3)
    val valueToSortBy: Int
        get() = value1.value + value2.value + value3.value
}

class ScreenViewModel : ViewModel() {
    val items = List(3) {
        Item(
            "Item $it",
            Random.nextInt(10),
            Random.nextInt(10),
            Random.nextInt(10),
        )
    }.toMutableStateList()

    fun sortItems() {
        items.sortByDescending { it.valueToSortBy }
    }

    fun addNewItem() {
        items.add(
            Item(
                "Item ${items.count()}",
                Random.nextInt(10),
                Random.nextInt(10),
                Random.nextInt(10),
            )
        )
    }
}

@Composable
fun ItemsScreen() {
    val viewModel: ScreenViewModel = viewModel()
    LaunchedEffect(viewModel.items.map { it.valueToSortBy }) {
        viewModel.sortItems()
    }
    Box(
        Modifier
            .fillMaxSize()
            .padding(10.dp)
    ) {
        LazyColumn(
            contentPadding = PaddingValues(vertical = 10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items(viewModel.items) { item ->
                ItemView(item)
            }
        }
        FloatingActionButton(
            onClick = viewModel::addNewItem,
            modifier = Modifier.align(Alignment.BottomEnd)
        ) {
            Text("+")
        }
    }
}

@Composable
fun ItemView(item: Item) {
    Card(
        elevation = 5.dp,
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(
                    item.title,
                    style = MaterialTheme.typography.h5
                )
                Spacer(modifier = Modifier.weight(1f))
                Text(
                    "Value to sort by: ${item.valueToSortBy}",
                    style = MaterialTheme.typography.body1,
                    fontStyle = FontStyle.Italic,
                )
            }
            Spacer(modifier = Modifier.size(25.dp))
            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                CounterView(value = item.value1.value, setValue = { item.value1.value = it })
                CounterView(value = item.value2.value, setValue = { item.value2.value = it })
                CounterView(value = item.value3.value, setValue = { item.value3.value = it })
            }
        }
    }
}

@Composable
fun CounterView(value: Int, setValue: (Int) -> Unit) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        CounterButton("+") {
            setValue(value + 1)
        }
        Text(
            value.toString(),
            modifier = Modifier.padding(5.dp)
        )
        CounterButton("-") {
            setValue(value - 1)
        }
    }
}

@Composable
fun CounterButton(text: String, onClick: () -> Unit) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .size(45.dp)
            .background(Color.LightGray)
            .clickable(onClick = onClick)
    ) {
        Text(
            text,
            color = Color.White,
        )
    }
}

我在这里按 3 个值的总和排序。请注意，像这样对项目进行排序可能不会在生产应用程序中提高性能，您应该使用数据库来存储项目并从中请求排序的项目。

Android Jetpack Compose 能够在每个项目上创建带有交互式按钮和值的列表？

Android Jetpack Compose capable of creating List with interactive Buttons and Values on each item?

android

list

button

android-jetpack-compose

lazycolumn