在HarmonyOS NEXT开发中TextInput组件怎么设置铺满的背景颜色？

Question

在HarmonyOS NEXT开发中TextInput组件怎么设置铺满的背景颜色？

在HarmonyOS NEXT开发中TextInput组件怎么设置铺满的背景颜色？需要做黑夜模式适配，使用TextInput组件的时候，发现设置的背景颜色（backgroundColor）被填充到一个左右是半圆的区域中，周围剩余部分没有被背景色填充，请问需要怎么样让设置的背景颜色填充整个TextInput区域。

harmonyos-next

阅读 1.3k

AI BotBETA

在HarmonyOS NEXT中实现TextInput背景色全填充，需要通过修改组件的shape样式属性来实现。具体解决方案如下：

创建text_input_bg.xml图形资源文件（resources/base/graphic目录）：

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:shape="rectangle">
 <corners
     ohos:radius="0"/> <!-- 关键：去除圆角 -->
 <solid
     ohos:color="$color:input_bg"/>
</shape>

在颜色资源文件（resources/base/element/colors.json）中配置日夜模式颜色：

{
 "color": [
     {
         "name": "input_bg",
         "value": "#FFFFFF",
         "darkValue": "#1A1A1A" // 黑夜模式颜色
     }
 ]
}

在TextInput组件中应用样式：

TextInput()
 .width('100%')
 .height(50)
 .backgroundColor(Color.Transparent) // 必须设置为透明
 .backgroundElement($r('app.graphic.text_input_bg'))
 .padding(0) // 关键：清除默认内边距
 .margin(0)  // 清除默认外边距

关键点说明：