鸿蒙进阶篇-网格布局 Grid/GridItem（二）

hello大家好，这里是鸿蒙开天组，今天让我们来继续学习鸿蒙进阶篇-网格布局 Grid/GridItem，上一篇博文我们已经学习了固定行列、合并行列和设置滚动，这一篇我们将继续学习Grid的用法，实现翻页滚动、自定义滚动条样式，并实现一个小案例。

1.翻页滚动

到这里就需要用到控制器对象了，核心步骤如下：

  1. 创建 Scroller 对象（控制器对象）
  2. 设置给 Grid
  3. 调用 Scroller 对象的 scrollPage 方法
// 1.创建 Scroller 对象（new 关键字，调用Scroller函数，返回一个Scroller的对象）
scroller: Scroller = new Scroller()//  2.设置给 Grid：这个属性可选，所以之前不设置也不会报错Grid(this.scroller) {// ...}// 3.调用 Scroller 对象的  scrollPage 方法即可实现滚动
this.scroller.scrollPage({next:true // 下一页next:false // 上一页
})

属于一看就会的代码，于是实现一个翻页滚动效果，当然也可以左右滑动啦：

实现代码如下：

@Entry
@Component
struct test_Grid {// 控制器对象，不是状态属性，不需要添加任何修饰符scroller: Scroller = new Scroller()build() {Column() {Text('控制器-实现翻页滚动').fontSize(20).fontWeight(900).padding(10)Grid(this.scroller) {ForEach(Array.from({ length: 200 }), (item: number, index: number) => {GridItem() {Text(index + 1 + '').fontColor(Color.Orange)}.backgroundColor(Color.Green).width('25%')})}.padding(10).height(450).rowsGap(10).columnsGap(10).rowsTemplate('1fr 1fr 1fr 1fr')Row() {Button('上一页').width(100).onClick(() => {// 上一页this.scroller.scrollPage({ next: false })})Button('下一页').width(100).onClick(() => {// 下一页this.scroller.scrollPage({ next: true })})}.width('100%').justifyContent(FlexAlign.SpaceAround)}}
}

2.自定义滚动条

滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll，如果默认的滚动条外观无法满足需求，我们还可以自定义滚动条：

第一步：首先通过 Grid 的 scrollBar 属性关闭滚动条

属性名

类型

说明

scrollBar

BarState

设置滚动条状态。

默认值：BarState.auto

BarState.off 关闭

BarState.on 常驻

BarState.auto 按需显示

第二步：使用ScrollBar组件自定义滚动条

参数名

参数类型

必填

参数描述

scroller

Scroller

是

可滚动组件的控制器。用于与可滚动组件进行绑定。

direction

ScrollBarDirection

否

滚动条的方向，控制可滚动组件对应方向的滚动。

默认值：ScrollBarDirection.Vertical

state

BarState

否

滚动条状态。
默认值：BarState.Auto

样例关键代码如下：

// 创建控制器对象
scroller: Scroller = new Scroller()// 设置给 Grid 组件
Grid(this.scroller){// 略
}// 设置给 ScrollBar 组件
// 和 Grid 设置的是同一个
ScrollBar({scroller: this.scroller,direction: ScrollBarDirection.Horizontal // 方向
}) {// 滚动内容 设置外观即可Text()
}
// 设置外观

在上面代码的基础上，先来一个看着丑但足够显眼的滚动条：

代码如下：

@Entry
@Component
struct test_Grid {// 控制器对象，不是状态属性，不需要添加任何修饰符scroller: Scroller = new Scroller()build() {Column() {Text('控制器-实现翻页滚动').fontSize(20).fontWeight(900).padding(10)Grid(this.scroller) {ForEach(Array.from({ length: 200 }), (item: number, index: number) => {GridItem() {Text(index + 1 + '').fontColor(Color.Orange)}.backgroundColor(Color.Green).width('25%')})}.padding(10).height(450).rowsGap(10).columnsGap(10).rowsTemplate('1fr 1fr 1fr 1fr').scrollBar(BarState.Off)// 自定义滚动条ScrollBar({scroller: this.scroller, // 和 Grid 同一个控制器对象direction: ScrollBarDirection.Horizontal,}) {Text().width(40).height(20).backgroundColor(Color.Orange)}.width(200).height(20).backgroundColor(Color.Red)Row() {Button('上一页').width(100).onClick(() => {// 上一页this.scroller.scrollPage({ next: false })})Button('下一页').width(100).onClick(() => {// 下一页this.scroller.scrollPage({ next: true })})}.width('100%').justifyContent(FlexAlign.SpaceAround)}}
}

3.小案例

最后，使用刚刚学习的自定义滚动条来完成滚动导航的滚动条：

嘿！一个丝滑又漂亮的滚动条就出来啦，注意咱们这里主要是做的滚动条，具体图标填充，可以自行使用其他图片测试哦！

代码如下：

interface XMNavItem {title: stringicon: ResourceStr // 联合属性 Resource | string
}@Entry
@Component
struct test_Grid {// 数据 只需要渲染，所以没有使用@State 修饰navList: XMNavItem[] = [{ title: '上新精选', icon: $r('app.media.foreground') },{ title: '智能家电', icon: $r('app.media.background') },{ title: '小米众筹', icon: $r('app.media.startIcon') },{ title: '有品会员', icon: $r('app.media.startIcon') },{ title: '有品秒杀', icon: $r('app.media.app_icon') },{ title: '原产地', icon: $r('app.media.foreground') },{ title: '生活优选', icon: $r('app.media.background') },{ title: '6G手机', icon: $r('app.media.startIcon') },{ title: '小米自营', icon: $r('app.media.startIcon') },{ title: '茅台酒饮', icon: $r('app.media.app_icon') },{ title: '鞋服饰品', icon: $r('app.media.app_icon') },{ title: '家纺餐厨', icon: $r('app.media.app_icon') },{ title: '食品生鲜', icon: $r('app.media.app_icon') },{ title: '好惠买', icon: $r('app.media.app_icon') },{ title: '家具家装', icon: $r('app.media.app_icon') },{ title: '健康养生', icon: $r('app.media.app_icon') },{ title: '有品海购', icon: $r('app.media.app_icon') },{ title: '个护清洁', icon: $r('app.media.app_icon') },{ title: '户外运动', icon: $r('app.media.app_icon') },{ title: '3C数码', icon: $r('app.media.app_icon') }]// 创建控制器对象scroller: Scroller = new Scroller()build() {Column() {Text('小米有品').fontSize(20).fontWeight(900).padding(10)Grid(this.scroller) {ForEach(this.navList, (item: XMNavItem) => {GridItem() {Column() {Image(item.icon).width('80%')Text(item.title).fontSize(12)}.height('100%')}.width('20%')})}.rowsTemplate('1fr 1fr').height(160).width('100%').backgroundColor(Color.White).borderRadius(5).padding({ bottom: 10 }).scrollBar(BarState.Off) // 关闭滚动条// 自定义滚动条ScrollBar({scroller: this.scroller,direction: ScrollBarDirection.Horizontal, // 横向滚动state: BarState.On // 持续显示}) {Text().height(5).width(20).backgroundColor(Color.Orange).borderRadius(3)}.width(50).height(5).backgroundColor('#e5e5e5').borderRadius(3).offset({ y: -10 })}.width('100%').height('100%').padding(10).backgroundColor('#f5f5f5')}
}

4.事后更新

好啦好啦，我知道大家可能对于最终的效果展示有点不满意，毕竟不够好看嘛，那就把图片给大家换一下，最终结果如下：

至于这么多图片，是不是要一个一个去下？其实不需要的，直接到以下链接，一个Ctrl+S就全部有了，然后选中前面20个丢进media文件夹里，完事：

英雄头像

最终代码：

interface XMNavItem {title: stringicon: ResourceStr // 联合属性 Resource | string
}@Entry
@Component
struct test_Grid {// 数据 只需要渲染，所以没有使用@State 修饰navList: XMNavItem[] = [{ title: '上新精选', icon: $r('app.media.105') },{ title: '智能家电', icon: $r('app.media.106') },{ title: '小米众筹', icon: $r('app.media.107') },{ title: '有品会员', icon: $r('app.media.108') },{ title: '有品秒杀', icon: $r('app.media.109') },{ title: '原产地', icon: $r('app.media.110') },{ title: '生活优选', icon: $r('app.media.111') },{ title: '6G手机', icon: $r('app.media.112') },{ title: '小米自营', icon: $r('app.media.113') },{ title: '茅台酒饮', icon: $r('app.media.114') },{ title: '鞋服饰品', icon: $r('app.media.115') },{ title: '家纺餐厨', icon: $r('app.media.115') },{ title: '食品生鲜', icon: $r('app.media.116') },{ title: '好惠买', icon: $r('app.media.117') },{ title: '家具家装', icon: $r('app.media.118') },{ title: '健康养生', icon: $r('app.media.119') },{ title: '有品海购', icon: $r('app.media.120') },{ title: '个护清洁', icon: $r('app.media.121') },{ title: '户外运动', icon: $r('app.media.123') },{ title: '3C数码', icon: $r('app.media.124') }]// 创建控制器对象scroller: Scroller = new Scroller()build() {Column() {Text('小米有品').fontSize(20).fontWeight(900).padding(10)Grid(this.scroller) {ForEach(this.navList, (item: XMNavItem) => {GridItem() {Column() {Image(item.icon).width('80%')Text(item.title).fontSize(12)}.height('100%')}.width('20%')})}.rowsTemplate('1fr 1fr').height(160).width('100%').backgroundColor(Color.White).borderRadius(5).padding({ bottom: 10 }).scrollBar(BarState.Off) // 关闭滚动条// 自定义滚动条ScrollBar({scroller: this.scroller,direction: ScrollBarDirection.Horizontal, // 横向滚动state: BarState.On // 持续显示}) {Text().height(5).width(20).backgroundColor(Color.Orange).borderRadius(3)}.width(50).height(5).backgroundColor('#e5e5e5').borderRadius(3).offset({ y: -10 })}.width('100%').height('100%').padding(10).backgroundColor('#f5f5f5')}
}

好了，今天的分享到这里为止，感谢阅读，欢迎点赞收藏支持鼓励下！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/59885.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

React教程（详细版）

React教程（详细版）

React教程（详细版） 1，简介 1.1 概念 react是一个渲染html界面的一个js库，类似于vue，但是更加灵活，写法也比较像原生js，之前我们写出一个完成的是分为html，js，css&…
阅读更多...
自然语言处理在客户服务中的应用

自然语言处理在客户服务中的应用

💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 自然语言处理在客户服务中的应用 自然语言处理在客户服务中的应用 自然语言处理在客户服务中的应用 引言 自然语言处理概述 定义…
阅读更多...
2节串联锂电池充电管理芯片，有5V升压，9-12V降压，快充升降压

2节串联锂电池充电管理芯片，有5V升压，9-12V降压，快充升降压

从上面第一句话我们知道了2节串联锂电池的供电电压范围是：6V-8.4V，锂电池充电管理是随着电池电压提高而增加充电电压，直到充满电压8.4V。如2节串联锂电池电压是6V时，充电管理芯片会控制充电电压如7V， 2节串联锂电池的电…
阅读更多...
服务器数据恢复—EVA存储故障导致上层应用不可用的数据恢复案例

服务器数据恢复—EVA存储故障导致上层应用不可用的数据恢复案例

服务器存储数据恢复环境： 一台EVA某型号控制器EVA扩展柜FC磁盘。 服务器存储故障&检测： 磁盘故障导致该EVA存储中LUN不可用，导致上层应用无法正常使用。 服务器存储数据恢复过程： 1、将所有磁盘做好标记后从扩展柜中取出。硬…
阅读更多...
加入GitHub Spark需要申请

加入GitHub Spark需要申请

目录 加入GitHub Spark需要申请 GitHub Spark 一、产品定位与特点 二、核心组件与功能 三、支持的AI模型 四、应用场景与示例 五、未来展望 六、申请体验 加入GitHub Spark需要申请 GitHub Spark 是微软旗下GitHub在2024年10月30日的GitHub Universe大会上推出的一款革…
阅读更多...
Qt中 QWidget 和 QMainWindow 区别

Qt中 QWidget 和 QMainWindow 区别

QWidget 用来构建简单窗口 QMainWindow 用来构建更复杂的窗口，QMainWindow 继承自QWidget，在QWidget 的基础上提供了菜单栏、工具栏、状态栏等功能 菜单栏（QMenuBar）工具栏（QToolBar）状态栏（Q…
阅读更多...
【MIT-OS6.S081笔记1】Chapter1阅读摘要：Operating system interfaces

【MIT-OS6.S081笔记1】Chapter1阅读摘要：Operating system interfaces

记录阅读《xv6: a simple, Unix-like teaching operating system》的一些摘要，这是第一章的内容：Operating system interfaces。 fork函数作用：fork创建一个新进程，称为子进程，其内存内容与调用进程（称为父…
阅读更多...
学习python的第七天之数据类型——str字符串

学习python的第七天之数据类型——str字符串

学习python的第七天之数据类型——str字符串 Python 中的字符串（String）是最常用的数据类型之一，用于存储和表示文本信息。Python 中的字符串是不可变的，这意味着一旦创建了一个字符串，就不能修改它（但可以…
阅读更多...
【三维重建】Semantic Gaussians:开放词汇的3DGS场景理解

【三维重建】Semantic Gaussians:开放词汇的3DGS场景理解

文章目录 摘要一、引言二、主要方法1.3D Gaussian Splatting2.其他方法2.1 Gaussian Grouping（ECCV 2024）2.2 GARField 3. 2D Versatile 投影4. 3D Semantic Network4. 推理 四、实验1. 实验设置2.定量结果 论文：https://arxiv.org/pdf/2403.…
阅读更多...
华为OD机试真题-仿LISP计算

华为OD机试真题-仿LISP计算

题目描述： LISP 语言唯一的语法就是括号要配对。 形如(OP P1 P2 …)，括号内元素由单个空格分割。 其中第一个元素 OP 为操作符，后续元素均为其参数，参数个数取决于操作符类型。 注意: 参数 P1,P2 也有可能是另外一个嵌套的 (O…
阅读更多...
centos7的maven配置

centos7的maven配置

首先进入conf配置文件夹下的setting.xml 要改两个地方 第一&#xff1a;设置镜像源 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>https://maven.aliyun.com/nexus/content/groups/public/</url> <mirrorOf>c…
阅读更多...
思考：linux Vi Vim 编辑器的简明原理，与快速用法之《 7 字真言 》@ “鱼爱返 说 温泉哦“ (**)

思考：linux Vi Vim 编辑器的简明原理，与快速用法之《 7 字真言 》@ “鱼爱返 说 温泉哦“ (**)

Linux vi/vim | 菜鸟教程 https://zhuanlan.zhihu.com/p/602675406 Linux Vim编辑器的基本使用_vim文本编辑器-CSDN博客 思考 1. 记忆公式&#xff1a; 按键操作的 7 字真言 1&#xff1a; "鱼爱返 说 温泉哦" v i Esc : wq ! ----------- 一般的简单…
阅读更多...
Web服务nginx基本实验

Web服务nginx基本实验

安装软件&#xff1a; 启动服务&#xff1a; 查看Nginx服务器的网络连接信息&#xff0c;监听的端口&#xff1a; 查看默认目录&#xff1a; 用Windows访问服务端192.168.234.111的nginx服务&#xff1a;&#xff08;防火墙没有放行nginx服务&#xff0c;访问不了&#xff09; …
阅读更多...
Ubuntu实现双击图标运行自己的应用软件

Ubuntu实现双击图标运行自己的应用软件

我们知道在Ubuntu上编写程序&#xff0c;最后编译得到的是一个可执行文件&#xff0c;大致如下 然后要运行的时候在终端里输入./hello即可 但是这样的话感觉很丑很不方便&#xff0c;下边描述一种可以类似Windows上那种双击运行的实现方式。 我们知道Ubuntu是有一些自带的程序…
阅读更多...
【JAVA】正则表达式中的捕获组和非捕获组

【JAVA】正则表达式中的捕获组和非捕获组

在Java中&#xff0c;正则表达式中的捕获组&#xff08;Capturing Groups&#xff09;和非捕获组&#xff08;Non-Capturing Groups&#xff09;是用来对匹配的部分进行分组的技术。它们在处理复杂的匹配模式时非常有用。 捕获组 (Capturing Groups) 捕获组不仅将一部分正则表…
阅读更多...
openresty入门教程：init_by_lua_block

openresty入门教程：init_by_lua_block

init_by_lua_block 是 Nginx 配置中用于在 Nginx 启动时执行 Lua 脚本的一个指令。这个指令通常用于初始化全局变量、设置共享内存&#xff0c;或者执行一些需要在服务器启动时完成的准备工作。 以下是一个简单的 init_by_lua_block 使用示例&#xff1a; 1. 安装 Nginx 和 L…
阅读更多...
Python小白学习教程从入门到入坑------第二十六课 单例模式（语法进阶）

Python小白学习教程从入门到入坑------第二十六课 单例模式（语法进阶）

在这个节课的开始&#xff0c;我们先回顾一下面向对象课程中学的构造函数__init__() 目录 一、__init__() 和 __new__() 1.1 __init__() 1.2 __new__() 二、单例模式 2.1 特点 2.2 通过classmethod实现单例模式 2.3 通过装饰器实现单例模式 2.3 通过重写__new__() 实现…
阅读更多...
x-cmd pkg | onefetch - 轻松获取 Git 仓库统计信息，打造个性化输出!

x-cmd pkg | onefetch - 轻松获取 Git 仓库统计信息，打造个性化输出!

目录 简介首次用户功能特点常见用法类似或相关的工具进一步阅读 简介 onefetch 是由 Ossama Hjaji 用 Rust 编写的命令行 Git 信息工具&#xff0c;可将本地 Git 存储库的项目信息和代码统计信息直接显示到您的终端。该工具完全离线 - 不需要网络访问。 首次用户 本文的 dem…
阅读更多...
基于IM场景下的Wasm初探：提升Web应用性能｜得物技术

基于IM场景下的Wasm初探：提升Web应用性能｜得物技术

一、何为Wasm &#xff1f; Wasm&#xff0c;全称 WebAssembly&#xff0c;官网描述是一种用于基于堆栈的虚拟机的二进制指令格式。Wasm被设计为一个可移植的目标&#xff0c;用于编译C/C/Rust等高级语言&#xff0c;支持在Web上部署客户端和服务器应用程序。 Wasm 的开发者参…
阅读更多...
现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库

现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库

文章目录 一、概要二、整体架构流程1. 安装 MSYS2 环境2. 安装postgresql 三、技术名词解释1.MSYS22.postgresql 四、技术细节1. 创建主数据库2.添加从数据库复制权限3. 按需修改参数&#xff08;1&#xff09;WAL保留空间&#xff08;2&#xff09;监听地址 4. 启动主服务器5.…
阅读更多...
最新文章

Copyright @ 2022~2023