有誰知道如何創建一個按字母順序排列的快速滾動條，在 Jetpack Compose 中顯示所有字母？
類似于這個： Recyclerview Alphabetical Scrollbar
我制作了一個可滾動的串列，但我不知道如何在側面制作字母并使其“跳轉”到正確的字母。
到目前為止，這是我的編碼：
package com.example.ValpeHagen.ui.theme
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.ValpeHagen.model.DataProvider
import com.example.ValpeHagen.model.DataProvider2
import com.example.androiddevchallenge.data.model.Rase
class Valpen {
val rase = DataProvider2.rase
@Composable
fun VerticalHorizontalScroll(rase: Rase) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.background(Grass),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = "Velg Rase",
color = Color.White,
fontSize = 30.sp,
fontWeight = FontWeight.Bold,)
}
LazyColumn {
item {
Text(
text = "Hurtigvalg",
color = Color.Black,
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(10.dp)
)
}
//Horizontal Scroll view
item {
LazyRow {
itemsIndexed(items = DataProvider.puppyList) { index, itemPuppy ->
Card(
modifier = Modifier
.width(110.dp)
.height(140.dp)
.padding(10.dp, 5.dp, 5.dp, 0.dp)
.clip(RoundedCornerShape(10.dp))
.background(Color.White),
elevation = 5.dp
) {
Column(
modifier = Modifier.padding(5.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
painter = painterResource(id = DataProvider.puppy.puppyImageId),
contentDescription = "profile Image",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(60.dp)
.clip(CircleShape)
)
Spacer(modifier = Modifier.padding(5.dp))
Text(
text = DataProvider.puppy.breeds,
color = Color.Black,
fontWeight = FontWeight.Bold,
fontSize = 16.sp)
}
}
}
}
}
val mylist = listOf("Affenpinscher", "Wheaten terrier" , "dachshund",
"Fransk bulldog","Affenpinscher", "Wheaten terrier" , "dachshund",
"Fransk bulldog","Affenpinscher", "Wheaten terrier" , "dachshund",
"Fransk bulldog","Affenpinscher", "Wheaten terrier" , "dachshund",
"Fransk bulldog","Affenpinscher", "Wheaten terrier" , "dachshund",
"Fransk bulldog","Affenpinscher", "Wheaten terrier" , "dachshund",
"Fransk bulldog","Affenpinscher", "Wheaten terrier" , "dachshund",
"Fransk bulldog")
item {
Text(
text = "Alle hunderaser",
color = Color.Black,
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(vertical = 10.dp, horizontal = 10.dp)
.clip(RoundedCornerShape(10.dp))
.background(Color.White))
}
item {
val list = listOf("A", "B", "C", "D",
"E","F","G","H","I","J","K","L","M","N",
"O","P","Q","R","S","T","U","V","W","X", "Y","Z","?","?","?")
val expanded = remember { mutableStateOf(false) }
val currentValue = remember { mutableStateOf(list[0]) }
Surface(modifier = Modifier.fillMaxSize()) {
Box(modifier = Modifier.fillMaxWidth()) {
Row(modifier = Modifier
.clickable {
expanded.value = !expanded.value
}
.align(Alignment.CenterStart)) {
Text(text = currentValue.value,
color = Grass,
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(horizontal = 14.dp)
)
Icon(imageVector = Icons.Filled.ArrowDropDown, contentDescription = null)
DropdownMenu(expanded = expanded.value, onDismissRequest = {
expanded.value = false
}) {
list.forEach {
DropdownMenuItem(onClick = {
currentValue.value = it
expanded.value = false
}) {
Text(text = it,
color = Grass,
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(vertical = 10.dp,
horizontal = 10.dp))
}
}
}
}
}
}
}
}
}
}
}
uj5u.com熱心網友回復：
要顯示字母，您只需要一個Column需要的專案。要將惰性列滾動到需要的專案，您可以使用惰性列狀態。
這是一個基本示例：
val items = remember { LoremIpsum().values.first().split(" ").sortedBy { it.lowercase() } }
val headers = remember { items.map { it.first().uppercase() }.toSet().toList() }
Row {
val listState = rememberLazyListState()
LazyColumn(
state = listState,
modifier = Modifier.weight(1f)
) {
items(items) {
Text(it)
}
}
val offsets = remember { mutableStateMapOf<Int, Float>() }
var selectedHeaderIndex by remember { mutableStateOf(0) }
val scope = rememberCoroutineScope()
fun updateSelectedIndexIfNeeded(offset: Float) {
val index = offsets
.mapValues { abs(it.value - offset) }
.entries
.minByOrNull { it.value }
?.key ?: return
if (selectedHeaderIndex == index) return
selectedHeaderIndex = index
val selectedItemIndex = items.indexOfFirst { it.first().uppercase() == headers[selectedHeaderIndex] }
scope.launch {
listState.scrollToItem(selectedItemIndex)
}
}
Column(
verticalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier
.fillMaxHeight()
.background(Color.Gray)
.pointerInput(Unit) {
detectTapGestures {
updateSelectedIndexIfNeeded(it.y)
}
}
.pointerInput(Unit) {
detectVerticalDragGestures { change, _ ->
updateSelectedIndexIfNeeded(change.position.y)
}
}
) {
headers.forEachIndexed { i, header ->
Text(
header,
modifier = Modifier.onGloballyPositioned {
offsets[i] = it.boundsInParent().center.y
}
)
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/457306.html
標籤：表现 滚动 android-jetpack-compose 按字母顺序 信件
上一篇：R-使用apply加速搜索