HarmonyOS鸿蒙Next中怎么取消Text的默认内边距

HarmonyOS鸿蒙Next中怎么取消Text的默认内边距 目前想实现第二个控件与第一个 Text 文字下对齐，有内边距的存在，视觉效果上无法对齐。或者有其他的实现方案吗

4 回复

可以参考以下demo，设置Text高度：

Row() {
  Text() {
    Span('101')
      .fontSize(40)
      .height(20)
      .fontWeight(FontWeight.Bold)
    Span('号交流')
      .fontSize(20)
  }
  .height(40)
  .backgroundColor(0xFF0000)

  Text('慢')
    .backgroundColor(0x20AD48)
    .fontColor(Color.White)
    .fontSize(20)
    .borderRadius(2)
}
.height(20)
.alignItems(VerticalAlign.Bottom)

更多关于HarmonyOS鸿蒙Next中怎么取消Text的默认内边距的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


有内边距那就自己去掉不就行了嘛，加一个

.padding(0)

在HarmonyOS中，Text组件默认带有内边距，可以通过设置padding属性来取消默认内边距。具体方法如下：

  1. 使用padding属性：将padding设置为0，可以直接取消Text组件的内边距。

    <Text
    padding="0"
    text="Hello HarmonyOS"/>

  2. 使用paddingLeft、paddingRight、paddingTop、paddingBottom属性：如果只需要取消某个方向的内边距，可以单独设置这些属性为0。

    <Text
    paddingLeft="0"
    paddingRight="0"
    paddingTop="0"
    paddingBottom="0"
    text="Hello HarmonyOS"/>

  3. 使用style属性：可以通过style属性来统一设置Text组件的内边距。

    <Text
    style="padding: 0;"
    text="Hello HarmonyOS"/>

通过以上方法，可以取消Text组件的默认内边距，使其显示更加紧凑。

在HarmonyOS鸿蒙Next中，Text组件默认会有一定的内边距。要取消默认内边距，可以通过设置padding属性为0来实现。具体代码如下：

<Text
    ohos:padding="0"
    ohos:text="Hello HarmonyOS"
    ohos:textSize="24fp"
    ohos:width="match_content"
    ohos:height="match_content"/>

这样，Text组件的内容将紧贴边界，不再有默认的内边距。

回到顶部