Kotlin jetpack compose 文本输入框ExitText/TextField remember 居然可以传两个参数

package com.anguomob.jecpack.activity.compose.todo.one

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.SnackbarDefaults.backgroundColor
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.databinding.adapters.TextViewBindingAdapter
import com.anguomob.jecpack.activity.compose.todo.bean.TodoItem

@Composable
fun TodoInputText(text: String, onTextChanged: (String) -> Unit, modifier: Modifier = Modifier) {
    TextField(
        value = text,
        onValueChange = onTextChanged,
        modifier = modifier,
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
        maxLines = 1,
    )
}

@Composable()
fun TodoEditButton(
    onClick: () -> Unit,
    text: String,
    modifier: Modifier = Modifier,
    enable: Boolean = true
) {
    TextButton(
        onClick = onClick,
        shape = CircleShape,
        colors = ButtonDefaults.buttonColors(),
        modifier = modifier,
        enabled = enable
    ) {
        Text(text)
    }
}

@Composable
fun TodoItemInput(onItemComplete: (TodoItem) -> Unit) {
    val (text, setText) = remember {
        mutableStateOf("")
    }
    Column {
        Row(
            Modifier
                .padding(horizontal = 16.dp)
                .padding(top = 16.dp)
        ) {

            TodoInputText(
                text = text,
                modifier = Modifier
                    .weight(1f)
                    .padding(end = 8.dp),
                onTextChanged = setText

            )
            TodoEditButton(
                onClick = {
                    onItemComplete(TodoItem(text))
                    setText("")
                },
                text = "Add",
                modifier = Modifier.align(Alignment.CenterVertically),
                enable = !text.isBlank()
            )

        }
    }
}

使用

open class ComposeActivity : ComponentActivity() {
    val todoViewModel: TodoViewModel by viewModels()
    private val TAG = "ComposeActivity"
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
//            TodoActivityScreen(todoViewModel)
            TodoItemInput({
                Log.e(TAG, "onCreate: ${it.task}")
            })
        }
    }
}

效果

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Jetpack Compose 中,你可以使用 `TextField` 组件来实现限制字数的功能。你可以通过为 `TextField` 添加一个 `VisualTransformation` 来实现这个限制。 首先,你需要创建一个 `VisualTransformation`,它会修改输入的文本。在这个 `VisualTransformation` 中,你可以检查输入的文本长度,并根据需要进行截断。 下面是一个示例代码: ```kotlin @Composable fun LimitedTextField( maxLength: Int, text: String, onTextChanged: (String) -> Unit ) { val transformedText = remember(text) { // 创建 VisualTransformation,限制输入的文本长度 VisualTransformation { val truncatedText = it.text.take(maxLength) if (truncatedText != it.text) { // 如果文本被截断,需要更新输入框中的文本 onTextChanged(truncatedText) } TransformationResult(truncatedText) } } TextField( value = text, onValueChange = onTextChanged, visualTransformation = transformedText ) } ``` 在上面的例子中,`LimitedTextField` 是一个自定义的组件,它接受 `maxLength` 参数来指定最大字数限制。`text` 参数是当前输入的文本内容,`onTextChanged` 是一个回调函数,用于在文本发生变化时更新文本内容。 在 `LimitedTextField` 中,我们使用了 `remember` 函数来创建一个 `VisualTransformation`。每当 `text` 发生变化时,`remember` 函数会重新计算 `VisualTransformation`,确保它与新的 `text` 值保持同步。 然后,我们将这个 `VisualTransformation` 应用到 `TextField` 组件中,限制输入的文本长度。当文本被截断时,会触发 `onTextChanged` 回调函数来更新输入框中的文本。 使用这个 `LimitedTextField` 组件,你可以在 Compose 中实现限制字数的文本输入框。 ```kotlin @Composable fun MyScreen() { var text by remember { mutableStateOf("") } Column { LimitedTextField( maxLength = 10, text = text, onTextChanged = { newText -> text = newText } ) Text("当前字数: ${text.length}") } } ``` 在上面的示例中,我们创建了一个具有最大长度为 10 的限制的输入框,并在下方显示当前输入的字数。你可以根据需要调整 `maxLength` 的值来限制不同的字数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安果移不动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值