{
"string": [
{
"name": "entrydesc",
"value": "description"
},
{
"name": "MainAbilitydesc",
"value": "description"
},
{
"name": "MainAbilitylabel",
"value": "label"
}
]
}

• 2．引用资源

$rawfile('images/logo.jpg')

• 3．引用系统资源：

Text('您好')
.fontColor($r('sys.color.id_color_emphasize'))
.fontSize($r('sys.float.id_text_size_headline1'))
.fontFamily($r('sys.string.id_text_font_family_medium'))
.backgroundColor($r('sys.color.id_color_palette_aux1'))
Image($r('sys.media.ic_app'))
.border({color: $r('sys.color.id_color_palette_aux1'),
radius: $r('sys.float.id_corner_radius_button'),
width: 2})
.height(60)
.width(80)

• 系统资源有哪些

@Entry //入口装饰器
@Component //组件装饰器
struct MyIndexComponent {
@State mydata: string = '' //状态数据
build() { //生成器函数
//省略了构造内部组件
}
}
@Component
struct OtherComponent {
@State msg: string = ''
build() {
//构造内部组件
}
}

• 在定义的组件的生成器方法（build ()）内，可以 声明描述UI结构 ，可以在其中创建内置的布局组件和基本组件，如内置布局Row、Column，内置组件Text、Button等。

@Entry //入口装饰器
@Component //组件装饰器
struct Index{
bt_text: string = '确定'
build() {
Row() { //创建行布局
Text( "您好" ) //创建文本组件
.fontSize(50)
Button(this.bt_text) //创建按钮组件
.fontSize(30)
.margin(10)
MyComponent () //创建自定义组件
}
}
}
// 自定义组件
@Component
struct MyComponent {
build() {
//构建布局和组件
}
}

• 在生成器方法（build ()）内构建的界面组件组成是 一棵树型结构 ，组件包括 容器 和 普通 组件，容器可以认为是特殊的组件，其内部可以放置别的组件或容器，容器组件也称为布局，普通组件一般不能包含其它组件。

• 容器组件和普通组件都可以 通过调用其属性方法 进行各种属性配置，调用一般以“ . ”链式调用的方式，例如：

Row() { //构造Row布局
Image('button.png') //构造Image
.alt('over.png') //调用alt方法
.width(100) //调用width
.height(50) //调用height
}.padding(16) //设置Row的内边距

• 组件还可以 设置事件方法 ，并可以在事件方法的回调中添加组件响应逻 辑代码，实现事件监听。如为Button组件添加onClick方法，在onClick方法的回调中添加点击响应逻辑等。

Button('OK')
.onClick(()=>{
//点击处理代码
})
)

• 需要注意 ，生成器函数build( )是用来构造UI界面的，因此 不能 在其中直接定义变量或调用一般的函数，例如：

@Entry //入口装饰器
@Component //组件装饰器
struct Index{
test(){
return "OK"
}
build() {
let n: number = 1 // 错误，不允许定义变量
test() // 错误，不能直接调用函数
Column() {
Text( this.test() ) // 这里可以调用test
}
}
}

组件化

@Component // 组件装饰器
struct MyComponent { // 自定义组件
build() {
Column() { // 列容器组件
Text('Hello') // 文本组件，文字为Hello
.fontColor(Color.Red) // 字体红色
}.alignItems(HorizontalAlign.Center) // 内容居中
}
}
@Component
struct OtherComponent {
build() {
Column() {
MyComponent() //创建MyComponent 实例
Text('Hello').fontSize(20)//使用系统内置组件Text
MyComponent() //再次创建MyComponent 实例
}
}
}

@Entry
@Component
struct Index{ //该组件会被渲染和显示
build() {
Column() { //Column是系统内置容器组件
Text('Hello')
.fontColor(Color.Red)
}
}
}
@Component
struct MyText { //该组件不会被渲染和显示，但可以被引用
build() {
Column() {
Text('Good')
.fontColor(Color.Blue)
}
}
}

@Entry
@Component
struct Index {
mySize : number = 10;
@Builder // Builder装饰器
SquareText(title: string) { // 该方法可以在build中被调用
Text(title)
.width( this.mySize )
.height( this.mySize )
}
build() {
Column() {
Row() {
this.SquareText("A") // 调用被Builder装饰的方法
this.SquareText("B") // 调用被Builder装饰的方法
}
}
}
}

@Styles //通过@Styles装饰
function yourBGStyle() { 
.backgroundColor(Color.Green)
}
@Entry
@Component
struct Test {
@Styles myBGStyle() { //省略了function关键字
.backgroundColor(Color.Blue)
}
build() {
Column({ space: 10 }) {
Text("您好")
.yourBGStyle()
Text("我的")
.myBGStyle()
}
}
}

@Extend(Text) //扩展Text
function myStyle(fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
.fontStyle(FontStyle.Italic)
}
@Entry
@Component
struct Test {
build() {
Row( ) {
Text("您好")
.myStyle(16) // 调用扩展的功能
}
}
}

@Entry
@Component
struct Test {
count:number = 100
build() {
Column() { //容器组件
if (this.count < 0) {
Text('count为负数')
} else if (this.count == 0) {
Text('ccount为0')
} else { //内部嵌套if-else
if ( this.count % 2 == 0) {
Text('count是偶数').fontSize(26)
Divider().height(1)
} else {
Text('count是奇数').fontSize(26)
Divider().height(1)
}
}
}
if(this.count>100){ //错误，没有在组件容器内
Text('count超出了100')
}
}
}

• 2． 循环渲染

• 循环渲染可以批量处理组件，开发框架提供循环渲染可以迭代数组，并可以根据每个数组项创建相应的组件。

• 循环渲染可以使用 ForEach 函数

@Entry
@Component
struct MyComponent {
@State arr: string[] = ['张三', '李四', '王五']
build() {
Column() {
ForEach(
this.arr, // 参数1：数组
(item: string, index: number) => { //参数2：迭代器函数
Row() {
Text(`下标: ${index}`)
Text(`姓名：${item}`)
},
(item: string, index: number) => { //参数3：迭代器函数
return index + item //为每个数组项生成唯一
} //且持久的键值，可不写
)
}
}
}

注意：

• 条件渲染语句 必须在容器组件内 使用，某些容器组件会限制子组件的类型或数量，在将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件。例如，Grid组件的子组件仅支持GridItem组件，在Grid组件内使用if时，则if条件语句内仅允许使用GridItem组件。另外，i f条件语句可以使用状态变量。

• 循环渲染也 必须在容器组件内 使用，生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中。

• 循环渲染中 子项生成器函数的调用顺序 不一定 和 数组中的数据项相同 ，子项生成器和键值生成器函数的执行顺序也是不确定的。

修改应用名称和图标