#星计划#梅科尔工作室HOS-我与鸿蒙的故事原创

梅科尔孙琳

发布于 2024-1-27 22:20

浏览

0收藏

1.环境：OpenHarmony 4.0

2.故事简介：

2022寒假第一次接触鸿蒙开发技术，并且记录了很多学习笔记。

例如：

①list组件:

由list容器组件和listitem容器组件构成，list是一个大容器，listitem是大容器里的小容器。

List(){
    ListItem(){
        Text(“示例1”)
        .fontSize(30).width(“90%”).height(“10%”)
        }
ListItem(){
    Text(“示例2”)
    .fontSize(30).width(“90%”).height(“10%”)
    }
}

②父子组件：

子组件导出用export语句，父组件导入用import｛子组件名称｝ from“子组件文件相对路径”，双向数据绑定，改变任何一方数据时，两方数据都会变为改变的一方数据，子组件中数据用@Link修饰，父组件中用@State修饰，在子组件接口中数据用$修饰。

Export struct zidingyi{}
Import {zidingyi} form ‘../common/component/zidingyi’
@link zizujiantext:string
@State fuzujiantext:string=”父组件”;
Zidingyi({zizujiantext:$fuzujiantext})

③UI描述规范和常用装饰器：

基础组件：Text、Button、image、Textinput，容器组件：Column、Row、Stack、List。

Column容器组件的使用（主轴方向是垂直方向），Row容器组件组件的使用（主轴方向是水平方向）。

#星计划#梅科尔工作室HOS-我与鸿蒙的故事-鸿蒙开发者社区

图表 1 UI描述规范

#星计划#梅科尔工作室HOS-我与鸿蒙的故事-鸿蒙开发者社区

图表 2 常用装饰器

④构建列表页面：

List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。设置列表排列方向：（.listDirection(Axis.Horizontal)）

@Entry
@component
struct ListDemo {
  private arr: number[] = [e, 1, 2, 3, 4, 5, 6，7, 8, 9]
  build() {
   Column() {
     List({ space: 10 }) {
       ForEach(this.arr, (item: number) =》{
          ListItem() {
              Text( ${item}^" )
                        .width(' 100%')
                        . height(100)
                        . fontsize(20)
                        . fontColor(Color .lWhite )
                        . textAlign(TextAlign. Center)
                        . borderRadius (10)
                        . backgroundCo1or(ex007DFF)
                        }
                    }，item => item)
                 }
               }
                .padding(12)
                .height(' 100% )
                .backgroundColor(exF1F3F5)
         }
    }

#星计划#梅科尔工作室HOS-我与鸿蒙的故事-鸿蒙开发者社区

图表 3 效果图

⑤使用Grid组件构建列表：

Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。

@Entry
@Component
struct GridExample {
      private arr: String[] = ['e',”1"，“2'，'3']
      build() {
				Column() {
					Grid() {
								ForEach(this.arr, (day: string) => {
										GridItem() {
															Text(day)
																	. fontsize(16)
																	. fontColor(Color .White)
																	. backgroundColor(ex0e7DFF)
																	.width( ' 100%' )
																	.height( ' 100%')
																	. textA1ign(TextAlign.Center)
															}
													}， day => day)
												}，day => day)
												. columnsTemplate('1fr 1fr 1fr 1fr')
												. rowsTemplate('1fr 1fr 1fr 1fr')
												. co1umnsGap(10)
												.rowsGap(10)
												. height (300 )
										}
										. width( '108%')
										.padding(12)
										. backgroundColord exF1F3FS)
				}
		}

#星计划#梅科尔工作室HOS-我与鸿蒙的故事-鸿蒙开发者社区

图表 4 效果图

⑥路由跳转模块：

首先需要导入router模块：

#星计划#梅科尔工作室HOS-我与鸿蒙的故事-鸿蒙开发者社区

方式一：

router.push()，跳转到指定页面。
每调用一次router.push()方法，均会新建一个页面。默认情况下，页面栈数量会加1，页面栈支持的最大页面数量为32。

示例：

router . push({
									url: ' pages /Second ',
									params: {
												src: 'Index页 面传来的数据',
									}
					})

方式二：

router.push()，分单实例模式和标准模式。

示例：

	router . push({
			url:'pages /Second'，
			params :{
					src :' Index页面传来的数据',
					}
			}，router . RouterMode . Single)

方式三：

router.replace()，即使用新的页面替换当前页面，并销毁被替换的当前页面，页面栈数量不变。

示例：

	router . push({
				url: ' pages /Second ',
				params: {
							src: 'Index页 面传来的数据',
					}
			})

方式四：

router.replace()，分单实例模式和标准模式。

示例：

router . replace({
  			url:pages/Second'，
				params: {
								src :' Index页面传来的数据'，
					}
			}，router . RouterMode . Single)

3.注意事项：

使用跳转模块时，页面栈支持的最大页面数量为32。当超过32时，便不会再跳转了，所以推荐使用router.push（）模块的单实例模式，即跳转方式中的方式二。

router.push()的单实例模式仅在API9下可以使用。在使用router.back方法时，必须要再次之前使用一次router.push()方法。当页面栈内的页面数超过数量时，可以使用router.getLength()方法获取当前页面内的页面数量，然后再,然后在使用router.clear（）方法清除页面栈。