鸿蒙开发之创建Item视图

原创 于 2025-05-10 16:56:55 发布
· 709 阅读 · 11 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为

介绍

在接下来的两节中，我们将学习如何使用网格布局和列表布局展示赋能套件和本篇文档对应的教程内容。

在本节中，您将学习如何构建网格组件单个item视图。

以及如何构建列表组件单个item视图。

您可以选择从上一教程结束时构建完成的项目开始，也可以直接运行03_StartingPoint文件夹中的项目。

根据教程中的提示使用03_Resources文件夹中的文件。

如果您想要自行探索，可以直接打开03_Complete文件夹中的项目并浏览代码。

项目文件下载

下载项目文件并开始构建本项目。按照以下步骤操作

03_BuildItem.zip

创建“赋能套件”网格视图Item

观察“赋能套件”网格视图，可以看到它由文章标题、文章简介和文章配图组成，我们将分别建立三个组件并将它们组合起来构建完整视图。

Step 1

在src/main/ets/pages目录下的Index.ets文件中，创建命名为EnablementItem的自定义组件，并用@Preview装饰器装饰，以便单独预览组件。

 

  1. // src/main/ets/pages/Index.ets
  3. @Entry
  4. @Component
  5. struct Index {
  6. // ...
  7. }
  9. @Preview
  10. @Component
  11. struct EnablementItem {
  12. build() {
  14. }
  15. }
 

No Preview
 

Step 2
 

将03_Resources文件夹中的“enablement_pic1.png”放置在entry/src/main/resources/base/media路径下。
 

 

 

Step 3
 

在组件中定义标题（title）和简介（brief）的类型都是string，赋值分别为“HarmonyOS第一课” 和 “基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验”。
 

在这里，定义它们为private类型，因为这两个值仅在本组件内做示例文本。
 

 

  1. @Preview
  2. @Component
  3. struct EnablementItem {
  4. private title: string = 'HarmonyOS第一课';
  5. private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';
  7. build() {
  9. }
  10. }
 

No Preview
 

当前教程为了方便教学，在代码中直接使用了变量对字符串进行了赋值。但是实际开发中，应该将资源文件，如字符串、图片、音频等统一存放于resources目录下，例如src/main/resources/base/element/string.json目录下存放string字符串。然后使用Resource资源引用类型， 通过 "$r('app.type.name')"的方式引用，具体可以参考：资源访问。
 

使用Resource资源便于后续使用和维护，比如多端适配和国际化。
 

Step 4
 

观察视图，Image组件和两个Text组件沿垂直方向布局，
 

 

 

我们用Column组件作为这个视图的最外层容器。在Column组件中添加Text组件和Image组件。
 

 

  1. @Preview
  2. @Component
  3. struct EnablementItem {
  4. private title: string = 'HarmonyOS第一课';
  5. private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';
  7. build() {
  8. Column() {
  9. Image('')
  10. Text('')
  11. Text('')
  12. }
  13. }
  14. }
 

No Preview
 

使用$r的方式给Image组件设置图片资源，设置图片宽度为100%，即宽度与根容器Column保持一致。
 

设置填充效果为cover模式，即保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
 

 

  1. @Preview
  2. @Component
  3. struct EnablementItem {
  4. private title: string = 'HarmonyOS第一课';
  5. private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';
  7. build() {
  8. Column() {
  9. Image($r('app.media.enablement_pic1'))
  10. .width('100%')
  11. .objectFit(ImageFit.Cover)
  12. Text('')
  13. Text('')
  14. }
  15. }
  16. }
 

Preview
 

使用前面定义的变量title和brief，给Text组件设置文本信息，可以看到图片和文本按照垂直方向排列。
 

 

  1. @Preview
  2. @Component
  3. struct EnablementItem {
  4. private title: string = 'HarmonyOS第一课';
  5. private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';
  7. build() {
  8. Column() {
  9. Image($r('app.media.enablement_pic1'))
  10. .width('100%')
  11. .objectFit(ImageFit.Cover)
  12. Text(this.title)
  13. Text(this.brief)
  14. }
  15. }
  16. }
 

Preview
 

Step 5
 

设置根组件宽度为160，高度为169，并设置组件四角的圆角值为16。
 

为整个组件添加白色背景（Color.White）。
 

 

  1. @Preview
  2. @Component
  3. struct EnablementItem {
  4. private title: string = 'HarmonyOS第一课';
  5. private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';
  7. build() {
  8. Column() {
  9. Image($r('app.media.enablement_pic1'))
  10. .width('100%')
  11. .objectFit(ImageFit.Cover)
  12. Text(this.title)
  13. Text(this.brief)
  14. }
  15. .width(160)
  16. .height(169)
  17. .borderRadius(16)
  18. .backgroundColor(Color.White)
  19. }
  20. }
 

Preview
 

Step 6
 

设置图片高度为96，并设置图片左上角和右上角圆角值为16。这是由于图片填充效果为cover模式，对图片单独设置圆角以使之与父容器Column圆角一致。
 

 

  1. @Preview
  2. @Component
  3. struct EnablementItem {
  4. private title: string = 'HarmonyOS第一课';
  5. private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';
  7. build() {
  8. Column() {
  9. Image($r('app.media.enablement_pic1'))
  10. .width('100%')
  11. .objectFit(ImageFit.Cover)
  12. .height(96)
  13. .borderRadius({
  14. topLeft: 16,
  15. topRight: 16
  16. })
  17. Text(this.title)
  18. Text(this.brief)
  19. }
  20. .width(160)
  21. .height(169)
  22. .borderRadius(16)
  23. .backgroundColor(Color.White)
  24. }
  25. }
 

Preview
 

接下来给Text组件添加属性，textOverFlow属性设置文本超长时的显示方式，在这里我们设置它的值为Ellipsis，表示超长时使用省略号替代。
 

maxLines属性设置文本的最大行数，我们设置title最多显示一行，brief最多显示两行。
 

到这里我们完成了“赋能套件介绍”网格布局Item的创建。
 

 

  1. @Preview
  2. @Component
  3. struct EnablementItem {
  4. private title: string = 'HarmonyOS第一课';
  5. private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';
  7. build() {
  8. Column() {
  9. Image($r('app.media.enablement_pic1'))
  10. .width('100%')
  11. .objectFit(ImageFit.Cover)
  12. .height(96)
  13. .borderRadius({
  14. topLeft: 16,
  15. topRight: 16
  16. })
  17. Text(this.title)
  18. .height(19)
  19. .width('100%')
  20. .fontSize(14)
  21. .textAlign(TextAlign.Start)
  22. .textOverflow({ overflow: TextOverflow.Ellipsis })
  23. .maxLines(1)
  24. .fontWeight(400)
  25. .padding({ left: 12, right: 12 })
  26. .margin({ top: 8 })
  27. Text(this.brief)
  28. .height(32)
  29. .width('100%')
  30. .fontSize(12)
  31. .textAlign(TextAlign.Start)
  32. .textOverflow({ overflow: TextOverflow.Ellipsis })
  33. .maxLines(2)
  34. .fontWeight(400)
  35. .fontColor('rgba(0, 0, 0, 0.6)')
  36. .padding({ left: 12, right: 12 })
  37. .margin({ top: 2 })
  38. }
  39. .width(160)
  40. .height(169)
  41. .borderRadius(16)
  42. .backgroundColor(Color.White)
  43. }
  44. }
 

Preview
 

创建“入门教程”列表视图Item
 

观察入门教程介绍视图，可以看到它同样由文章标题、文章简介和文章配图组成，但与赋能套件介绍的布局有所差异，我们将分别建立三个组件并将它们组合起来构建完整视图。
 

Step 1
 

在src/main/ets/pages目录下的Index.ets文件中，创建名为TutorialItem的自定义组件，并用@Preview装饰器装饰。同时注释掉前面创建的EnablementItem组件的@Preview注解，方便单独预览TutorialItem组件。
 

 

  1. // @Preview
  2. @Component
  3. struct EnablementItem {
  4. // ...
  5. }
  7. @Preview
  8. @Component
  9. struct TutorialItem {
  10. build() {
  12. }
  13. }
 

No Preview
 

Step 2
 

在组件中定义标题（title）和简介（brief）。它们的类型都是string，赋值分别为“Step1 快速入门介绍” 和 “本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 ”。
 

在这里，定义它们为private类型，因为这两个值仅在本组件内作示例文本。
 

 

  1. @Preview
  2. @Component
  3. struct TutorialItem {
  4. private title: string = 'Step1 快速入门介绍';
  5. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  7. build() {
  9. }
  10. }
 

No Preview
 

Step 3
 

观察视图，布局整体为左右布局，左边为两个文本，这个两个文本沿垂直方向排列。
 

 

 

所以我们可以最外层使用Row容器，使文本和图片左右排列。左边文本可以使用Column容器垂直排列title和brief文本。
 

 

  1. @Preview
  2. @Component
  3. struct TutorialItem {
  4. private title: string = 'Step1 快速入门介绍';
  5. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  7. build() {
  8. Row() {
  9. Column() {
  10. Text('')
  11. Text('')
  12. }
  13. Image('')
  14. }
  15. }
  16. }
 

No Preview
 

使用$r的方式给Image组件设置图片资源，设置图片高度为64、宽度为108。
 

使用objectFit属性设置填充效果为cover模式，即保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
 

 

  1. @Preview
  2. @Component
  3. struct TutorialItem {
  4. private title: string = 'Step1 快速入门介绍';
  5. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  7. build() {
  8. Row() {
  9. Column() {
  10. Text('')
  11. Text('')
  12. }
  13. Image($r('app.media.enablement_pic1'))
  14. .objectFit(ImageFit.Cover)
  15. .height(64)
  16. .width(108)
  17. }
  18. }
  19. }
 

Preview
 

使用前面定义的变量title和brief，给Text组件设置文本信息，可以看到图片和文本按照垂直方向排列。
 

 

  1. @Preview
  2. @Component
  3. struct TutorialItem {
  4. private title: string = 'Step1 快速入门介绍';
  5. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  7. build() {
  8. Row() {
  9. Column() {
  10. Text(this.title)
  11. Text(this.brief)
  12. }
  14. Image($r('app.media.enablement_pic1'))
  15. .objectFit(ImageFit.Cover)
  16. .height(64)
  17. .width(108)
  18. }
  19. }
  20. }
 

Preview
 

包裹文本的Column容器高度设为100%，设置layoutWeight属性，取值为1，表示它们在任意尺寸的设备下自适应占满剩余空间。
 

可以看到图片和文本按照垂直方向排列。
 

 

  1. @Preview
  2. @Component
  3. struct TutorialItem {
  4. private title: string = 'Step1 快速入门介绍';
  5. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  8. build() {
  9. Row() {
  10. Column() {
  11. Text(this.title)
  12. Text(this.brief)
  13. }
  14. .height('100%')
  15. .layoutWeight(1)
  17. Image($r('app.media.enablement_pic1'))
  18. .objectFit(ImageFit.Cover)
  19. .height(64)
  20. .width(108)
  21. }
  22. }
  23. }
 

Preview
 

Step 4
 

设置Row容器宽度为“100%”，高度为88，并设置组件四角的圆角值为16。为整个组件添加白色背景（Color.White）。同时设置向内边距为12，内部容器顶端对齐。
 

 

  2. @Preview
  3. @Component
  4. struct TutorialItem {
  5. private title: string = 'Step1 快速入门介绍';
  6. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  8. build() {
  9. Row() {
  10. Column() {
  11. Text(this.title)
  12. Text(this.brief)
  13. }
  14. .layoutWeight(1)
  16. Image($r('app.media.enablement_pic1'))
  17. .objectFit(ImageFit.Cover)
  18. .height(64)
  19. .width(108)
  20. }
  21. .width('100%')
  22. .height(88)
  23. .borderRadius(16)
  24. .backgroundColor(Color.White)
  25. .padding(12)
  26. .alignItems(VerticalAlign.Top)
  27. }
  28. }
 

Preview
 

Step 5
 

设置图片圆角值为16。并设置Column容器alignItems属性为Start，表示内部子组件向左对齐，并设置右侧margin值为12，表示容器与Image组件相距12vp。
 

 

  1. @Preview
  2. @Component
  3. struct TutorialItem {
  4. private title: string = 'Step1 快速入门介绍';
  5. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  7. build() {
  8. Row() {
  9. Column() {
  10. Text(this.title)
  11. Text(this.brief)
  12. }
  13. .height('100%')
  14. .layoutWeight(1)
  15. .alignItems(HorizontalAlign.Start)
  16. .margin({ right: 12 })
  18. Image($r('app.media.enablement_pic1'))
  19. .objectFit(ImageFit.Cover)
  20. .height(64)
  21. .width(108)
  22. .borderRadius(16)
  23. }
  24. .width('100%')
  25. .height(88)
  26. .borderRadius(16)
  27. .backgroundColor(Color.White)
  28. .padding(12)
  29. .alignItems(VerticalAlign.Top)
  30. }
  31. }
 

Preview
 

Step 6
 

接下来给Text组件添加属性，在第二章节中我们已经对Text组件的一些属性进行了介绍，这里不再说明。
 

 

  1. @Preview
  2. @Component
  3. struct TutorialItem {
  4. private title: string = 'Step1 快速入门介绍';
  5. private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';
  7. build() {
  8. Row() {
  9. Column() {
  10. Text(this.title)
  11. .height(19)
  12. .width('100%')
  13. .fontSize(14)
  14. .textAlign(TextAlign.Start)
  15. .textOverflow({ overflow: TextOverflow.Ellipsis })
  16. .maxLines(1)
  17. .fontWeight(400)
  18. .margin({ top: 4 })
  19. Text(this.brief)
  20. .height(32)
  21. .width('100%')
  22. .fontSize(12)
  23. .textAlign(TextAlign.Start)
  24. .textOverflow({ overflow: TextOverflow.Ellipsis })
  25. .maxLines(2)
  26. .fontWeight(400)
  27. .fontColor('rgba(0, 0, 0, 0.6)')
  28. .margin({ top: 5 })
  29. }
  30. .height('100%')
  31. .layoutWeight(1)
  32. .alignItems(HorizontalAlign.Start)
  33. .margin({ right: 12 })
  35. Image($r('app.media.enablement_pic1'))
  36. .objectFit(ImageFit.Cover)
  37. .height(64)
  38. .width(108)
  39. .borderRadius(16)
  40. }
  41. .width('100%')
  42. .height(88)
  43. .borderRadius(16)
  44. .backgroundColor(Color.White)
  45. .padding(12)
  46. .alignItems(VerticalAlign.Top)
  47. }
  48. }
 

Preview
 

至此，我们已经完成了“赋能套件”网格布局Item和“入门教程”列表布局Item的创建，下一节我们将介绍如何使用这两个Item构建列表。

                

        

    

  


            

                    
            


    



            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
code_shenbing

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值