JetPack Compose实现文本默认显示3行带省略号，点击展开全文

要实现默认显示3行带省略号、点击展开完整文本的效果，核心是用状态变量控制文本的显示状态，以下是具体实现：

基础版实现 #

直接给文本添加点击交互，切换折叠/展开状态：

@Composable
fun ExpandableText() {
    // 记录文本是否展开的状态
    val isExpanded = remember { mutableStateOf(false) }
    val longText = "my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,"

    Text(
        text = longText,
        fontSize = 16.sp,
        // 折叠时限制3行，展开时不限制行数
        maxLines = if (isExpanded.value) Int.MAX_VALUE else 3,
        // 文本超出时末尾显示省略号
        overflow = TextOverflow.Ellipsis,
        // 点击切换展开状态
        modifier = Modifier
            .clickable { isExpanded.value = !isExpanded.value }
            .padding(8.dp)
    )
}

优化版（带展开/收起提示） #

如果需要更清晰的交互提示，可以添加"展开"/"收起"文字：

@Composable
fun ExpandableTextWithHint() {
    val isExpanded = remember { mutableStateOf(false) }
    val longText = "my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,my very long text,"

    Column(modifier = Modifier
        .clickable { isExpanded.value = !isExpanded.value }
        .padding(8.dp)
    ) {
        Text(
            text = longText,
            fontSize = 16.sp,
            maxLines = if (isExpanded.value) Int.MAX_VALUE else 3,
            overflow = TextOverflow.Ellipsis
        )
        // 右侧显示展开/收起提示
        Text(
            text = if (isExpanded.value) "收起" else "展开",
            color = Color.Blue,
            fontSize = 14.sp,
            modifier = Modifier.align(Alignment.End)
        )
    }
}

关键逻辑说明 #

• remember { mutableStateOf(false) }：用remember保存状态，确保重组时状态不会丢失，Compose会根据状态变化自动更新UI。
• maxLines：动态设置文本最大行数，折叠时设为3，展开时用Int.MAX_VALUE取消行数限制。
• TextOverflow.Ellipsis：指定文本超出最大行数时的显示方式为末尾加省略号。
• Modifier.clickable：给可交互区域添加点击事件，切换展开状态。

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