kotlin 我们怎样才能显示一个文本在正好4行,然后才实现水平滚动在喷气背包组成?

c9x0cxw0  于 7个月前  发布在  Kotlin
关注(0)|答案(1)|浏览(77)

我们如何在精确的4行中显示文本,并且只有当文本超出分配的空间(即4行)时才在第4行中引入水平滚动
我尝试了下面的方法,但是它以单行的方式显示所有内容,并带有水平滚动。如果我注解掉.horizontalScroll(scrollState),那么它只显示4行,并且没有滚动。

Text(
            text = "In this blog post, " +
                    "we will explore how to implement a countdown timer" +
                    " using Jetpack Compose, the modern toolkit for building " +
                    "native Android UI. We will start with a basic timer and" +
                    " gradually add more advanced features." +
                    "we will explore how to implement a countdown timer" +
                    "using Jetpack Compose, the modern toolkit for building " +
                    "native Android UI. We will start with a basic timer and" +
                    "gradually add more advanced features.",
            textAlign = TextAlign.Justify,
            style = MaterialTheme.typography.bodySmall,
            maxLines = 4,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier
                .horizontalScroll(scrollState)
        )

字符串

uajslkp6

uajslkp61#

要实现只显示4行文本并仅在文本超出分配的空间时才在第4行引入水平滚动的目标,您可以使用RowColumnBox的组合沿着使用horizontalScroll修饰符。下面是一个示例:

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.featherandroidtasks.ui.theme.FeatherAndroidTasksTheme

@Composable
fun ScrollableText(text: String) {
    val scrollState = rememberScrollState()
    val density = LocalDensity.current.density

    // Set the maximum height for 4 lines
    val maxHeight = (4 * MaterialTheme.typography.bodySmall.fontSize.value * density).dp

    // Measure the height of the text to determine if scrolling is needed
    val textHeight = with(LocalView.current) {
        val textLayoutResult = measureInPlace {
            drawIntoCanvas { canvas ->
                // Draw the text without modifying the canvas
                drawIntoCanvas(canvas) {
                    // Draw the text without scrolling to measure its height
                    drawIntoCanvas(canvas) {
                        drawIntoCanvas(canvas) {
                            drawIntoCanvas(canvas) {
                                // Draw the text without scrolling to measure its height
                                BasicTextField(
                                    value = text,
                                    onValueChange = { /* Handle value change */ },
                                    maxLines = Int.MAX_VALUE,
                                    textStyle = MaterialTheme.typography.bodySmall,
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(0.dp)
                                )
                            }
                        }
                    }
                }
            }
        }
        textLayoutResult.height
    }

    // Display the text with horizontal scrolling if the height exceeds maxHeight
    Box(
        modifier = Modifier
            .horizontalScroll(scrollState)
            .heightIn(max = if (textHeight > maxHeight) maxHeight else textHeight)
    ) {
        Text(
            text = text,
            textAlign = TextAlign.Justify,
            style = MaterialTheme.typography.bodySmall,
            maxLines = 4,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier
                .padding(0.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewScrollableText() {
    FeatherAndroidTasksTheme {
        ScrollableText(
            text = "In this blog post, " +
                    "we will explore how to implement a countdown timer" +
                    " using Jetpack Compose, the modern toolkit for building " +
                    "native Android UI. We will start with a basic timer and" +
                    " gradually add more advanced features." +
                    "we will explore how to implement a countdown timer" +
                    "using Jetpack Compose, the modern toolkit for building " +
                    "native Android UI. We will start with a basic timer and" +
                    "gradually add more advanced features."
        )
    }
}

字符串

  • 在本例中,包含TextBox有一个horizontalScroll修饰符,heightIn修饰符用于将最大高度限制为计算出的maxHeight。如果文本的高度超过此限制,将启用水平滚动。否则,文本将显示为4行而不滚动。*

相关问题