鸿蒙HarmonyOS NEXT开发，实现电影列表+轮播图UI（三）_鸿蒙 next写一个上下轮播的公告栏

1. 涉及到的技术点

1. 轮播 (Swiper)的使用
2. 网格 (Grid/GridItem)的使用
3. 滚动（Scroll）的使用

2. 官方文档指南

1. 创建轮播 (Swiper) https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-looping-V5
2. 创建网格 (Grid/GridItem) https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-grid-V5
3. 创建可滚动的容器组件(Scroll) https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5?catalogVersion=V5

温馨提示：当手机一屏显示不下去的时候，就需要使用Scroll组件来包裹，只能包裹一个子组件

3. demo实现过程

1. 轮播图

//轮播图
          Swiper() {
            Image("https://img2.baidu.com/it/u=3119334893,112907213&fm=253&fmt=auto&app=138&f=JPEG?w=1333&h=500")
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=2208322220,3046896965&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=500')
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=3642384699,1397016578&fm=253&fmt=auto&app=138&f=JPEG?w=1476&h=500')
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=3953008485,1470810916&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400')
              .height(120).width('100%')

          }.loop(true)
          .margin(10)
          .autoPlay(true)
          .borderRadius(10)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 整体代码实现

@Entry
@Component
struct HomePage{
  //模拟准备数据
  @State arr: string[] = [
   "https://img2.baidu.com/it/u=1760949541,1130515827&fm=253&fmt=auto&app=138&f=JPEG?w=338&h=500",
   "https://img0.baidu.com/it/u=716020437,4138668303&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=818",
   "https://img0.baidu.com/it/u=3766536354,3051584234&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625",
   "https://img2.baidu.com/it/u=3805668727,4047277433&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
   "https://img0.baidu.com/it/u=3783983871,2977814539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=713",
   "https://img0.baidu.com/it/u=657200894,2481479797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=699",
   "https://img2.baidu.com/it/u=2943925385,1463534485&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
   "https://img1.baidu.com/it/u=3656528639,20383469&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
   "https://img2.baidu.com/it/u=3757241302,1659125774&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=730",
   "https://img0.baidu.com/it/u=141514037,2053450539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
   "https://img2.baidu.com/it/u=824812563,2554330301&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750"
  ];

  build() {

    Column() {

      //标题栏
      Text('首页')
        .fontWeight(700)
        .fontSize(28)
        .width('100%')
        .padding({ left: 10 })

      Scroll(){
        Column(){
          //轮播图
          Swiper() {
            Image("https://img2.baidu.com/it/u=3119334893,112907213&fm=253&fmt=auto&app=138&f=JPEG?w=1333&h=500")
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=2208322220,3046896965&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=500')
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=3642384699,1397016578&fm=253&fmt=auto&app=138&f=JPEG?w=1476&h=500')
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=3953008485,1470810916&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400')
              .height(120).width('100%')

          }.loop(true)
          .margin(10)
          .autoPlay(true)
          .borderRadius(10)

          Text('最近热门电影')
            .fontWeight(700)
            .fontSize(17)
            .width('100%')
            .margin({ left: 10, top: 20 })
            .padding({ left: 6 })//设置左边框
            .borderWidth({
              left: 4
            })
            .borderColor('#e22418')


          //电影列表，网格布局
          Grid() {
            ForEach(this.arr, (item: string) => {
              GridItem() {
                Column() {
                  Image(item)
                    .height(140)
                    .width('100%')
                    .objectFit(ImageFit.Cover)
                  Text("电影《默杀》宁波福州")
                    .fontSize(13)
                    .margin({ top: 6 })
                    .textOverflow({
                      overflow:TextOverflow.Clip
                    })
                    .maxLines(1)  //一般情况下textOverflow和maxLines配合一起使用
                }.width('100%')
              }

            })

          }
          .columnsTemplate('1fr 1fr 1fr')
          .margin({ top: 20 })
          .columnsGap(10)
          .rowsGap(10)
          .margin(10)
        }
        .width('100%')

      }

    }
    .width('100%')
    .height('100%')

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

4.运行效果图