标签: android-jetpack-compose-text

来自 SwiftUI，我想创建一个视图Text，它有一个圆的背景，其中圆的宽度/高度随着里面的文本Text变长而增长。

因为Circle()Compose 中没有像 in 那样SwifUI，所以我只创建了一个Spacer并剪掉了它。下面的代码正在使用，ConstraintLayout因为我不知道如何获得宽度Text以将Circle可组合的大小设置为相同：

@Composable
fun CircleDemo() {
    ConstraintLayout {
        val (circle, text) = createRefs()

        Spacer(
            modifier = Modifier
                .background(Color.Black)
                .constrainAs(circle) {
                    centerTo(text)
                }
        )

        Text(
            text = "Hello",
            color = Color.White,
            modifier = Modifier
                .constrainAs(text) {
                    centerTo(parent)
                }
        )
    }
}

我可以使用一个mutableStateOf { 0 }我在onGloballyPositioned附加到的修饰符中更新它的地方Text，然后将其设置为requiredSizefor Spacer，但是 1. 这看起来很愚蠢，2.Spacer现在绘制在ConstraintLayout. …

我想在最后一行的末尾显示一个动态的多行文本和一个图标。这个图标可以是动画的。我尝试了一些方法，但还没有成功。我应该怎么做？

与我的布局有相同想法的示例视图

在当前将我的应用程序转换为 Jetpack compose 时，我在某些情况下遇到了一些问题来调整我当前的调色板。

TextInputLayout我的 xml 文件中有一些从主题上的 SECUNDARY 颜色继承了高亮文本颜色。

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
    ...
    <item name="colorPrimary">@color/blue</item>
    <item name="colorPrimaryVariant">@color/blue</item>
    <item name="colorSecondary">@color/red</item>
    <item name="colorSecondaryVariant">@color/red</item>
    ...
</style>

问题是我的TextFieldon compose 继承了 PRIMARY 颜色的高亮文本颜色MaterialTheme。

MaterialTheme(
    colors = Colors(
        primary = Color.Blue,
        ...
        secondary = Color.Red,
        ...
    ),
    content = content,
    typography = MaterialTheme.typography,
    shapes = MaterialTheme.shapes,
) {
   TextField(...)
}

我覆盖了colors参数，TextField但似乎没有影响这种颜色。

是否有一种方法可以在不更改colorson 的情况下覆盖 compose 上的突出显示颜色MaterialTheme？我想避免这种情况，因为它可能会在使用相同主题的其他屏幕上引起问题。

我正在尝试在 Jetpack Compose 中实现TextField具有以下功能的 ：首先它被禁用，但是当用户按下 时Button，它会被启用并同时接收焦点。这是我的方法：

var text by remember { mutableStateOf("text") }
var enabled by remember { mutableStateOf(false)}
val focusRequester = remember { FocusRequester() }

Column {
    TextField(
        value = text,
        onValueChange = { text = it },
        enabled = enabled,
        modifier = Modifier.focusRequester(focusRequester),
        textStyle = TextStyle(fontSize = 24.sp)
    )
    Button(onClick = {
        enabled = true
        focusRequester.requestFocus()
    }) {
        Text("Enable and request focus")
    }

但是，当按下按钮时，TextField只会启用，而不是聚焦。要聚焦它，用户必须再次单击它。我做错了什么以及可能的解决方法是什么？

我使用jetpack compose创建一个editText，我想显示一个像“android:hint”之前的提示，所以我尝试使用decorationBox，但是在我创建它之后没有显示输入并且日志可以显示我的输入内容。这是我的代码，

val passState= remember { mutableStateOf(TextFieldValue("")) }
BasicTextField(
    decorationBox = {
        Text("password",color = loginGrayColor)
    },
    value = passState.value,
    onValueChange = { passState.value = it ; Log.d("password",it.text) },
    singleLine = true,
    maxLines = 1,
    textStyle = TextStyle(
        fontSize = 15.sp,
        color = loginInputTextColor
    ),
    modifier = Modifier
        .padding(start = 10.dp, top = 10.dp)
        .height(20.dp)
)

我怎样才能使文本字段随着其文本内容而增加高度？我尝试使用类似于下面的代码，但它的高度是固定的，并且不会增长。

Scaffold(
    topBar = {

    },
    content = {
        Box(modifier = Modifier.padding(it)) {
            
            Column(){
                LazyColumn(modifier = Modifier.fillMaxHeight(0.9)){
                    // some composable here for UI
                }
            
                Row(){
                    // icon
                
                    BasicTextField(
                        maxLines = 4,
                    )
                
                    // icon
                }
            }
            
        }
    }
)

虽然我似乎已经通过给列赋予 0.9 来固定高度，但我不明白如何不给出固定高度并仍然随内容动态增长文本字段高度？

我正在使用新的撰写库在 android 中实现OutstandingTextField 。但奇怪的是，文本字段中的输入数据没有更新。

于是我搜索了一下，发现了一个叫做Recomposition in android compose的主题。我没有完全明白。
不过，我确实找到了解决方案：

@Composable
fun HelloContent(){
    var name:String by remember {mutableStateOf("")}
    OutlinedTextField(
        value = name,
        onValueChange = {name = it},
        label = {Text("Name")}
    )
}

我还阅读了jetpack compose 中的状态概念。但我没能完全理解它。
有人可以用简单的话解释一下吗？

如何Text使用 Jetpack Compose将文本与组件的底部对齐？textAlign设置只有Start，End，Left，Center，Right和Justify选项。

  Text(
        text = "First",
        textAlign = TextAlign.Start,
        modifier = Modifier
            .background(Color(0xFF1976D2))
            .size(200.dp),
        color = Color.White,
    )

我想对齐Text组件的内容，每个内容Text 都有一个特定的大小，使用modifier.size(x), 将它们的文本对齐到底部。在图像中Text，不同大小的蓝色矩形应该像在经典的 Android 中那样对齐它们内部的文本android:gravity。

它类似于 textAlign = TextAlign.x但用于底部。

从设置排列Box对齐Text内Box或Modifier.align(Alignment.BottomEnd)在BoxScope做什么android:layout_gravity的看法呢，对齐文本组件，而不是内容的Text组成部分，你可以看到difference 在这里。

图像中蓝色矩形的代码是

@Composable
fun BoxExample() {
    Box(
        modifier …

当某个布尔变量为 true 时，我的一个可组合项中的文本会被删除。如何在TextStyle重组时为这种变化设置动画，以便线条淡入而不是突然出现和消失？

@Composable
fun MyComposable(
    completed: Boolean
) {
    val textStyle = TextStyle(textDecoration = if (completed) TextDecoration.LineThrough else null)

    Text(
        text = title,
        color = textColor,
        style = textStyle,
        modifier = Modifier.align(Alignment.CenterVertically)
    )

我的问题：

我想将我的 Text() 内容放置在 Scaffold 中页面的中心。

我尝试了“textAlign = TextAlign.Center” - 它仅在水平区域中对齐文本。垂直区域中的文本不对齐。

我的代码：

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {

            }
            Text(
                text = "Content of the page",
                fontSize = 30.sp, …