#我的鸿蒙开发手记#鸿蒙开发：ArkTs 原生组件与自定义组件的打造与应用 原创

在鸿蒙应用开发的旅程中，ArkTs作为元服务和元能力开发的核心语言，其组件系统是构建丰富、交互友好界面的关键基石。深入理解并熟练运用 ArkTs 的原生组件，以及掌握自定义组件的开发与应用技巧，对于开发者打造具有独特功能和优秀用户体验的应用具有至关重要的意义。本文将详细剖析 ArkTs 原生组件的特性和使用场景，并深入讲解自定义组件的打造流程与实际应用案例。

一、ArkTs 原生组件：构建界面的基础模块

ArkTs 提供了一系列丰富的原生组件，这些组件涵盖了从基本的布局容器到复杂的交互控件，为开发者快速搭建应用界面提供了强大的支持。

（一）常见组件及其用途

1. Text 组件 ：用于在界面上显示文本内容。它支持丰富的文本样式设置，如字体大小、颜色、加粗、斜体等。例如，通过设置 fontSize、fontcolor、fontStyle 等属性，可以打造出符合设计需求的文本显示效果。

   Text('Hello, HarmonyOS!')
     .fontSize(20)
     .fontcolor(0xFF000000)
     .fontStyle(FontStyle.Italic)
   

2. Button 组件 ：实现可点击的按钮功能，是用户与应用交互的重要元素。可以自定义按钮的形状、颜色、大小以及点击事件的处理逻辑。在代码中，通过设置 onClick 事件监听器，能够实现按钮点击后的相应操作，如跳转页面、触发数据更新等。

   Button('Click Me')
     .width('50%')
     .height(50)
     .backgroundColor(0xFF3498DB)
     .onClick(() => {
       // 按钮点击事件处理逻辑
       console.log('Button clicked!');
     })
   

3. Image 组件 ：用于展示图片资源。支持设置图片的宽高、图片缩放（如 contain、cover、fill 等），以适应不同的布局需求。同时，还可以对图片进行圆角处理等样式调整。

      Image($r('app.media.app_icon'))
      .width('100%')
      .height(200)
      .objectFit(ImageFit.Fill)
      .borderRadius(10)
   

4. List 和 Grid 布局组件 ：是构建列表和网格布局的关键组件。List 组件可以高效地展示大量纵向排列的数据项，通过设置 ListItem 来定义每个列表项的样式和内容。Grid 组件则适用于将内容以网格形式排列，通过指定列数和行数，合理分配各个子元素的空间位置，实现整齐美观的布局效果。

   List({ space: 10 }) {
     ListItem() {
       // 列表项内容
       Text('Item 1')
         .fontSize(16)
     }
     ListItem() {
       Text('Item 2')
         .fontSize(16)
     }
     // 更多列表项...
   }
   .width('100%')
   .height(300)
   
    Grid() {
      GridItem() {
        Text('会议')
      }
      GridItem() {
        Text('签到')
      }
      GridItem() {
        Text('投票')
      }
      GridItem() {
        Text('打印')
      }
    }
    .rowsTemplate('1fr 1fr')
    .columnsTemplate('1fr 1fr')
   

（二）原生组件的组合与嵌套

通过合理地组合和嵌套这些原生组件，可以构建出复杂多样的界面结构。例如，在一个简单的健身计划页面，可以使用 List组件作为外层容器，每个 ListItem 中包含一个 Image 组件展示新闻图片、一个 Text 组件显示新闻标题以及一个 Button 组件用于收藏等操作。这种组合方式能够灵活地满足各种界面设计要求，充分体现了 ArkTs 原生组件的强大组合能力。

    Text('新闻标题')
        .fontColor(Color.Blue)
        .fontSize(20)
      List({ space: 10 }) {
        ListItem() {
          // 列表项内容
          Image('https://img.grtn.cn/material/mediaserver/img/2022/12/c95aefd37c07861a224e87ebf48a690c.jpg')
            .width('100%')
            .height('30%')
        }
        ListItem() {
          Image('https://img.grtn.cn/material/mediaserver/img/2022/12/c95aefd37c07861a224e87ebf48a690c.jpg')
            .width('100%')
            .height('30%')
        }
      }
      Blank()
      Button('收藏')
        .width('50%')
        .height(50)
        .backgroundColor(0xFF3498DB)
        .onClick(() => {
          // 按钮点击事件处理逻辑
          console.log('已收藏');
        })
      .width('50%')
      .height(30)

二、自定义组件：满足个性化需求的开发利器

尽管原生组件功能丰富，但在实际开发中，我们经常会遇到一些场景需要特定的功能和样式，这时就需要开发自定义组件来满足个性化的需求。

（一）自定义组件的创建步骤

1. 定义组件结构 ：在一个新的 .ets 文件中，使用@Component注解来进行组件的注册，以便更好的在别的文件下引用.例如：

   @Preview
   @Component
   export struct MyCom {
   @State mes: string = '这是一个自定义组件'
   
   build() {
   Column() {
    Text(this.mes)
      .fontSize(20)
      .width(200)
      .height(20)
      .textAlign(TextAlign.Center)
      .fontColor('#ccc')
      .backgroundColor(Color.White)	// 组件的背景颜色设置为白色
   }
   }
   }
   
   

2. 在index文件里面调用 : 在index文件下对组件定义的相关内容，不会改变组件内部的东西，只是放大和缩小而已 例如：

   import { MyCom } from '../components/MyCom'
   
   @Entry
   @Component
   struct Index {
    build() {
     Column() {
    MyCom()
   }
   .width('100%')
   .backgroundColor('#BFECFF')//将整个Column设置为#BFECFF颜色，但是并没有改变组件原来的白色
   .height(50)
   .justifyContent(FlexAlign.Center)
   }
   }
   

（二）自定义组件的成员变量

1. 为了更好的让自定义组件灵活使用，ArkTS允许对自定义组件里面的成员变量进行赋值，但是不允许对成员函数赋值，如果要改变函数，则需要使用箭头函数的形式来调用函数
   示例：

@Preview
@Component
export default struct HelloComponent {
  @State mes: string = '这是一个可以传参的组件'
  showDialog = () => {
  }

  build() {
    Column({ space: 10 }) {
      Text(this.mes)
      Button('点击按钮').onClick(this.showDialog)  // 点击按钮出发showDialog成员变量
    }
    .width("100%")
    .height(100)
    .border({
      width: 1
    })
    .padding(5)
    .borderRadius(10)
    .justifyContent(FlexAlign.Center)
  }
}

import HelloComponent from '../components/HelloComponent'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column({ space: 15 }) {
        HelloComponent()
          .width(200)
        HelloComponent({ mes: '你好世界' })  // 上面两个没有定义showDialog部分，所以点击按钮不会有反应
          .width(200)
        HelloComponent({	// 这个组件点击按钮就有反应，出现一个dailog
          mes: '自定义成员的箭头函数', showDialog() {
            AlertDialog.show({
              message: '这是一个自定义传承的箭头函数'		
            })
          }
        })
          .width(200)
      }
      .width('100%')
      .backgroundColor('#D4F6FF')
      .height(500)
      .justifyContent(FlexAlign.Center)
    }
  }
}

2. 使用@BuilderParams来传递UI组件 ：在组件中提供一个区域，用于父组件随意构造，当父组件没有进行构造的时候，子组件会使用默认值去填充那块区域，类似与Vue的插槽
   示例：

@Preview
@Component
export default struct MyPanel {
  @State title: string = ''
  @State next: string = ''
  // 构造一个箭头函数，表名这是一个可以存入结构的地方，并且默认结构是defBuilder
  @BuilderParam ContentBuilder: () => void = this.defBuilder

  //创建默认结构，同时方便后面引用，其实本质就是创造了一个插槽
  @Builder
  defBuilder() {
    Text('默认文本')
  }

  build() {
    Column({ space: 10 }) {
      Row() {
        Text(this.title)
        Text(this.next)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .padding(10)
      .width("90%")
      .borderWidth({
        bottom: 1
      })

      Column() {
        this.ContentBuilder()// 存放父组件传过来的结构
    }
    .backgroundColor(Color.White)
    .height(200)
    .padding(20)
    .borderRadius(25)
  }
}

父组件调用

import MyPanel from '../components/MyPanel'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column({ space: 15 }) {
      	 // 直接调用，这时候子组件的Column区域就会显示默认的结构，即一个文本内容
         MyPanel({ title: '我的收藏', next: '收藏内容 >' })
        
         // 覆盖调用，大括号里面的东西就会显示父组件自定义的内容，同时会放在子组件的Column区域
         MyPanel({ title: '我的订单', next: '全部订单 >' }) {
          Text('自定义默认内容')
          Text('自定义默认内容')
          Text('自定义默认内容')

        }
      }
      .width('100%')
      .backgroundColor('#D4F6FF')
      .height(500)
      .justifyContent(FlexAlign.Center)
    }
    .width("100%")
  }
}

在鸿蒙开发的实践中，深入掌握 ArkTs 原生组件的特性和使用技巧，以及熟练开发和应用自定义组件，是构建高质量应用的关键所在。不断探索和创新组件的开发与应用方式，将为鸿蒙生态的应用开发带来更多可能性和精彩作品。