HarmonyOS 鸿蒙Next中TextArea设置对齐不起效

HarmonyOS 鸿蒙Next中TextArea设置对齐不起效 cke_361.png

大佬们,textarea设置了居左,为什么没有对齐呢


更多关于HarmonyOS 鸿蒙Next中TextArea设置对齐不起效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

TextArea这个组件本身就存在内部的padding，需要楼主手动将padding置为0，就能直接靠坐显示

TextArea({
  text: 'afsafasfasfas21dfadsf1asdf12asdf1ads2f1ads21fs2daf12sadf12sda1f2sdaf12ads1f2sda1f2sa1d2f12asdf12sad1fs2df1asdfsa'
})
  .width('100%')
  .textAlign(TextAlign.Start)
  .padding(0)
  .borderRadius(0)

更多关于HarmonyOS 鸿蒙Next中TextArea设置对齐不起效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


背景知识：

使用 TextArea 时出现有边距情况，是因为控件的本身是有默认值的。如下：

cke_6351.png

问题解决：

示例代码：

@Entry
@Component
struct TextAreaPage {
    @State message: string =
        '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容';

    build() {
        Column() {
            Text("内容")
                .fontSize(20)
                .fontColor(Color.Black)
                .fontWeight(FontWeight.Bold)
                .textAlign(TextAlign.Center)

            TextArea({ text: this.message })
                .backgroundColor(Color.Blue)
                .borderRadius(0)
                .fontColor(Color.White)
                .onChange((data) => {

                })
                .fontWeight(400)
                .fontSize(18)
                .textAlign(TextAlign.Start)
                //重置边距
                .padding({
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                })
        }
        .height('100%')
        .width('100%')
    }
}

真机演示

cke_13699.png

cke_153.png

@Entry
@Component
struct TestPage {
inputContent:string = '内容naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
  build() {
    Column() {
      Text('内容：')
      TextArea({text:this.inputContent})
        .width('100%')  // 确保宽度填满父容器
        .textAlign(TextAlign.Start)  // 左对齐
        .backgroundColor(Color.Orange)
        .padding(0)
        .borderRadius(0)
    }
    .margin(30)
    .alignItems(HorizontalAlign.Start)
    .height('100%')
  }
}

.padding({
  left: 0,
})

.padding(0)

在鸿蒙Next中，TextArea组件默认使用左对齐。若设置对齐方式无效，请检查是否在TextArea的textAlign属性中正确设置了left、center或right值。确保该属性未被其他样式覆盖，且代码中未使用不兼容的布局属性。部分版本可能存在对齐属性适配问题，建议查阅官方文档确认API使用方式。

从截图来看，TextArea的对齐问题可能是由于默认的内边距（padding）或外边距（margin）导致的。建议检查并调整以下属性：

  1. 使用 padding: 0 和 margin: 0 清除默认样式。
  2. 通过 text-align: left 确保文本对齐方式正确。
  3. 确认父容器布局是否影响对齐，例如Flex或Grid布局可能导致偏移。

如果问题仍然存在，可以尝试通过开发者工具检查元素样式，确认是否有其他CSS规则覆盖了对齐设置。

回到顶部