带有标题项卡的懒加载列，其余项目在卡中。

Question

使用Compose的LazyColumn，我希望为头部项目创建一个卡片，并创建一个包含其余项目的单独卡片。

LazyColumn() {
  item {
    Card() { // header card}
  }

  // would like all items in single card
  Card() { // cannot do this, outside composable function
      items(myItems) { item ->
         // item here
      }
  }
}

这种情况是否可能发生？

- lostintranslation

Answer 1

我找到了一种解决方法，但它并不是100%的。例如，它没有卡片属性。也许其他人有一些好主意。这是我的解决方案：

@Composable
    fun QuerySearch(
    modifier: Modifier = Modifier,
    query: String,
    label: String,
    onDoneActionClick: () -> Unit = {},
    onClearClick: () -> Unit = {},
    onQueryChanged: (String) -> Unit
) {
    var showClearButton by remember { mutableStateOf(false) }

    TextField(
        modifier = modifier
            .fillMaxWidth()
            .onFocusChanged { focusState ->
            showClearButton = (focusState.isFocused)
        },
        value = query,
        onValueChange = onQueryChanged,
        label = { Text(text = label) },
        textStyle = MaterialTheme.typography.subtitle1,
        singleLine = true,
        trailingIcon = {
        if (showClearButton) {
            IconButton(onClick = { onClearClick() }) {
                Icon(imageVector = Icons.Filled.Close, contentDescription = "Clear")
            }
        }

    },
    keyboardActions = KeyboardActions(onDone = {
        onDoneActionClick()
    }),
    keyboardOptions = KeyboardOptions(
        imeAction = ImeAction.Done,
        keyboardType = KeyboardType.Text
    ),
        colors = TextFieldDefaults.textFieldColors(
            cursorColor = MaterialTheme.colors.secondary,
            textColor = MaterialTheme.colors.onPrimary,
            focusedIndicatorColor = MaterialTheme.colors.secondary,
        )

    )
}

@Composable
fun <T> AutoCompleteTextView(
    modifier: Modifier,
    query: String,
    queryLabel: String,
    onQueryChanged: (String) -> Unit = {},
    predictions: List<T>,
    onDoneActionClick: () -> Unit = {},
    onClearClick: () -> Unit = {},
    onItemClick: (T) -> Unit = {},
    itemContent: @Composable (T) -> Unit = {}
) {

val view = LocalView.current
val lazyListState = rememberLazyListState()
LazyColumn(
    state = lazyListState,
    modifier = modifier.heightIn(max = TextFieldDefaults.MinHeight * 6)
) {
    val lazyListScope = this

    item {
        QuerySearch(
            query = query,
            label = queryLabel,
            onQueryChanged = onQueryChanged,
            onDoneActionClick = {
                view.clearFocus()
                onDoneActionClick()
            },
            onClearClick = {
                onClearClick()
            }
        )
    }

    item {
        if (predictions.count() > 0) {
            Card(
                elevation = 4.dp,
                modifier = Modifier.padding(8.dp),
                backgroundColor = Color.White,
                shape = RoundedCornerShape(8.dp)
            ) {
                lazyListScope.items(predictions) { prediction ->
                    Row(
                        Modifier
                            .fillMaxWidth()
                            .clickable {
                                view.clearFocus()
                                onItemClick(prediction)
                            }
                        .background(MaterialTheme.colors.primaryVariant)
                        ) {
                            itemContent(prediction)
                        }
                    }
                }
            }
        }

    }
}

fun <T> LazyListScope.items(items: List<T>) {
    this.items(items)
}

这将导致：

- Kristy Welsh

Answer 2

如果你只有两个项目，那么使用LazyColumn就没有意义。在这种情况下，如果需要，可以使用带有verticalScroll的常规Column：

Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(
            rememberScrollState()
        ),
) {
    Card(
        modifier = Modifier.fillMaxWidth()
    ) {
        header()
    }
    Card(
        modifier = Modifier.fillMaxWidth()
    ) {
        Column {
            item1()
            item2()
        }
    }
}

- Francesc

---

这根本不是两个项目。这是两张卡片，第一张卡片有一个项目，第二张卡片有很多很多项目。MyItems 是一个列表。我希望项目列表在一张卡片中。 - lostintranslation

2张卡片 = 2个项目 - 这是懒加载列表关心的全部。一个卡片有许多项目与懒加载列表无关。 - Francesc

看起来LazyColumn存在一个相当大的限制，无法为项目添加周围视图。这是一个非常普遍的场景，我理解您的解决方案，不知道是否有办法在我的用例中使用LazyColumn。 - lostintranslation

如果没有更多关于特定UX要求的信息，我就无法再说更多了。但是你可以将卡片移动到每个项目上（因此每个项目有1张卡片而不是所有项目共用1张卡片），但你最初的设计是不可能实现的。 - Francesc

我同意@Iostintraslation的观点，这是一个很大的限制。如果在这种情况下我们决定仅使用可垂直滚动的“Column”，我想知道性能会受到什么影响。使用可滚动的Column和LazyColumn是否相同？ - Diego Palomar

Answer 3

你可以有类似这样的东西：

Card {
    Column {
        Text(text = "Header")
        LazyColumn {
            items(myItems) { 
                // ...
            }
        }
    }
}

但请注意，如果您尝试让外部组合滚动与内部组合滚动方向相同，这可能会遇到 IllegalStateException 的问题...但是，如果您为您的 LazyColumn 指定一个特定的高度，那么应该就没问题了。

请参见此 视频 有关嵌套相同方向列的内容：

- Alvin Dizon