# TextInput背景设置

#### 问题现象

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

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

#### 背景知识

*   TextInput：单行文本输入框组件。
*   backgroundColor：设置组件背景色。
*   动态属性设置：动态设置组件的属性，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。

#### 解决方案

*   **场景一**：可以通过将其背景色设置为backgroundColor('#00000000')或者backgroundColor(Color.Transparent)来实现。
    
    去除TextInput默认背景色也可使用此方案。
    
*   **场景二**：动态设置组件的属性实现改变背景色的效果。详情可参考示例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})
      }
    }
    ```
    
    效果预览：
    
*   **场景四**：在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';
              }
            })
        }
      }
    }
    ```
    
    效果预览：
    

#### 常见FAQ

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

A：多态样式仅支持通用属性。如果多态样式不生效，则该属性可能为组件的私有属性，例如：fontColor、TextInput组件的backgroundColor等。此时，可以通过动态属性设置来解决此问题。

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

A：background从API 20开始，新增了背景向父组件的安全区扩展的能力，通过BackgroundOptions中的ignoresLayoutSafeAreaEdges参数可以设置扩展到的安全区的范围，如：LayoutSafeAreaEdge.TOP上方区域。