鸿蒙开发笔记(十八): 网格 Grid/GridItem,轮播 Swiper

最新推荐文章于 2024-04-26 17:39:01 发布
最新推荐文章于 2024-04-26 17:39:01 发布
阅读量1k 收藏 20
点赞数 24
分类专栏： 鸿蒙开发 文章标签： harmonyos 鸿蒙开发 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010483016/article/details/135695896
版权

1. 网格 Grid/GridItem

网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

1.1 布局与约束

Grid组件为网格容器，其中容器内每一个条目对应一个GridItem组件，如下图所示。

在这里插入图片描述

网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局，如下图所示。

在这里插入图片描述

如果Grid组件设置了宽高属性，则其尺寸为设置值。如果没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。

Grid组件根据行列数量与占比属性的设置，可以分为三种布局情况：

  1. 行、列数量与占比同时设置：Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。（推荐使用该种布局方式）

  2. 只设置行、列数量与占比中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。

  3. 行列数量与占比都不设置：元素在布局方向上排布，其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示，且Grid不可滚动。

1.2 设置排列方式

1. 设置行列数量与占比

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。

在这里插入图片描述
只要将rowsTemplate的值为’1fr 1fr 1fr’，同时将columnsTemplate的值为’1fr 2fr 1fr’，即可实现上述网格布局。

Grid() {
  ...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

当Grid组件设置了rowsTemplate或columnsTemplate时，Grid的layoutDirection、maxCount、minCount、cellLength属性不生效，属性说明可参考 Grid-属性。

2. 设置子组件所占行列数

除了大小相同的等比例网格布局，由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分常见，如下图所示。在Grid组件中，通过设置GridItem的rowStart、rowEnd、columnStart和columnEnd可以实现如图所示的单个网格横跨多行或多列的场景。

在这里插入图片描述

在单个网格单元中，rowStart和rowEnd属性表示指定当前元素起始行号和终点行号，columnStart和columnEnd属性表示指定当前元素的起始列号和终点列号。

GridItem() {
  Text(key)
    ...
}
.columnStart(1)
.columnEnd(2)
......

GridItem() {
  Text(key)
    ...
}
.rowStart(5)
.rowEnd(6)

3. 设置主轴方向

使用Grid构建网格布局时，若没有设置行列数量与占比，可以通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

在这里插入图片描述
当前layoutDirection设置为Row时，先从左到右排列，排满一行再排一下一行。当前layoutDirection设置为Column时，先从上到下排列，排满一列再排一下一列，如上图所示。此时，将maxCount属性设为3，表示主轴方向上最大显示的网格单元数量为3。

Grid() {
  ...
}
.maxCount(3)
.layoutDirection(GridDirection.Row)

  1. layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效，此时元素在layoutDirection方向上排列。

  2. 仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。

  3. 仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。

1.3 在网格布局中显示数据

Grid组件可以通过二维布局的方式显示一组GridItem子组件。

Grid() {
  GridItem() {
    Text('会议')
      ...
  }

  GridItem() {
    Text('签到')
      ...
  }

  GridItem() {
    Text('投票')
      ...
  }

  GridItem() {
    Text('打印')
      ...
  }
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr')

对于内容结构相似的多个GridItem，通常更推荐使用循环渲染ForEach语句中嵌套GridItem的形式，来减少重复代码。

@Component
struct OfficeService {
  @State services: Array<string> = ['会议', '投票', '签到', '打印']
  ...

  build() {
    Column() {
      Grid() {
        ForEach(this.services, service => {
          GridItem() {
            Text(service)
              ...
          }
        }, service => service)
      }
      .rowsTemplate('1fr 1fr')
      .columnsTemplate('1fr 1fr')
      ...
    }
    ...
  }
}

1.4 设置行列间距

在两个网格单元之间的网格横向间距称为行间距，网格纵向间距称为列间距，如下图所示。

在这里插入图片描述

通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。在图5所示的计算器中，行间距为15vp，列间距为10vp。

Grid() {
  ...
}
.columnsGap(10)
.rowsGap(15)

1.5 构建可滚动的网格布局

可滚动的网格布局常用在文件管理、购物或视频列表等页面中，如下图所示。在设置Grid的行列数量与占比时，如果仅设置行、列数量与占比中的一个，即仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。

横向可滚动网格布局

在这里插入图片描述
如果设置的是columnsTemplate，Grid的滚动方向为垂直方向；如果设置的是rowsTemplate，Grid的滚动方向为水平方向。

如上图所示的横向可滚动网格布局，只要设置rowsTemplate属性的值且不设置columnsTemplate属性，当内容超出Grid组件宽度时，Grid可横向滚动进行内容展示。

@Component
struct Shopping {
  @State services: Array<string> = ['直播', '进口', ...]
  ...

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.services, (service: string, index) => {
          GridItem() {
            ...
          }
          .width('25%')
        }, service => service)
      }
      .rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性，当内容超出Grid区域时，可水平滚动。
      .rowsGap(15)
      ...
    }
    ...
  }
}

1.6 控制滚动位置

与新闻列表的返回顶部场景类似，控制滚动位置功能在网格布局中也很常用，例如下图所示日历的翻页功能。
在这里插入图片描述
Grid组件初始化时，可以绑定一个Scroller对象，用于进行滚动控制，例如通过Scroller对象的scrollPage方法进行翻页。

在日历页面中，用户在点击“下一页”按钮时，应用响应点击事件，通过指定scrollPage方法的参数next为true，滚动到下一页。

private scroller: Scroller = new Scroller()

Column({ space: 5 }) {
  Grid(this.scroller) {
    ...
  }
  .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
  ...
 
 Row({space: 20}) {
   Button('上一页')
     .onClick(() => {
       this.scroller.scrollPage({
         next: false
       })
     })

   Button('下一页')
     .onClick(() => {
       this.scroller.scrollPage({
         next: true
       })
     })
 }
}
...

1.7 性能优化

与长列表的处理类似，循环渲染适用于数据量较小的布局场景，当构建具有大量网格项的可滚动网格布局时，推荐使用数据懒加载方式实现按需迭代加载数据，从而提升列表性能。

当使用懒加载方式渲染网格时，为了更好的滚动体验，减少滑动时出现白块，Grid组件中也可通过cachedCount属性设置GridItem的预加载数量，只在懒加载LazyForEach中生效。

设置预加载数量后，会在Grid显示区域前后各缓存cachedCount*列数个GridItem，超出显示和缓存范围的GridItem会被释放。

Grid() {
  LazyForEach(this.dataSource, item => {
    GridItem() {
      ...
    }
  })
}
.cachedCount(3)

cachedCount的增加会增大UI的CPU、内存开销。使用时需要根据实际情况，综合性能和用户体验进行调整。

2. 轮播 Swiper

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

2.1 布局与约束

Swiper作为一个容器组件，在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身的尺寸。如果开发者对Swiper组件设置了固定的尺寸，则在轮播显示过程中均以该尺寸生效；否则，在轮播过程中，会根据子组件的大小自动调整自身的尺寸。

2.2 循环播放

通过loop属性控制是否循环播放，该属性默认值为true。

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

...
private swiperController: SwiperController = new SwiperController()
...
Swiper(this.swiperController) {
  Text("0")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("1")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("2")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Blue)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.loop(true)

2.3 自动轮播

Swiper通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。

autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000，单位毫秒。

Swiper(this.swiperController) {
  Text("0")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("1")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("2")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.loop(true)
.autoPlay(true)
.interval(1000)

2.4 导航点样式

Swiper提供了默认的导航点样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicatorStyle属性自定义导航点的位置和样式。

通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

自定义导航点样式（示例：导航点直径设为30VP，左边距为0，导航点颜色设为红色）：

Swiper(this.swiperController) {
  Text("0")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("1")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("2")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.indicatorStyle({
  size: 30,
  left: 0,
  color: Color.Red
})

2.5 页面切换方式

Swiper支持三种页面切换方式：手指滑动、点击导航点和通过控制器。

通过控制器切换页面：

@Entry
@Component
struct SwiperDemo {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        Text("0")
          .width(250)
          .height(250)
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("1")
          .width(250)
          .height(250)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("2")
          .width(250)
          .height(250)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .indicator(true)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext(); // 通过controller切换到后一页
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious(); // 通过controller切换到前一页
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

2.6 轮播方向

Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制。

当vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false。

设置水平方向上轮播：

Swiper(this.swiperController) {
  ...
}
.indicator(true)
.vertical(false)

2.7 每页显示多个子页面

Swiper支持在一个页面内同时显示多个子组件，通过displayCount属性设置。

设置一个页面内显示两个子组件：

Swiper(this.swiperController) {
  Text("0")
    .width(250)
    .height(250)
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)
  Text("1")
    .width(250)
    .height(250)
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)
  Text("2")
    .width(250)
    .height(250)
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
  Text("3")
    .width(250)
    .height(250)
    .backgroundColor(Color.Blue)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.indicator(true)
.displayCount(2)

在这里插入图片描述

ZWaruler
关注
  • 24
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙开发-横向滚动视图的实现
beargrey的博客
05-16 1028
在鸿蒙里可以使用overflow: scroll实现纵向的滚动，然而这个样式在鸿蒙里目前仅支持纵向滚动，是不支持横向滚动的。所以这里笔者使用了list组件来实现横向滚动，下面是预览图。 下面贴代码 js部分 export default { data: { arrs:[] }, onInit(){ for(let i = 0;i<=100;i++){ this.arrs.push("第"+i+"项") .
JS-Swiper:使用原生JS实现的无缝轮播图
05-29
原生JS无缝轮播图 ，如果无法打开预览，原因是部分运营商DNS污染（域名指往不正确的IP地址），可以通过 修改hosts文件 / 修改DNS服务器 / 代理 的方式访问 HTML部分 最外层是一个固定宽度且带有overflow: hidden;...
swiper 横向轮播 grid
xiaosi1413的博客
06-13 1340
swiper 网格 横向轮播 grid，
swiper示例，横向布局，垂直布局，配色参数，Grid，Menu
01-29
基于swiper 8.4.5的实现的例子
鸿蒙应用开发-第一章-CSS3的grid布局
weixin_50991227的博客
03-04 2086
Tips：这个只是作者的学习笔记，仅作参考。本篇较重要，虽内容较少，但其重要性也够专门写一篇了。
HarmonyOS鸿蒙学习笔记（15）Swiper实现抖音切换视频播放效果
菜鸟博客
11-16 1879
Harmony Swiper实现抖音播放视频效果
鸿蒙(HarmonyOS)应用开发——容器组件（Grid组件）
weixin_46282323的博客
12-02 794
前面一篇文章中，已经说了List组件。那么接下来就是容器组件中的Grid组件fill:#333;color:#333;color:#333;fill:none;根据功能分类基础组件容器组件媒体组件绘制组件画布组件ColumnRowListGridTabsSwiper。
react_react引用Swiper中的一些问题 react使用Swiper中的grid遇到的一些问题
FaneLi的博客
04-03 580
当你的swiper突然出现你不可掌控的状态时，去看看必然存在的另外的Swiper，请给他们各自一个专属的类名。当你的grid排列不好的时候，请你静下心来关闭网易云。去看一下子元素的高度，跟引用霍初始化方式无关。下面代码希望能够有一些启示，相信自己。
grid组件
m0_57144976的博客
10-26 594
grid 管理器可以说是 Tkinter 这三个布局管理器中最灵活多变的。如果你只希望学习使用一个布局管理 器，那么 grid 绝对是首选。当你在设计对话框的时候，使用 gird 尤其便捷。 使用 grid 排列组件，只需告诉它你想要将组件放置的位置（行/列，row 选项指定行， cloumn 选项指定列） 默认情况下组件会居中显示在对应的网格里，你可以使用 sticky 选项来修改这一特性。该 选项可以使用的值有 "e"，"w"，"s"，"n"（ewsn 分别表示东西南北，即上北下南左
swiper搭配uni-grid宫格，实现数据自动在不同的轮播视图进行分配
huangfuyk.的博客
05-21 748
使用uniapp的uni-grid组件，实现菜单轮播布局，要求是一页轮播图展示8个图标，那就把column设置为4，展示两行。但是该组件只支持column每列显示个数，不支持超出8个的菜单自动填充到下一页。
鸿蒙(HarmonyOS)应用开发——简易版轮播图
weixin_46282323的博客
12-12 1431
轮播图在应用中，已经很常见的展现方式。像uniapp、iview，viewUI等前端组件框架，都提供了轮播图组件。那么在harmonyOS中，如果要实现轮播，我们是使用swiper 组件。
swiper grid计算宽高内容自适应
qq_44381427的博客
04-01 1367
swiper网格显示 swiper可以通过设置slidesPerView和slidesPerColumn来控制一次显示n*m个slide，其中slidesPerView控制有几列，slidesPerColumn来控制有几行。 this.mySwiper = new Swiper('#my_swiper', { slidesPerView: this.columnNum, slidesPerColumn: this.rowNum, navigation: { n
vue轮播图插件vue-awesome-swiper
11-28
轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from '...
swiper实现异形轮播效果
10-15
主要为大家详细介绍了swiper实现异形轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js使用swiper实现层叠轮播效果实例代码
12-09
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了，下面就来开始本文的正文内容 实现过程： 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
实用方法：自定义轮播图swiper dots默认样式
03-29
2.swiper组件的属性indicator-dots，值为false时，面板指示点还是显示。要把indicator-dots属性直接删掉。 下面进入正题：默认的swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，...
【鸿蒙】通知
最新发布
ganshenml的专栏
04-26 201
通知是个UI组件，它和BroadCastReceiver还是不同的。鸿蒙版本的通知较为基础。
鸿蒙（HarmonyOS）北向开发项目编译问题汇总
m0_70748458的博客
04-26 238
之后直接运行，会报错，会说项目的API版本与设备的API版本不匹配，也就是P30 pro即使升级了鸿蒙 3.0，也不支持API8的项目运行，参考上面我们获得的p30pro的API等级是6，也就意味着，如果需要程序在P30pro上运行，我们必须选择API6开发。学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。自动获取设备签名后，运行如下。
鸿蒙OpenHarmony【轻量系统编译】 （基于Hi3861开发板）
m0_62167422的博客
04-22 1177
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点如果。
解决ERROR Failed to compile with 1 errors 09:22:47 This dependency was not found: swiper/swiper-bundle.css in ./node_module 08:56:04 This dependency was not found: * swiper/swiper-bundl
05-25
这个错误通常是由于缺少依赖项或导入路径有误引起的。首先，确保你已经安装了最新版本的Swiper和它的依赖项，可以通过运行以下命令来安装： ``` npm install swiper ``` 如果你已经安装了Swiper但仍然遇到问题，请尝试删除 `node_modules` 文件夹并重新安装依赖： ``` rm -rf node_modules npm install ``` 如果问题仍然存在，检查你的导入路径是否正确。在你的代码中，你应该使用以下语句导入Swiper CSS文件： ```javascript import 'swiper/swiper-bundle.css'; ``` 注意，这里的路径应该是相对于你的代码文件的路径。如果你的代码文件和 `node_modules` 文件夹不在同一个目录下，请相应地调整导入路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值