HarmonyOS 鸿蒙Next 给textInput加上背景色结果把图标盖住了

HarmonyOS 鸿蒙Next 给textInput加上背景色结果把图标盖住了要实现登录的用户框和密码框，采用stack来实现input框前加图标，但是修改input的背景色图标就被盖住了，怎么解决

附上代码

Stack({
  alignContent: Alignment.Start
}) {
  Image($r('app.media.user'))
    .width(20)
    .backgroundColor("#fff")
  TextInput({
    placeholder: '账号',
    controller: this.controller,
    text: this.user
  })
    .padding({ left: 30 })
    .placeholderFont({ size: 20, weight: 500 })
    .width(270)
    .type(InputType.Normal)
    .height(60)
    .backgroundColor("#fff")
    .borderRadius(5)
    .maxLength(100)
    .onChange((value) => {
      this.user = value
    })
}
.border({ width: 1, color: '#ffc6c1c1' })
.height(65)
.margin({ top: 1 })

没改之前好好的

更多关于HarmonyOS 鸿蒙Next 给textInput加上背景色结果把图标盖住了的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼•3 天前

@Entry @Component struct Page86 { @State user: string = ‘Hello World’; @State leftWidth: number = 20

build() { Row() { Column() { Stack({ alignContent: Alignment.Start }) { Image($r(‘app.media.icon’)) .width(this.leftWidth) .backgroundColor("#fff") TextInput({ placeholder: ‘账号’, text: this.user }) .padding({ left: 30 }) .placeholderFont({ size: 20, weight: 500 }) .width(270) .type(InputType.Normal) .height(60) .backgroundColor("#ff0000") .borderRadius(5) .margin({ left: this.leftWidth }) .maxLength(100) .onChange((value) => { this.user = value }) } .border({ width: 1, color: ‘#ffc6c1c1’ }) .height(65) .margin({ top: 1 }) } .width(‘100%’) } .height(‘100%’) } }

更多关于HarmonyOS 鸿蒙Next 给textInput加上背景色结果把图标盖住了的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼•3 天前

在HarmonyOS中，TextInput组件的背景色覆盖图标的问题通常是由于布局层级或样式设置不当导致的。TextInput默认情况下会覆盖其子组件，包括图标。要解决这个问题，可以通过调整TextInput的background属性或使用Stack组件来重新排列布局。

使用Stack组件：将TextInput和图标放在Stack组件中，确保图标在TextInput之上。例如：

<Stack>
    <TextInput background="your_background_color" />
    <Image src="your_icon_path" />
</Stack>

调整TextInput的background属性：如果不需要完全覆盖背景，可以使用半透明颜色或渐变背景，避免完全遮挡图标。例如：
```
<TextInput background="rgba(255, 255, 255, 0.5)" />
```
使用padding或margin：通过设置TextInput的padding或margin，为图标留出空间，避免被背景色覆盖。例如：
```
<TextInput background="your_background_color" padding="10" />
```

通过这些方法，可以确保TextInput的背景色不会覆盖图标。

h691938207 3楼•3 天前

在HarmonyOS鸿蒙Next中，为TextInput添加背景色时，如果图标被覆盖，可以通过调整布局层级或使用Stack组件来解决。将图标放在TextInput的上层，确保图标不会被背景色遮挡。例如：

<Stack>
  <TextInput style={{ backgroundColor: 'gray' }} />
  <Image src="icon.png" style={{ position: 'absolute', left: 10, top: 10 }} />
</Stack>

这样，图标将显示在TextInput之上，不会被背景色覆盖。