Jetpack Compose：如何让LazyColumn空列表提示文本居中

问题出在LazyColumn的布局特性上：它是滚动容器，默认子item的高度是自适应内容的，你给Box设置的fillMaxSize()只能填充item自身的内容高度，没法撑满整个LazyColumn的可用空间，所以文本会顶在顶部。

给你两种可行的解决方法：

方法一：让空状态Item占满父容器 #

把Box的fillMaxSize()替换成fillParentMaxSize()，这个修饰符会强制让Box填充LazyColumn的整个可用空间，配合contentAlignment = Alignment.Center就能让文本居中：

if (itemList.isEmpty()) {
    item {
        Box(
            modifier = Modifier.fillParentMaxSize().padding(20.dp),
            contentAlignment = Alignment.Center,
        ) {
            Text(
                textAlign = TextAlign.Center,
                text = stringResource(id = R.string.empty_text),
            )
        }
    }
}

方法二：通过LazyColumn的排列规则居中 #

给空状态下的LazyColumn添加verticalArrangement = Arrangement.Center，让整个列表内容垂直居中，此时Box不需要设置fill类修饰符：

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .padding(paddingValues),
    verticalArrangement = if (itemList.isEmpty()) Arrangement.Center else Arrangement.Top
) {
    if (itemList.isEmpty()) {
        item {
            Box(
                modifier = Modifier.padding(20.dp),
                contentAlignment = Alignment.Center,
            ) {
                Text(
                    textAlign = TextAlign.Center,
                    text = stringResource(id = R.string.empty_text),
                )
            }
        }
    } else {
        items(itemList) { item ->
            Item(
                modifier = Modifier.fillMaxWidth(),
                item = item,
                onItemClick = onItemClick,
            )
        }
    }
}

两种方法都能解决问题，你可以根据自己的代码习惯选择。

内容的提问来源于stack exchange，提问作者testivanivan