如何在 Jetpack Compose 中获取带有渐变边框的 OutlinedTextField？

发布于 2025-01-13 20:55:47 字数 1107 浏览 3 评论 0原文

我正在尝试获取一个带有渐变边框的 OutlinedTextField ，如下所示：

但我只能向轮廓添加单一颜色，

OutlinedTextField(
    value = email,
    onValueChange = {email = it},
    label = { Text(text = "Email Address") },
    modifier = Modifier
        .fillMaxWidth(.8f)
        .padding(4.dp),
    colors = TextFieldDefaults.outlinedTextFieldColors(unfocusedBorderColor = Color.Green)
)

如果我使用 modifier 添加边框，则渐变将应用于边框，而不是轮廓：

Modifier.border(width = 1.dp, brush = gradient, shape = RoundedCornerShape(12.dp))

如何向轮廓添加渐变颜色?

原文

I'm trying to get an OutlinedTextField with gradient border like this one:

But I can add only a single color to the outline,

OutlinedTextField(
    value = email,
    onValueChange = {email = it},
    label = { Text(text = "Email Address") },
    modifier = Modifier
        .fillMaxWidth(.8f)
        .padding(4.dp),
    colors = TextFieldDefaults.outlinedTextFieldColors(unfocusedBorderColor = Color.Green)
)

If I add a border with modifier then the gradient is applied to the border, not to the outline:

Modifier.border(width = 1.dp, brush = gradient, shape = RoundedCornerShape(12.dp))

How can I add gradient color to the outline?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盛夏已如深秋| 2025-01-20 20:55:47

到目前为止，我知道 OutlinedTextField 不支持渐变边框。但如果真的想在文本字段中使用渐变边框，您可以尝试 BasicTextField

    var name by remember {
        mutableStateOf("")
    }
    BasicTextField(
        value = name,
        onValueChange = { name = it },
        cursorBrush = Brush.horizontalGradient(listOf(Color.Red, Color.Green)),
        modifier = Modifier
            .fillMaxWidth(),
        decorationBox = { innerTextField ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .border(
                        brush = Brush.horizontalGradient(listOf(Color.Green, Color.Blue)),
                        width = 1.dp,
                        shape = CircleShape
                    )
                    .padding(16.dp)
            ) {
                Icon(Icons.Default.Email, contentDescription = "")
                Spacer(modifier = Modifier.padding(3.dp))
                innerTextField()
            }
        }
    )

这就是最终结果

you can learn more about basic text field by looking the sample

[BasicTextField Samples][2]

so far that i know OutlinedTextField does't support gradient border. But if really want to use gradient border in text field you can try BasicTextField

    var name by remember {
        mutableStateOf("")
    }
    BasicTextField(
        value = name,
        onValueChange = { name = it },
        cursorBrush = Brush.horizontalGradient(listOf(Color.Red, Color.Green)),
        modifier = Modifier
            .fillMaxWidth(),
        decorationBox = { innerTextField ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .border(
                        brush = Brush.horizontalGradient(listOf(Color.Green, Color.Blue)),
                        width = 1.dp,
                        shape = CircleShape
                    )
                    .padding(16.dp)
            ) {
                Icon(Icons.Default.Email, contentDescription = "")
                Spacer(modifier = Modifier.padding(3.dp))
                innerTextField()
            }
        }
    )

and this is the final result

you can learn more about basic text field by looking the sample

[BasicTextField Samples][2]

回复收藏 0 原文

~没有更多了~