HarmonyOS鸿蒙Next中TextInput宽度设置为auto，maxLines(1)时，内容超过父组件宽度时textAlign(TextAlign.End)不生效

HarmonyOS鸿蒙Next中TextInput宽度设置为auto，maxLines(1)时，内容超过父组件宽度时textAlign(TextAlign.End)不生效 TextInput宽度设置为auto，maxLines(1)时，内容超过父组件宽度时textAlign(TextAlign.End)不生效，我想内容超过父组件宽度时新输入的内容能全部显示，开始的内容向左移动，超出父组件部分隐藏

3 回复

我这边尝试如下demo，超出宽度时，是会自动往左移。您那边是IDE版本和手机版本是多少，我这边是在beta3的设备验证没问题。

@Entry
@Component
struct Index{
  build() {
    Column() {
      Column() {
        TextInput()
          .maxLines(1)
          .width("auto")
      }
      .width('50%')
    }
    .width("100%")
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

TextInput组件需要获取到焦点可以实现自动左滑的功能，您的代码修改如下：

TextInput({
  text: this.input,
  placeholder: "0.00"
)
  .placeholderColor($r('app.color.black'))
  .placeholderFont({ size: 24, weight: FontWeight.Regular })
  .fontSize(24)
  .fontWeight(FontWeight.Regular)
  .fontColor($r('app.color.black'))
  .maxLines(1)
  .textAlign(TextAlign.End)
  .enableKeyboardOnFocus(false) //不弹起系统键盘
  .caretColor(Color.Transparent) //不希望有光标
  .backgroundColor(Color.Transparent)
  .margin({ right: 12 })
  .padding(0)
  .id('money')
  .width('auto')
  .alignRules({
    top: { anchor: '__container__', align: VerticalAlign.Top },
    bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
    right: { anchor: '__container__', align: HorizontalAlign.End }
  })
自定义键盘点击事件加一步获焦操作。

KeyboardButton({
  text: this.numbers[7]
)
  .onClick(() => {
    this.input = this.calculator.input(this.numbers[7])
    this.getUIContext().getFocusController().requestFocus("money")
  })

更多关于HarmonyOS鸿蒙Next中TextInput宽度设置为auto，maxLines(1)时，内容超过父组件宽度时textAlign(TextAlign.End)不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，TextInput组件的宽度设置为auto且maxLines为1时，如果内容超过父组件的宽度，textAlign(TextAlign.End)可能不会按预期生效。这是因为当TextInput的宽度为auto时，其宽度会根据内容自动调整，而maxLines为1限制了文本的行数，导致文本内容在超出父组件宽度时被截断或换行，从而影响了textAlign的显示效果。要解决这个问题，可以尝试将TextInput的宽度设置为固定值或使用其他布局方式来确保textAlign(TextAlign.End)能够正确应用。

在HarmonyOS鸿蒙Next中，当TextInput的宽度设置为auto且maxLines(1)时，如果内容超过父组件宽度，textAlign(TextAlign.End)可能不会生效。这是因为auto宽度会使TextInput根据内容自动调整宽度，导致textAlign无法正确对齐。

解决方法：

  1. 固定宽度：为TextInput设置固定宽度，确保其宽度不会随内容变化。
  2. 使用TextOverflow：结合TextOverflow.ellipsis或TextOverflow.clip，确保内容超出时显示省略号或截断。

示例代码：

TextInput()
  .width('100%') // 固定宽度
  .maxLines(1)
  .textAlign(TextAlign.End)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

这样可以确保textAlign(TextAlign.End)在内容超出时仍能正确生效。

回到顶部