HarmonyOS 鸿蒙Next中TextInput的padding使用lpx后无效

HarmonyOS 鸿蒙Next中TextInput的padding使用lpx后无效

TextInput({ placeholder: '请输入手机号', text: this.phone })
  .placeholderColor(colorInfo.inputPlaceholder)
  .backgroundColor('#fff')
  .borderRadius(0)
  .fontSize('16lpx')
  .type(InputType.PhoneNumber)
  .fontColor(colorInfo.blackTwo)
  .maxLength(11)
  .onChange(value => {
    this.phone = value;
  })
  .backgroundColor('red')
  .padding({ bottom: "10lpx" })

TextInput的内边距使用lpx后启动无效，当进行热重载后生效

更多关于HarmonyOS 鸿蒙Next中TextInput的padding使用lpx后无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

尊敬的开发者，您好！感谢您的反馈，问题正在加速处理中，还请关注后续版本，感谢您的理解与支持

更多关于HarmonyOS 鸿蒙Next中TextInput的padding使用lpx后无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


开发者您好，这边真机使用mate 60 pro 5.1.0.150(SP10C00E128R5P1log) 、IDE使用5.0.13.200版本，无法复现您的问题，即使不使用热重载，直接启动运行代码也是可以生效的。

示例代码如下：

@Entry
@Component
struct Index {
  @State message: string = "hello";
  @State phone: string = 'XXXXXXXXXX'

  build() {
    Row() {
      TextInput({ placeholder: '请输入手机号', text: this.phone })
        .placeholderColor('请输入相关信息')
        .backgroundColor('#fff')
        .borderRadius(0)
        .fontSize('16lpx')
        .type(InputType.PhoneNumber)
        .width("50%")
        .maxLength(11)
        .onChange(value => {
          this.phone = value;
        })
        .height(50)
        .backgroundColor('red')
        .padding({ bottom: "10lpx" })

      TextInput({ placeholder: '请输入手机号', text: this.phone })
        .placeholderColor('请输入相关信息')
        .backgroundColor('#fff')
        .borderRadius(0)
        .fontSize('16lpx')
        .type(InputType.PhoneNumber)
        .width("50%")
        .maxLength(11)
        .onChange(value => {
          this.phone = value;
        })
        .height(50)
        .backgroundColor('red')
        .padding({ bottom: "10px" })
    }
  }
}

麻烦您这边提供下真机的详细版本号吧：例如：5.1.0.150(XXXXXX) 和 详细的IDE版本。

真机版本 5.1.0.150（SP10C00E128R2P1patch03）

当前版本：DevEco Studio 6.0.0 Release

构建版本：6.0.0.858

他仅在windowStage.loadContent(‘pages/Index’ 进入的页面出现，

TextInput({ placeholder: '请输入手机号' })
  .backgroundColor('blue')
  .borderRadius(0)
  .fontSize('16lpx')
  .type(InputType.PhoneNumber)
  .padding({
    bottom: '8lpx',
    top: 0,
    left: 0,
    right: 0,
  })

Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  TabContent() {
    Job()
  }.tabBar(this.TabBuilder(0, '找工作', '/image/job.png', '/image/job_cur.png'))

  TabContent() {
    Column().width('100%').height('100%').backgroundColor('#fff')
  }.tabBar(this.TabBuilder(1, '消息', '/image/message.png', '/image/message_cur.png'))

  TabContent() {
    Column().width('100%').height('100%').backgroundColor('#fff')
  }.tabBar(this.TabBuilder(2, '简历', '/image/mins.png', '/image/mins_cur.png'))

  TabContent() {
    Column().width('100%').height('100%').backgroundColor('#fff')
  }.tabBar(this.TabBuilder(3, '我的', '/image/my.png', '/image/my_cur.png'))
}

在windowStage.loadContent(‘pages/Index’ 写了一个蓝色的 在Tabs里第一个组件中写了一个红色的 蓝色的未生效 红色的正常

使用了二个设备进行测试，都是一样的效果。 no 12 u Api版本5.0.5（17） me60 p Api版本5.0.5（17）

在HarmonyOS Next中，TextInput组件使用lpx单位设置padding可能不生效，原因是lpx为逻辑像素单位，在不同屏幕密度下会自动缩放，但TextInput对该单位支持存在限制。建议改用px或百分比单位直接设置padding属性，例如padding: 10px。若需适配多设备，可通过资源文件定义不同屏幕密度的px值。此问题属于组件样式兼容性范畴，需检查鸿蒙SDK版本是否支持当前单位配置。

在HarmonyOS Next中，TextInput组件使用lpx单位设置padding时出现热重载后才生效的问题，通常与布局计算时机有关。lpx是逻辑像素单位，其实际值依赖设备屏幕密度，可能在初始渲染时未完成解析。

建议检查以下两点：

  1. 确认ArkTS编译器版本，部分早期版本存在lpx单位初始化渲染兼容性问题
  2. 尝试将padding值改为数值类型测试：.padding({ bottom: 10 })

若问题仍存在，可改用vp（虚拟像素）单位：.padding({ bottom: '10vp' })，vp单位在布局计算中具有更好的实时性。

注意避免在padding中混用单位类型，保持样式单位一致性可减少布局计算异常。

回到顶部