HarmonyOS 鸿蒙Next TextInput 如何将背景设置为透明？

发布于 1周前 作者 yibo5220 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next TextInput 如何将背景设置为透明？

Text(‘手机号：’)
.fontColor("#FFD4D4D4")
.fontSize(12)


TextInput({
placeholder: “请输入您的手机号”,
text: this.loginBean.phoneNumber,
controller: this.phoneInputController
})
.key(‘A’)
.width(‘100%’)
.type(InputType.Normal)
.fontColor("#FF777777")
.fontSize(16)
.placeholderColor("#FFB3B3B3")
.placeholderFont({ size: 16 })
.backgroundColor(Color.Transparent)
.padding({
left: 0,
right: 0,
top: 5,
bottom: 5
})

这样的设置，会让光标的展示很奇怪


更多关于HarmonyOS 鸿蒙Next TextInput 如何将背景设置为透明？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

是borderRadius>0导致的，设置了borderRadius（0）好了

更多关于HarmonyOS 鸿蒙Next TextInput 如何将背景设置为透明？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，若要将TextInput组件的背景设置为透明，可以通过修改其样式属性来实现。具体操作如下：

  1. 定义样式： 在样式文件中（如.json文件），为TextInput定义一个样式，设置其背景颜色为透明。

    {
  "name": "transparentTextInputStyle",
  "background_color": "#00000000"  // 透明色，使用16进制表示，8位中最后6位为000000表示透明
}

  2. 应用样式： 在对应的.hml文件中，将上述定义的样式应用到TextInput组件上。

    <TextInput style="transparentTextInputStyle" />

    或者，直接在TextInput组件的style属性中内联设置背景颜色：

    <TextInput style="background_color: #00000000;" />

这样，TextInput组件的背景就会被设置为透明。

注意：确保没有其他父级元素或样式覆盖了这个设置。如果TextInput依然没有显示为透明背景，请检查是否有其他样式或布局影响了其显示效果。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部