新建界面布局 HarmonyOS 鸿蒙Next

新建界面布局 HarmonyOS 鸿蒙Next 为什么我在创建图片文本框等组件的时候 他们会互相挤 而且开发预览的屏幕和我测试的真机屏幕分辨率不一样 界面总是显示的乱起八糟怎么办

1 回复

更多关于新建界面布局 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中新建界面布局，通常需要使用XML或ETS（Extensible TypeScript）语言来定义UI组件及其布局。以下是基于ETS语言新建界面布局的基本步骤和示例：

步骤：

  1. 创建页面目录和文件： 在项目的entries目录下，新建一个页面目录（如MyPage），并在其中创建一个.ets文件（如MyPage.ets）。

  2. 定义页面布局： 在.ets文件中，使用ETS语言定义UI组件和布局。例如，可以创建一个简单的Flex布局，包含一些基础组件。

示例代码：

@Entry
@Component
struct MyPage {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello, HarmonyOS!')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      
      Button('Click Me')
        .onClick(() => {
          console.log('Button clicked!')
        })
    }
  }
}

注意事项：

  • 确保@Entry装饰器用于标识页面入口。
  • 使用Flex布局容器来组织子组件。
  • 可以通过修改组件的属性来调整其样式。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部