TextInput背景设置
=============

#### 问题现象

开发者在使用TextInput组件时，对背景的设置有以下几个经典场景，分别该如何实现？

*   **场景一**：如何设置TextInput透明背景色？
*   **场景二**：如何动态更改TextInput背景色？
*   **场景三**：如何填充TextInput周围四个角的背景色？
*   **场景四**：TextInput组件的背景颜色如何根据输入内容的变化而改变？

#### 背景知识

*   [TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)：单行文本输入框组件。
*   [backgroundColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundcolor)：设置组件背景色。
*   [动态属性设置](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-attribute-modifier)：动态设置组件的属性，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。

#### 解决方案

*   **场景一**：可以通过将其背景色设置为backgroundColor('#00000000')或者backgroundColor(Color.Transparent)来实现。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ac/v3/GF3avSY2Sj-LRKeoCydkDw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134031Z&HW-CC-Expire=86400&HW-CC-Sign=68F48B46E828834CAAEEB5D4967005EE061C126273A8D08F7F5F0FAFBE1058FA)
    
    去除TextInput默认背景色也可使用此方案。
    
*   **场景二**：动态设置组件的属性实现改变背景色的效果。详情可参考[示例1（组件绑定Modifier切换背景颜色）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-attribute-modifier#示例1组件绑定modifier切换背景颜色)。
*   **场景三**：将TextInput组件放在一个Column组件里，通过设置Column的背景色来填充TextInput组件外部的背景色。
    
    @Entry
    @Component
    struct Index {
      controller: TextInputController | undefined;
      @State message: string = '';
    
      build() {
        Column() {
          Column() {
            TextInput({ text: this.message, placeholder: 'input your word...', controller: this.controller })
              .borderWidth(1)
              .backgroundColor('#5AADA0')
          }
          .width('86%')
          .backgroundColor('#0A59F7') _// 设置Column的背景色来填充TextInput组件外部的背景色。_
        }
        .width('100%')
        .height('100%')
        .padding({top:10})
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c0/v3/8uLXNX2lQeKBIZAGAxcBVQ/zh-cn_image_0000002628763136.png?HW-CC-KV=V1&HW-CC-Date=20260709T134031Z&HW-CC-Expire=86400&HW-CC-Sign=6314D921C75E0D5692FC8852CC404EED33B58876B27614A8CA6B4E6C57F7E5CC "点击放大")
    
*   **场景四**：在TextInput组件的onChange方法中使用if/else判断是否有输入内容，如果有输入内容则将其背景修改为对应颜色。
    
    @Entry
    @Component
    struct Scene2 {
      @State text: string = '';
      controller: TextInputController = new TextInputController();
      @State color: string = '#fdecc949';
    
      build() {
        Column() {
          TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
            .placeholderColor(Color.Grey)
            .placeholderFont({ size: 14, weight: 400 })
            .caretColor(Color.Blue)
            .width('95%')
            .height(40)
            .margin(20)
            .fontSize(14)
            .fontColor(Color.Black)
            .backgroundColor(this.color)
            .onChange((value: string) => {
              this.text = value;
              if (this.text.length > 0) { _ // 判断是否有内容输入，大于零则有，否则没有_
                this.color = '#ff0fe7d5';
              } else {
                this.color = '#fdecc949';
              }
            })
        }
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6e/v3/iUW2h004SIO1Xiz-iltGHQ/zh-cn_image_0000002658962451.png?HW-CC-KV=V1&HW-CC-Date=20260709T134031Z&HW-CC-Expire=86400&HW-CC-Sign=EA335A3B644B17E3CFBE8B15880D0C2F56510C249693DE8084CD60A3B35A0854 "点击放大")
    

#### 常见FAQ

Q：使用多态样式动态修改TextInput组件背景色，为什么没有效果？

A：[多态样式](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-polymorphic-style)仅支持通用属性。如果多态样式不生效，则该属性可能为组件的私有属性，例如：fontColor、TextInput组件的backgroundColor等。此时，可以通过动态属性设置来解决此问题。

Q：使用background设置背景如何配置扩展到的安全区的范围？

A：[background](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#background10)从API 20开始，新增了背景向父组件的安全区扩展的能力，通过[BackgroundOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundoptions20对象说明)中的ignoresLayoutSafeAreaEdges参数可以设置扩展到的安全区的范围，如：LayoutSafeAreaEdge.TOP上方区域。