标签: lazycolumn

我使用的是 Jetpack Compose 1.1.0-alpha05 版本，我想知道是否有办法关闭LazyColumnxml ( android:overScrollMode="never") 之类的滚动效果？

我在 recyclerview 项目布局中使用 ComposeView 来与 jetpack compose 一起使用。当我打开屏幕时遇到奇怪的问题

错误

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a …

我有一个产品单元格，我想在列表中显示，我使用了 LazyColumn 但性能很糟糕，我找不到为什么它这么慢。然后我将 LazyColumn 切换为 Column，突然间滚动变得超级平滑

LazyColumn 版本：

LazyColumn() {
    items(cartItems, key = {it.cartItem.id}) { cartItemData ->
        CartItemWithActions(data = cartItemData)
        Divider(color = colorResource(id = R.color.separator_line))
    }
}
 

栏目版本

val state = rememberScrollState()
Column(modifier = Modifier.verticalScroll(state)) {
    cartItems.forEach { cartItemData ->
        CartItemWithActions(data = cartItemData)
        Divider(color = colorResource(id = R.color.separator_line))
    }
}

CartItemWithActions 是我的产品单元格，其中包含我使用滑动和几个文本加载的图像

LazyColumn 版本的 HWUI

列的 HWUI

任何人都可以提示为什么 LazyColumn 比 Column 慢吗？

更新

当以这种方式设置 LazyColumn 时，LazyColumn 滚动效果似乎更好

LazyColumn() {
    items(
        count = cartItems.size,
        key = {
            cartItems[it].cartItem.id
        },
        itemContent = …

目前在 Jetpack Compose 中，此代码会抛出一个异常IllegalStateException，因为您无法嵌套两个垂直滚动的可组合项：

@ExperimentalFoundationApi
@Composable
fun MyLazyColumn() {
    LazyColumn {
        item {
            Text(text = "My LazyColumn Title")
        }
        item {
            LazyVerticalGrid(cells = GridCells.Fixed(4)) {
                items(10) {
                    Box(
                        modifier = Modifier
                            .size(50.dp)
                            .padding(5.dp)
                            .background(Color.Gray)
                    )
                }
            }
        }
    }
}

我不希望网格本身滚动，而只是显示我传递给它的可组合项的固定网格。是否有任何解决方法可以在 中显示非滚动网格LazyColumn？

我创建了一个简单的示例，在 LazyColumn 中包含六个 TextField，当您单击最后一个 TextField 时，键盘会隐藏它，如果您隐藏键盘并再次单击最后一个 TextField，则工作正常。

在 AndroidManifest 中我使用“adjustPan”

        android:windowSoftInputMode="adjustPan"

这是您第一次单击最后一个文本字段时的捕获，隐藏最后一个文本字段

这是您第二次单击最后一个 TextField 时的捕获，工作正常

这是代码

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestComposeTheme {
                val numbers = listOf(1,2,3,4,5,6)
                LazyColumn() {
                    items(numbers) { index->
                        TextField(index = index)
                    }
                }
            }
        }
    }
}
@Composable
fun TextField(index: Int){
    var text by remember { mutableStateOf("Hello$index") }
    TextField(
        modifier = Modifier.padding(25.dp),
        value = text,
        onValueChange = { text = it },
        label = { Text("TextField$index") }
    ) …

问题 - 向下滚动会导致底部工作表滚动，而不是为 LazyColumn 提供滚动优先级（RecyclerView 没有此问题。它被 NestedScrollView 包裹）

我刚刚介绍了用 Compose LazyColumn 替换 CoordinatorLayout 内的 Recycler。协调器（作为底部工作表实现）本身可以在查看状态和展开状态之间自由滚动。我的问题是，当在 LazyColumn 中向下拖动项目区域时，底部工作表会滚动而不是 LazyColumn 。如果我在 LazyColumn 上先向上滚动，然后向下滚动（不释放），则 LazyColumn 会拾取滚动，并且滚动优先级将赋予 LazyColumn（预期行为）。

BottomSheetFragment
|-CoordinatorLayout
|--ConstraintLayout (BottomSheetBehavior)
|---MyListFragment
|----ComposeView
|-----Theme
|------Surface
|-------Box
|--------LazyColumn

刚接触 Compose，所以我希望有人能告诉我如何纠正这种新的滚动行为？

**编辑 我通过切换协调器的 ^^ BottomSheetBehavior.isDragglable 来完成这项工作，但它确实需要我释放拖动，而不是从列表滚动平滑过渡到底部工作表滚动 - 任何人建议修复？：

fun MyUi(listener:Listener) {
    val listState = rememberLazyListState()

    LaunchedEffect(listState) {
        listState.interactionSource.interactions.collect {
            //at the top of the list so allow sheet scrolling
            listener.allowSheetDrag(listState.firstVisibleItemScrollOffset == 0)
        }
    }

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override …

我使用LazyColumninside BottomSheetDialogFragment，但如果LazyColumn向上滚动列表，则Bottom工作表对话框将滚动而不是LazyColumn列表。似乎BottomSheetDialogFragment拦截用户触摸输入。

看起来就是这样：

LazyColumn里面如何正确使用BottomSheetDialogFragment？

MyBottomSheetDialogFragment.kt：

class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("Header", color = Color.Black)
                    LazyColumn(
                        Modifier
                            .weight(1f)
                            .fillMaxWidth()) {
                        items(100) {
                            Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
                        }
                    }
                }
            }
        }
    }
}

并使用以下代码显示它：

MyBottomSheetDialogFragment().show(activity.supportFragmentManager, null)

当我们使用 XMLRecyclerView列表时，要解决这个问题，我们必须使用此处描述的方式包装RecyclerView列表，但是如何使用 Jetpack Compose …

我想要与 TikTok 的个人资料屏幕类似的效果。顶部是ProfilPicture和username，下面是一个stickyHeader带有TabRow( Posts, Drafts, Likes, Favorites) 的 ，下面是HorizontalPager带有 4 个屏幕 ( Posts, Drafts, Likes, Favorites) 的 ，每个屏幕都包含一个列表。

如果我在 Compose 中构建它，我会崩溃，因为我无法将两个嵌套LazyColumns在一起。

这是我尝试做的事情的简短版本：

val tabList = listOf("Posts", "Drafts", "Likes", "Favorites")
val pagerState: PagerState = rememberPagerState(initialPage = 0)
val coroutineScope = rememberCoroutineScope()

LazyColumn(modifier = Modifier.fillMaxSize()) {
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp),
            contentAlignment = Alignment.Center
        ) {
            //Profile Header (Picture, …

我正在努力使用 jetpack compose LazyColumn 和 StickyHeader 功能。基本上静态视图效果很好，但是一旦我开始滚动，这些项目就会越过粘性标题，滚动会开始一种奇怪的行为，并且最后一个项目将永远不可见，因为滚动总是反弹回来。

它看起来是这样的：

这是可组合的：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CollectionsScreen(
    collectionsLive: LiveData<List<CollectionsView>>,
    onCollectionChanged: (ICalCollection) -> Unit
    /* some more hoisted functions left out for simplicity */
) {

    val list by collectionsLive.observeAsState(emptyList())
    val grouped = list.groupBy { it.accountName ?: it.accountType ?: "Account" }

    LazyColumn(
        modifier = Modifier.padding(8.dp)
    ) {

        item {
            Text(
                stringResource(id = R.string.collections_info),
                textAlign = TextAlign.Center,
                modifier = Modifier.padding(bottom = 16.dp)
            )
        }

        grouped.forEach { (account, collectionsInAccount) ->
            stickyHeader {
                Text(
                    account,
                    style = MaterialTheme.typography.titleLarge, …

我在项目中使用 LazyColumn。当我传递列表时，它给了我错误。有人可以指导我什么错误吗？

结果屏幕.kt

@Composable
fun ResultScreen(nearestResultList: List<NearestResult>?) {
    LazyColumn(
        Modifier
            .fillMaxSize()
            .background(getBackgroundColor())
    ) {
        items(nearestResultList) { nearestResult ->
            Text(text = "$nearestResult")
        }
    }
}

错误

Type mismatch.
Required:
Int
Found:
List<NearestResult>?

更新