以下涉及的项目源码地址： https://gitee.com/jiangqianghua/harmony-test
更多学习资源资源点我获取

1. 一些常用组件方法

1. 加载resource/base/element/string.json资源

Text($r("app.string.Username_label"))

2. 设置颜色
   1. Color.red
   2. “#ff00ff”
   3. 读取资源文件字体颜色 resource/base/element/color.json

.backgroundColor(Color.Red)
.backgroundColor("#00ff00")
.backgroundColor($r("app.color.start_window_background"))

3. 超出显示省略号

Text('11222222222222333333333333333333333344').fontSize(20).textOverflow({overflow: TextOverflow.Ellipsis}).maxLines(1).width(100)

4. Button形状
   1. 默认形状

    Button('按钮').type(ButtonType.Normal)  // 矩形// .type(ButtonType.Circle) // 圆形// .type(ButtonType.Capsule) // 胶囊

2. 自定义按钮，使用插槽方式

   Button(){Row(){LoadingProgress().width(50).height(50).color(Color.White)Text('登录').fontColor(Color.White)}}.width(120)

5. CheckBox使用

Row(){CheckboxGroup({group: 'favor'}).selectedColor(Color.Red).height(0).onChange((value) => {console.log(JSON.stringify(value))})Text("全选/全不选")}Row(){Row(){Checkbox({group: 'favor', name: '1'})Text('篮球')}Row(){Checkbox({group: 'favor', name: '2'})Text('足球')}Row(){Checkbox({group: 'favor', name: '3'})Text('乒乓球')}}

6. Radio组件

 Row(){Row(){Radio({group: 'favor', value: '1'}).onChange((value) => {value && console.log('1')})Text('篮球')}Row(){Radio({group: 'favor', value: '2'}).onChange((value) => {value && console.log('2')})Text('足球')}}

7. Toggle组件

Row(){Toggle({type: ToggleType.Switch,isOn: false}).selectedColor(Color.Red)Toggle({type: ToggleType.Button,isOn: false}){Text('选择')}.selectedColor(Color.Red)Toggle({type: ToggleType.Checkbox,isOn: false}).selectedColor(Color.Red)
}

8. Image

    // ets/images/a.jpgImage("images/a.jpg").width(100)Image($r("app.media.icon")).width(100)// 小图片是否有锯齿.interpolation(ImageInterpolation.High)// 需要访问网络权限 在modules.json5 下//    "requestPermissions": [//   {//     "name": "ohos.permission.INTERNET"//   }// ],Image("url").width(100)Image($r("app.media.icon")).objectFit(ImageFit.Auto)// 是否重复.objectRepeat(ImageRepeat.XY)// 黑白显示.renderMode(ImageRenderMode.Template).width(100)// 是否有锯齿，插值.interpolation(ImageInterpolation.High).onComplete((value) => {console.log(JSON.stringify(value))//{"width":114,"height":114,"componentWidth":300,"componentHeight":300,"loadingStatus":1}})

2. 像素单位

1. px 物理像素
2. vp 屏幕密度像素单位，虚拟像素 1vp约等于3px， 默认单位
3. fp 字体像素
4. lpx 视图逻辑像素单位，等比缩放，默认是720，1lpx为2px大小， 场景，根据ui稿高度还原使用
   lpx 默认值可以修改，修改在resource/base/profiles/main_pages.json

  "window": {"designWidth": 1440  // 1lpx = 1px， 如果屏幕真实是1280， 那么设置1440，也是撑满}

5. 单位转换
   1. vp2px
   2. px2vp
   3. fp2vp
   4. px2fp
   5. lpx2px

3. 线性布局

    // space 子元素间距Row({space: 10}){Text('111').layoutWeight(1).backgroundColor(Color.Red)Text('222').layoutWeight(1).backgroundColor(Color.Red)Text('333').layoutWeight(1).backgroundColor(Color.Red)}

4. 空白填充组件，把空余空间占满

Blank()

5. 层叠布局

 Stack(){Text("111").width(200).height(200).backgroundColor(Color.Red)// 设置层级.zIndex(2)Text("111").width(100).height(100).backgroundColor(Color.Yellow)
}.width('100%').height(300).backgroundColor(Color.Grey)
// 控制对齐位置
.alignContent(Alignment.TopStart)

6. 获取List控制器

  private scroll: Scroller = new Scroller();...List({scroller: this.scroll})

7. 弹性布局flex

  Flex({direction: FlexDirection.Row,justifyContent: FlexAlign.Center,// Stretch 拉伸// Baseline 文本基线对其alignItems: ItemAlign.Center}){Text("111").backgroundColor(Color.Blue).width(100).height(100)Text("222").backgroundColor(Color.Pink).width(200).height(200)Text("333").backgroundColor(Color.Brown).width(200).height(200)// 孩子单独交叉轴设置.alignSelf(ItemAlign.Start)}.width('100%').height(300).backgroundColor(Color.Gray)Flex({direction: FlexDirection.Row,justifyContent: FlexAlign.Start,// Stretch 拉伸// Baseline 文本基线对其alignItems: ItemAlign.Center,// 自动换行wrap: FlexWrap.Wrap}){Text("111").backgroundColor(Color.Blue).width(400).height(100)Text("222").backgroundColor(Color.Pink).width(100).height(100)Text("333").backgroundColor(Color.Brown).width(100).height(100)// 压缩比例.flexShrink(2)// 设置权重，瓜分剩余空间.flexGrow(1)}.width('100%').height(300).backgroundColor(Color.Gray)

8. 栅格布局GridRow 和 GridCol

1. 解决不同尺寸，动态布局的问题
2. 支持 xs（<320vp），sm(320-520), md(520-840), lg(840-1080), xl(>1080), xxl 断点

GridRow({// 排列方向// direction: GridRowDirection.RowReverse,// 间距gutter: 10,// columns 和下面span意思是一样，但是xs:1 表示小屏是一列columns: {xs:1, sm: 2, md: 4, lg: 6, xl: 8},breakpoints: {value: ['200vp', '300vp', '400vp', '500vp', '600vp']}}){ForEach(this.bgColors, (item, index) => {GridCol({// 默认12栅格，然后按照， xs：12 表示在超小屏幕，一个col就占12栅格// span: {xs:12, sm: 6, md: 4, lg: 3, xl: 2}}){Row(){Text(`${index + 1}`)}.width('100%').height('50').backgroundColor(item)}//表示一个col占6栅格，会固定死，会使得上面span不起作用// .span(6)})}

9. 网格布局 Grid

Grid(){GridItem(){Text("111")}.style()// 横跨2列.columnStart(0).columnEnd(1)GridItem(){Text("222")}.style()// 横跨2行.rowStart(0).rowEnd(1)GridItem(){Text("333")}.style()GridItem(){Text("444")}.style()GridItem(){Text("555")}.style()GridItem(){Text("666")}.style()
}
.width('100%')
.columnsGap(10)
.rowsGap(10)
.height(200)
.rowsTemplate("1fr 1fr")
.columnsTemplate("1fr 1fr 1fr")

10. 轮播组件

@Entry
@Component
struct Page_Swiper {@State message: string = 'Hello World'private swiperController: SwiperController = new SwiperController();build() {Row() {Column() {Swiper(this.swiperController){Text("111").itemStyle().backgroundColor(Color.Red)Text("222").itemStyle().backgroundColor(Color.Blue)Text("333").itemStyle().backgroundColor(Color.Brown)}.loop(false).autoPlay(true).interval(2000).indicatorStyle({size: 20,left: 0,color: Color.White}).vertical(true).onChange(index => {// 获取当前索引console.log('index = ' + index)})Button('click').onClick(() => {this.swiperController.showPrevious();})}.width('100%')}.height('100%')}
}@Extend(Text)
function itemStyle(){.width('100%').height(200).textAlign(TextAlign.Center).fontSize(30)
}

11. List布局

@Entry
@Component
struct Page_List {@State message: string = 'Hello World'@State list: string[] = ['111', '222', '333', '444', '555', '666']private listController: Scroller = new Scroller();build() {Row() {Column() {List({space: 10, scroller: this.listController}){ForEach(this.list, (item, index) => {ListItem(){Text(item)}.width('100%').height(100).backgroundColor(Color.Yellow)// 控制每个item内容的位置.align(Alignment.Start)// 侧滑.swipeAction({end: this.itemEnd(index)})})}.height(300).width('100%').backgroundColor(Color.Blue)// 控制子元素位置.alignListItem(ListItemAlign.Center)// 滚动方向.listDirection(Axis.Vertical)// 分割线.divider({strokeWidth:2,startMargin: 10,endMargin: 10,color: Color.Red})// 滚动条显示方式.scrollBar(BarState.Auto).onScrollIndex((start, end) => {if (end === this.list.length - 1) {console.log('到底了，加载新数据')}})Button('click').onClick(() => {this.listController.scrollToIndex(0)})}.width('100%')}.height('100%')}@BuilderitemEnd(index: number){Button('删除').backgroundColor(Color.Red)}
}

12. List分组布局

@Entry
@Component
struct Page_List2 {@State message: string = 'Hello World'@State cityList: Object[] = [{type: 'A',list: ['鞍山', '安顺', '安康']},{type: 'B',list: ['北京', '保定', '包头']},{type: 'C',list: ['长春', '长沙', '常德']}]build() {Row() {Column() {List({ space: 10 }) {ForEach(this.cityList, item => {ListItemGroup({header: this.header(item.type)}){ForEach(item.list, data => {ListItem(){Text(data)}.align(Alignment.Start).width('100%').height(100)})}})}.height(300).width('100%')// 粘性.sticky(StickyStyle.Header)}.width('100%')}.height('100%')}@Builderheader(type: string) {Text(type).fontSize(30)}
}

13 Tabs容器，组件导航

@Entry
@Component
struct Page_Tabs {@State message: string = 'Hello World'build() {Row() {Column() {Tabs({// 导航位置barPosition: BarPosition.Start}){TabContent(){Text('电影列表').fontSize(30)}.tabBar('电影')TabContent(){Text('影院列表').fontSize(30)}.tabBar('影院')TabContent(){Text('个人中心').fontSize(30)}.tabBar('我的')}// 当tab较多，可以设置滑动显示.barMode(BarMode.Scrollable)// 阻止滑动切换.scrollable(false)// 滚动方向// .vertical(true)// .barWidth(100)// .barHeight(200)}.width('100%')}.height('100%')}
}

14. 自定义导航

@Entry
@Component
struct Page_Tabs {@State message: string = 'Hello World'@State currentIndex: number = 0private tabbarController: TabsController = new TabsController();@BuildertabbarItem(title: string, icon: Resource, selectedIcon: Resource, index: number){Column(){Image(this.currentIndex === index ? selectedIcon : icon).size({width: 25, height: 25})Text(title).fontColor(this.currentIndex === index ? Color.Red : Color.Black)}.width('33.33%').height(50)}build() {Row() {Column() {Tabs({controller: this.tabbarController,// 导航位置barPosition: BarPosition.End}){TabContent(){Text('电影列表').fontSize(30)}.tabBar(this.tabbarItem('电影', $r("app.media.icon"), $r("app.media.icon"), 0))TabContent(){Text('影院列表').fontSize(30)}.tabBar(this.tabbarItem('影院', $r("app.media.icon"), $r("app.media.icon"), 1))TabContent(){Text('个人中心').fontSize(30)}.tabBar(this.tabbarItem('我的', $r("app.media.icon"), $r("app.media.icon"), 2))}.onChange((index) => {this.currentIndex = index})// 当tab较多，可以设置滑动显示.barMode(BarMode.Scrollable)// 阻止滑动切换// .scrollable(false)// 滚动方向// .vertical(true)// .barWidth(100)// .barHeight(200)}.width('100%')}.height('100%')}
}

15. Navigation布局

@Entry
@Component
struct Page_Nav {@State message: string = 'Hello World'@State list:Object[] = [{title: '111',content: '111'},{title: '222',content: '222'},{title: '333',content: '333'}]build() {Navigation(){List(){ForEach(this.list, item => {ListItem(){// 可以很好的自适应大屏显示NavRouter(){Text(item.title).width('100%').height(70).backgroundColor(Color.White).borderRadius(25).fontSize(20).textAlign(TextAlign.Center)NavDestination(){Text(item.content).width('100%').height('100%').backgroundColor(Color.White)}.title(item.title).backgroundColor(Color.White)}}})}}.menus([{value: "",icon: './images/a.jpg',action: () => {console.log("search")}}]).toolBar({items: [{value: "笔记",icon: './images/a.jpg',action: () => {console.log("search")}},{value: "待办",icon: './images/a.jpg',action: () => {console.log("search")}}]}).title('全部笔记').height('100%').width('100%').titleMode(NavigationTitleMode.Mini).backgroundColor(Color.White)// 显示方式.mode(NavigationMode.Auto)}
}

15. 页面动画

1. 页面内的动画
   1. 属性动画

// 属性动画
@Entry
@Component
struct Page_Animation2 {@State message: string = 'Hello World'@State myWidth: number = 100build() {Row() {Column() {Button('显式动画').onClick(() => {this.myWidth = 200})Text(this.message).width(this.myWidth).height(100).backgroundColor(Color.Grey).animation({duration: 1000, curve: Curve.Linear})}.width('100%')}.height('100%')}
}

2. 显示动画

@Entry
@Component
struct Page_Animation {@State message: string = 'Hello World'@State myWidth: number = 100@State list: string[] = ['1111', '2222', '33333', '44444']build() {Row() {Column() {Button('显式动画').onClick(() => {animateTo({duration: 1000, curve: Curve.Ease}, () => {this.myWidth = 200})})Text(this.message).width(this.myWidth).height(100).backgroundColor(Color.Grey)List(){ForEach(this.list, (item, index)=>{ListItem(){this.item(item, index)}})}.backgroundColor(Color.Blue)}.width('100%')}.height('100%')}@Builderitem(item: string, index: number) {Row(){Text(item)Button('del').onClick(()=>{animateTo({duration: 1000, curve: Curve.Linear}, ()=>{this.list.splice(index, 1)})})}}
}

3. 组件内转场动画

@Entry
@Component
struct Page_Animation3 {@State message: string = 'Hello World'@State isShow: boolean = true@State list: string[] = ['1111', '2222', '33333', '44444']build() {Row() {Column() {// Column(){//   Button('折叠/展开').onClick(()=> {//     animateTo({duration: 1000, curve: Curve.Linear}, ()=>{//       this.isShow = !this.isShow//     })//   })//   if (this.isShow) {//     Text('侧边栏')//       .width(200)//       .height(100)//       .backgroundColor(Color.Blue)//       .transition({//         type: TransitionType.All,//         translate: {x: -200, y: 0},//         opacity: 0//       })//   }// }.width("100%")// .height(300)// .backgroundColor(Color.Grey)// .alignItems(HorizontalAlign.Start)}List(){ForEach(this.list, (item, index)=>{ListItem(){this.item(item, index)}.transition({type: TransitionType.Delete,translate: {x: 200},scale: {x:0, y: 0}}).transition({type: TransitionType.Insert,translate: {y: 100}})}, item=>item)}.backgroundColor(Color.Blue).width('100%').height(400)}.height('100%')}@Builderitem(item: string, index: number) {Row(){Text(item)Button('del').onClick(()=>{animateTo({duration: 1000, curve: Curve.Linear}, ()=>{this.list.splice(index, 1)})})}}
}

1. 页面间动画
   1. 共享元素转场动画
   2. 页面转场动画

// a页面pageTransition(){PageTransitionExit({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Left)PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Left)}// b页面pageTransition(){PageTransitionExit({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Right)PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Right)}

16. divider 用法

 .divider({strokeWidth: $r('app.float.divider_stroke_width'),color: $r('app.color.item_divider')})