第一章 新建项目与基础语法

新建项目

环境搭建

arkTS的IDE是DevEco Studio 安装过程可以参考CSDN上的其他文章，这里不再过多赘述。

新建一个空项目

打开DevEco Studio ，新建一个新项目

选择第一个，新建一个空项目，点击Next

设置项目名称SDK等，点击Finish

由于我所使用的DevEco Studio为5.0版本，API11，自动生成的代码有所区别，不过没关系，我们全部删了重写

基础语法

基本格式

以下是我删掉重写的代码，这是arkTS里面最基础的必须的几行代码

@Entry    //这个标签表示当前代码是一个页面，任何代码必须放到一个页面里才能被用户看见
@Component    //这个标签表示当前代码是一个组件
struct Index {    //代码主要编写区域
    //build外部
  build() {
    //build内部
    Column(){
      Text("你好")
    }

  }
}

@Entry标签表明当前代码是一个页面

@Component标签表明当前代码是一个组件

在arkTS里面，任何UI都是组件，Button、Text等自带的组件是组件，自定义的组件也是组件，包括页面也是组件

struct Index{}        花括号内为代码编写区域，包括两个区域build(){}外面的区域和build{}内部的区域，可以简单理解为其中build(){}内为UI组件的区域，build(){}外为数据处理区域

buid(){}内有且只有一个容器组件，容器组件包括但不限于Column/Row/Scroll/List等，取决于页面的最外层的布局

最常用的是线性布局，也就是Column和Row，Column为列布局，在父组件（由于这是一个页面，故父组件为页面）内新增一列，里面的内容从上往下布局，Row为行布局，在父组件内新增一行，里面的内容从左往右布局

详细介绍以及更多的组件介绍可以参考官方文档：👉文档中心

Text("你好")表示在页面放置了一个文本组件，文本内容为“你好”

组件

        在arkTS中，可以说UI均组件，在以上的代码中，定义了三层组件嵌套：页面=》Column=》Text，我们可以在里面继续添加其他组件，子组件的位置会根据父组件的布局规则自动布局

@Entry
@Component
struct Index {

  build() {
    Column(){
      Text("你好")
      Button("点击一下")
    }

  }
}

打开预览器查看效果：

值得一提的，并不是所有组件都能设置子组件，有些组件的子组件有一定要求具体的组件用法大家可以在官方文档中查看👉文档中心

属性

目前预览器中的画面不忍直视，我们需要给这些组件设置一些属性才能达到我们预期的效果

以下是添加属性后的代码

@Entry
@Component
struct Index {

  build() {
    Column(){
      Text("你好")
        .fontWeight(FontWeight.Bold)  //设置文本字体粗细
        .fontSize(26) //设置文本字体大小
      Button("点击一下")
        .width(100).height(60)  //设置按钮宽高
        .backgroundColor("red") //设置按钮颜色
        .onClick(()=>{  //设置按钮点击后的效果
          console.log("你点击了按钮")    //点击后日志输出文本
        })
    }
    .width("100%")  //设置容器Column的高度

  }
}

arkTS中使用"组件.属性"的方式为组件设置属性，除了通用属性外，部分组件还有很多其他属性，详情可以到官方文档中查看