HarmonyOS鸿蒙Next中如何实现垂直排列的文本

HarmonyOS鸿蒙Next中如何实现垂直排列的文本 由于考虑到有英文的情况，所以仅仅像这篇里面设置下宽度是不可行的，有什么更好的办法实现垂直排列文本呢

6 回复

但是这种方法性能不好，只适用于短文本，还是需要官方尽快实现需求

@Entry
@Component
struct VerticalText {
  private text: string = '通用文本test测试';
  @State message: string[] = [];

  aboutToAppear(): void {
    this.message = this.text.split('');
  }

  build() {
    Column() {
      ForEach(this.message, (item: string) => {
        if (isChinese(item)) {
          Text(item)
            .fontSize(14)
        } else {
          Text(item)
            .fontSize(14)
            .rotate({
              x: 0,
              y: 0,
              z: 1,
              centerX: '50%',
              centerY: '50%',
              angle: 90
            })
        }
      })
    }
  }
}

function isChinese(text: string): boolean {
  for (let i = 0; i < text.length; i++) {
    const charCode = text.charCodeAt(i);
    // 汉字字符的Unicode范围大致是从4E00到9FA5
    if (charCode >= 0x4E00 && charCode <= 0x9FA5) {
      return true;
    }
  }
  return false;
}

更多关于HarmonyOS鸿蒙Next中如何实现垂直排列的文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


的确是这样，

你希望英文的时候是怎么垂直排列的呢

像 是 横 向 的 文 本 ， 然 后 旋 转 了 90 度，

在HarmonyOS鸿蒙Next中，实现垂直排列的文本可以通过使用Text组件和Stack布局来实现。Stack布局允许子组件在垂直方向上堆叠，而Text组件可以设置文本内容和样式。具体步骤如下：

  1. 创建Stack布局：Stack布局是鸿蒙中用于堆叠子组件的容器。你可以通过Stack组件来创建一个垂直排列的布局。

  2. 添加Text组件：在Stack布局中添加多个Text组件，每个Text组件代表一行垂直排列的文本。

  3. 设置文本样式：通过Text组件的属性设置文本的样式，如字体大小、颜色等。

示例代码如下：

import { Stack, Text } from '@ohos/arkui';

class VerticalTextExample extends Component {
  build() {
    return Stack() {
      Text('第一行文本')
        .fontSize(20)
        .fontColor('#000000');
      Text('第二行文本')
        .fontSize(20)
        .fontColor('#000000');
      Text('第三行文本')
        .fontSize(20)
        .fontColor('#000000');
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

在这个示例中，Stack布局包含了三个Text组件，每个Text组件代表一行垂直排列的文本。通过justifyContent(FlexAlign.Center)可以将文本在垂直方向上居中对齐。

在HarmonyOS鸿蒙Next中，可以使用Text组件与Column布局容器实现垂直排列的文本。Column组件默认将子组件垂直排列，将多个Text组件放入Column中即可实现垂直排列。示例代码如下：

struct VerticalTextExample {
  build() {
    Column() {
      Text('第一行文本')
        .fontSize(20)
      Text('第二行文本')
        .fontSize(20)
      Text('第三行文本')
        .fontSize(20)
    }
    .alignItems(HorizontalAlign.Start) // 设置文本对齐方式
    .padding(10)
  }
}

通过Column容器，可以轻松实现文本的垂直排列。

回到顶部