HarmonyOS代码模板

Swiper_轮播图

      Swiper() {
        Image($r('app.media.ic_swiper_xmyp01'))
        Image($r('app.media.ic_swiper_xmyp02'))
        Image($r('app.media.ic_swiper_xmyp03'))
        Image($r('app.media.ic_swiper_xmyp04'))
      }
      .width('100%')
      .height(160)
      // .indicator(false) // 关闭导航点
      // .indicator(Indicator.digit()) // 数字导航点
      .indicator(
        Indicator.dot()// 圆形导航点
          .left(10)// 左侧距离
          .top(10)// 顶部距离
          .bottom(10)// 底部距离
          .right(10)// 右侧距离（距离属性组合使用，无需全部设置）
          .itemWidth(20)// 指示器宽度
          .itemHeight(20)// 指示器高度
          .selectedItemWidth(30)// 选中指示器宽度
          .selectedItemHeight(30)// 选中指示器高度
          .selectedColor(Color.Yellow)// 选中指示器颜色
          .color(Color.Blue) // 默认指示器宽度
      ) // 圆形导航点
      .loop(false) // 是否开启循环 true/false
      .autoPlay(true) // 是否自动播放 true/false
      .interval(4000) // 自动播放时间间隔 单位毫秒
      .vertical(true) // 是否纵向滑动

Grid_网格布局

淘宝二楼

 Grid() {
      ForEach(Array.from({ length: 30 }), (item: TaoBaoItemContent, index: number) => {
        GridItem() {
          Column({ space: 10 }) {
            Image(item.icon)
              .width(40)
            Text(item.title)
              .fontColor(Color.White)
              .fontSize(14)
          }
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
    .width('100%')
    .height(360)

小米有品-滚动导航-自定义滚动条

// 创建控制器对象
scroller: Scroller = new Scroller()

// 设置给 Grid 组件
Grid(this.scroller){
        ForEach(Array.from({ length: 30 }), (item: NavItem) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width('80%')
              Text(item.title)
                .fontSize(12)
            }
            .height('100%')
          }
          .width('20%')
        })
      }
      .rowsTemplate('1fr'.repeat(2)) // 横向滚动 固定行数
      // .columnsTemplate('1fr 1fr 1fr') // 竖向滚动 固定列数
      .height(160)
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(5)
      .padding({ bottom: 10 })
      .scrollBar(BarState.Off) // 关闭滚动条

// 自定义滚动条
      ScrollBar({
        scroller: this.scroller,// 和 Grid 同一个控制器对象
        direction: ScrollBarDirection.Horizontal,// 横向滚动
        state: BarState.On // 持续显示
      }) {
        // 滚动内容 设置外观即可
        Text()//内置滚动
          .width(40)
          .height(20)
          .backgroundColor(Color.Orange)
      }//外置滚动// 设置外观
      .width(200)
      .height(20)
      .backgroundColor(Color.Red)
    }
    .width('100%')
    .height('100%')
  }

Gird 控制器对象-控制滚动

// 1.创建 Scroller 对象（new 关键字，调用Scroller函数，返回一个Scroller的对象）
// 控制器对象，不是状态属性，不需要添加任何修饰符
  scroller: Scroller = new Scroller()

//  2.设置给 Grid：这个属性可选，所以之前不设置也不会报错
  Grid(this.scroller) {}

// 3.调用 Scroller 对象的  scrollPage 方法即可实现滚动
this.scroller.scrollPage({
  next:true // 下一页
  next:false // 上一页
})

//使用实例
Row() {
        Button('上一页')
          .width(100)
          .onClick(() => {
            // 上一页
            this.scroller.scrollPage({ next: false })

          })
        Button('下一页')
          .width(100)
          .onClick(() => {
            // 下一页
            this.scroller.scrollPage({ next: true })
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)

Scroller_小火箭返回顶部

//1.创建滚动方法,定义图标显示隐藏状态变量
sc: Scroller = new Scroller()
@State showRocket: boolean = false

//一般采用层叠布局Stack
Stack({ alignContent: Alignment.BottomEnd }) {
        // 顶部滚动区域//绑定事件
        Scroll(this.sc) {
          Column() {
            Image($r('app.media.ic_jd_scroll_01'))
            Image($r('app.media.ic_jd_scroll_02'))
            Image($r('app.media.ic_jd_scroll_03'))
          }
        }
        .scrollBar(BarState.Off)
        .width('100%')
        .backgroundColor(Color.Orange)
        //添加滑动事件
        .onScroll((x, y) => {
          if( this.sc.currentOffset().yOffset>400){
            this.showRocket=true
          }else{
            this.showRocket = false
          }

        })

        //控制显示隐藏
        if (this.showRocket) {
          Image($r('app.media.ic_jd_rocket'))
            .width(40)
            .backgroundColor(Color.White)
            .borderRadius(20)
            .padding(5)// .margin({right:20,bottom:20})
            .offset({ x: -20, y: -20 })
            //点击事件返回顶部
            .onClick(() => {
              this.sc.scrollEdge(Edge.Top)
            })
        }

      }

Tab_常用模板

interface XMTabParams {
  img: ResourceStr
  selectedImg: ResourceStr
  index: number
  text: string
}

@Entry
@Component
struct Page13_TabsDemo_Xiaomi {
  // 选中的索引
  @State selectedIndex: number = 0

  build() {
    Tabs() {
      TabContent() {
        Image($r("app.media.ic_xiaomi_content_00"))
      }
      .tabBar(
        this.tabBarBuilder({
          text: '首页',
          img: $r('app.media.ic_tabbar_icon_0'),
          selectedImg: $r('app.media.ic_tabbar_icon_0_selected'),
          index: 0
        })
      )

      TabContent() {
        Image($r("app.media.ic_xiaomi_content_01"))
      }
      .tabBar(
        this.tabBarBuilder({
          text: '分类',
          img: $r('app.media.ic_tabbar_icon_1'),
          selectedImg: $r('app.media.ic_tabbar_icon_1_selected'),
          index: 1
        })
      )

      TabContent() {
        Image($r("app.media.ic_xiaomi_content_02"))
      }
      .tabBar(this.centerTabBarBuilder())

      TabContent() {
        Image($r("app.media.ic_xiaomi_content_03"))
      }
      .tabBar(
        this.tabBarBuilder({
          text: '购物车',
          img: $r('app.media.ic_tabbar_icon_2'),
          selectedImg: $r('app.media.ic_tabbar_icon_2_selected'),
          index: 3
        })
      )

      TabContent() {
        Image($r("app.media.ic_xiaomi_content_04"))
      }
      .tabBar(
        this.tabBarBuilder({
          text: '我的',
          img: $r('app.media.ic_tabbar_icon_3'),
          selectedImg: $r('app.media.ic_tabbar_icon_3_selected'),
          index: 4
        })
      )
    }
    .barPosition(BarPosition.End)
    .onChange((index: number) => {
      this.selectedIndex = index
    })
    .onTabBarClick((index: number) => {
      this.selectedIndex = index
    })
  }

  // tabBar 的 Builder
  @Builder
  tabBarBuilder(param: XMTabParams) {
    Column({ space: 5 }) {
      Image(this.selectedIndex == param.index ? param.selectedImg : param.img)
        .width(30)
      Text(param.text)
        .fontColor(this.selectedIndex == param.index ? '#efc07e' : Color.Black)
        .fontSize(12)
    }
  }

  // 中间特殊的 tabBar
  @Builder
  centerTabBarBuilder() {
    Image($r('app.media.ic_xiaomi_center_tabBar'))
      .borderRadius(20)
      .height(50)
  }
}

Badge_容器组件添加角标消息

// tabBar 的 Builder中添加Badge
  @Builder
  tabBarBuilder(param: BadgeTabParams) {
    if (param.index == 3) {
      Badge({ count: 10, style: {} }) {
        Column({ space: 5 }) {
          Image(this.selectedIndex == param.index ? param.selectedImg : param.img)
            .width(30)
          Text(param.text)
            .fontColor(this.selectedIndex == param.index ? '#efc07e' : Color.Black)
            .fontSize(12)
        }
      }
    } else {
      Column({ space: 5 }) {
        Image(this.selectedIndex == param.index ? param.selectedImg : param.img)
          .width(30)
        Text(param.text)
          .fontColor(this.selectedIndex == param.index ? '#efc07e' : Color.Black)
          .fontSize(12)
      }
    }
  }

bindSheet_半模态转场模板

// isShow1 和 isShow2 分别控制不同的半模态
  @State isShow1: boolean = false
  @State isShow2: boolean = false

 Button('显示半模态1-高度固定')// 3. 绑定半模态 bindSheet
        .bindSheet($$this.isShow1, this.sheetBuilder1(), {
          // height: SheetSize.MEDIUM// 枚举的方式设置屏幕高度一半
          // height: SheetSize.LARGE//几乎为屏幕高度
          //height: SheetSize.FIT_CONTENT, // 适应内容高度
          height: 100// 设置具体的值
          showClose: false // 不显示默认的关闭按钮
        })
        .onClick(() => {
          // 4. 修改状态变量，控制显示
          this.isShow1 = true
        })

Button('显示半模态 2-切换高度档位')
        .bindSheet($$this.isShow2, this.sheetBuilder2(), {
          dragBar: true, // 是否显示控制条
          detents: [100, 200, 300] // 在多个不同的高度切换
        })
        .onClick(() => {
          this.isShow2 = true
        })

@Builder
  sheetBuilder1() {
    Column() {
      Text('半模态 1')
        .fontSize(40)
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height('100%')
  }

  @Builder
  sheetBuilder2() {
    Column() {
      Text('半模态 2')
        .fontSize(40)
    }
    .backgroundColor(Color.Orange)
    .width('100%')
    .height('100%')
  }

bindContentCover_全屏模态转场模板

// 1. 定义状态变量，boolean
  @State isShow: boolean = false

// 2.通过 Builder 定义结构
  @Builder
  myBuilder() {
    Column() {
      Button('关闭')
        .onClick(() => {
          this.isShow = false
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#0094ff')
    .justifyContent(FlexAlign.Center)
  }

Button(`显示全屏模态${this.isShow}`)
        .fontSize(20)
        .margin(10)// 绑定全屏模态 bindContentCover
        .bindContentCover(this.isShow, this.myBuilder())
        .onClick(() => {
          // 修改状态变量，控制显示
          this.isShow = true
        })

List_通讯录基础模板

// 1.控制器对象
  scroller: Scroller = new Scroller()
Column() {
Stack({ alignContent: Alignment.End }) {
        Text('通讯录')
          .width('100%')
          .textAlign(TextAlign.Center)
          .fontSize(20)
          .onClick(() => {
            // 3.调用方法控制滚动
            this.scroller.scrollToIndex(0, true)
          })
        Image($r('app.media.ic_public_add'))
          .width(20)
      }
      .width('100%')
      .padding(15)
      .backgroundColor('#fff1f3f5')

// 2. 设置给 List 组件
      List({ scroller: this.scroller }) {
        // 顶部区域
        ListItem() {
          Row() {
            Image($r('app.media.ic_public_search'))
              .width(20)
              .fillColor(Color.Gray)
            Text('搜索')
              .fontColor(Color.Gray)
          }
          .backgroundColor(Color.White)
          .width('100%')
          .height(40)
          .borderRadius(5)
          .justifyContent(FlexAlign.Center)
        }
        .padding(10)
        .width('100%')
        .backgroundColor('#fff1f3f5')

        ForEach(this.contacts, (item: ContactContent, index: number) => {
          // 分组的联系人信息
          ListItemGroup({ header: this.itemHead(item.initial), space: 10 }) {
            ForEach(item.nameList, (it: string, i: number) => {
              // 循环渲染分组A的ListItem
              ListItem() {
                Row({ space: 10 }) {
                  Image($r('app.media.ic_public_lianxiren'))
                    .width(40)
                    .fillColor(this.getRandomColor())
                  Text(it)
                }
              }
            })

          }
          .divider({
            startMargin: 60,
            strokeWidth: 1,
            color: '#ccc'
          })
        })

      }// .sticky(StickyStyle.None) // 不吸附 默认值
  // .sticky(StickyStyle.Header) // 头部吸附
  // .sticky(StickyStyle. Footer) //  底部吸附，如果有的话
}


@Builder
  itemHead(text: string) {
    // 列表分组的头部组件，对应联系人分组A、B等位置的组件
    Text(text)
      .fontSize(20)
      .backgroundColor('#fff1f3f5')
      .width('100%')
      .padding(5)
  }

List_Scroller控制滚动

// 1. 创建控制器(ListScroller)对象
scroller: Scroller = new Scroller()
// 2. 设置给 List 组件
List({ space: 20, scroller: this.scroller }) {
  // ...
}


Button() {
  // ...
}
.onClick(() => {
  // 3. 调用控制器对象的方法，实现滚动
  this.scroller.scrollToIndex(0)
})

AlphabetIndexer_用户列表联动

alphabets: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
    'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  // 选中的索引，需要更改，且需要同步更新到 UI 上，故添加@State
  @State selectedIndex: number = 0

// 控制器对象
  scroller: Scroller = new Scroller()


 Stack({ alignContent: Alignment.End }){


//添加给List组件
List({ scroller: this.scroller }){...}
.onScrollIndex((start: number) => {
          this.selectedIndex = start
        })


AlphabetIndexer({ arrayValue: this.alphabets, selected: $$this.selectedIndex })
        .usingPopup(true)
        .onSelect((index: number) => {
          this.scroller.scrollToIndex(index)
        })
}