安卓JetpackCompose能夠創建帶有互動式按鈕和每個專案的價值的串列嗎？

我目前正在考慮為我的一個朋友創建一個倡議跟蹤器應用程式，由于我已經很久沒有接觸過應用程式的開發了，所以我正試圖評估哪些工具最適合我的需求。

由于該應用程式將在 Android 上開發，我非常確定我將使用 Kotlin，因此 Jetpack Compose 吸引了我的注意。 在進行了一些研究并瀏覽了檔案之后，我不確定它是否能夠滿足我想要實作的目標。 我希望能夠創建一個動態的條目卡串列，并按照分配給每個卡的特定值進行排序。(我比較確定LazyColumns能夠處理這個問題）。) 問題是這樣的。每張卡片都需要有按鈕和幾個可以用這些按鈕操作的額外值。 我在檔案中沒有找到這樣的描述，也沒有找到任何使用Jetpack Compose LazyColumns的例子。

是否有人能夠分享關于Jetpack Compose是否能夠實作這些功能的見解，或者如果不能，可以分享關于使用何種工具的建議？

非常感謝，并致以親切的問候。

uj5u.com熱心網友回復：

是的，使用 Compose，你可以很容易地制作這樣一個應用程式。

下面是這樣一個用戶界面的基本例子。

class MainActivity : FragmentActivity() {

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

class Item(val title。字串, 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 $it"/span>。
            Random.nextInt(10)。
            Random.nextInt(10)。
            Random.nextInt(10)。
        )
    }.toMutableStateList()

    fun sortItems（） {
        items.sortByDescending { it.valueToSortBy }
    }

    fun addNewItem（） {
        items.add(
            專案(
                "Item ${items.count()}" 。
                Random.nextInt(10)。
                Random.nextInt(10)。
                Random.nextInt(10)。
            )
        )
    }
}

@Composable[/span
fun ItemsScreen（） {
    val viewModel: ScreenViewModel = viewModel()
    LaunchedEffect(viewModel.items.map { it.valueToSortBy }) {
        viewModel.sortItems()
    }
    盒子()
        修改器
            .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)>{
    卡片(
        elevation = 5.dp,
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            行(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                文本(
                    item.title,
                    style = MaterialTheme.typography.h5
                )
                Spacer(modifier = Modifier.weight(1f)
                文本(
                    "值的排序。${item.valueToSortBy}"。
                    style = MaterialTheme.typography.body1,
                    fontStyle = FontStyle.Italic,
                )
            }
            Spacer(modifier = Modifier.size(25.dp))
            行(
                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)
        }
        文本(
            value.toString(),
            modifier = Modifier.padding(5.dp)
        )
        CounterButton("-") {
            setValue(value - 1)
        }
    }
}

@Composable。
fun CounterButton（text。String, onClick: () -> Unit) {
    盒子(
        contentAlignment = Alignment.Center,
        修改器 = 修改器
            .size(45.dp)
            .背景(Color.LightGray)
            .clickable(onClick = onClick)
    ) {
        文本(
            文本。
            color = Color.White,
        )
    }
}

我在這里按照3個值的總和進行排序。請注意，這樣的排序在生產應用中可能不會有太大的表現，你應該使用資料庫來存盤專案，并從資料庫中請求排序的專案。

標籤：

上一篇：按鈕/元素不可互動

下一篇：我想讓我的電子郵件文本欄位像圖片中的那樣