基于Grid实现混合布局

于 2024-07-09 14:59:54 发布
阅读量218 收藏 2
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongxiaomeng/article/details/140296213
版权

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。

下面列举一些Grid组件与其他容器组件嵌套使用的场景案例：

场景一：Grid与list相互嵌套使用。

方案

  1. 第三方服务的目录页面通过list横向布局实现，且通过scroll的属性与下面详细的功能属性模块list列表形成二级联动。
  2. 通过onScrollFrameBegin事件计算实时滚动量，滚动整个页面，使上方精选布局滚动，如果页面已滚动到底部，列表不在顶部或列表有正向偏移量，则使页面上方精选部分自动上滑，功能列表置顶。
  3. 通过ForEach遍历出来的功能目录，与ForEach遍历出来的详细菜单列表，目录与内容两者的index值一致，两个分属不同的List列表，可以关联不同的Scroll值，可以通过scrollToIndex方法来使两个列表形成二级联动效果。

核心代码

enum ScrollPosition {
  start,
  center,
  end
}
 
class grids {
  gridname: string = '';
  gridList: string[] = [];
 
  constructor(gridname: string, gridList: string[]) {
    this.gridname = gridname;
    this.gridList = gridList;
  }
}
 
@Entry
@Component
struct TextDemo {
  @State listPosition: number = ScrollPosition.start; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
  @State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。
  @State showTitle: boolean = false;
  @State currentYOffset: number = 0;
  private scrollerForScroll: Scroller = new Scroller();
  private scrollerForList: Scroller = new Scroller();
  private scrollerForTitle: Scroller = new Scroller();
  @State currentIndex: number = 0;
  // 目录列表
  @State list01: string[] = ['第三方服务', '查询', '财富', '转账', '贷款', '跨境金融'];
  @State gridList1: grids[] = [];
  @State sizeList: number[] = [15];
 
  aboutToAppear() {
    ... // 初始化数据
  }
 
  @Builder myBuilder() {
    Row() {
      List({ space: 30, scroller: this.scrollerForTitle }) {
        ForEach(this.list01, (item: string, index) => {
          ListItem() {
            Column() {
              Text(item)
                .fontSize(15)
                .fontWeight(this.sizeList[index] == 15 ? FontWeight.Bold : FontWeight.Regular)
            }
            // .width('25%')
            .height(35)
            .onClick(() => {
              this.scrollerForList.scrollToIndex(index)
              this.scrollerForScroll.scrollEdge(Edge.Bottom)
              this.sizeList = [];
              this.sizeList[index] = 15;
            })
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
    }
    .backgroundColor(Color.White)
    // .alignItems(VerticalAlign.Center)
  }
 
  build() {
    Column(){
      Image($r('app.media.img'))
        .width('100%')
        .height('40')
      Column(){
        Stack({ alignContent: Alignment.Top }) {
          Scroll(this.scrollerForScroll) {
            Column() {
              GridDemo01({
                gridList: new grids('精选',
                  ['理财', '基金', '外汇购入', '朝朝盈', '多宝理财', '银行卡转入', '薪福专区', '网点预约'])
              }).backgroundColor(Color.White)
              this.myBuilder();
              Divider()
                .color('#d9d4d4')
                .strokeWidth(5)
              List({ space: 10, scroller: this.scrollerForList }) {
                ForEach(this.gridList1, (item: grids, index) => {
                  GridDemo01({ gridList: item })
                    .onVisibleAreaChange([0.8], (isVisible) => {
                      if (isVisible) {
                        // 二级联动
                        this.currentIndex = index;
                        this.scrollerForTitle.scrollToIndex(this.currentIndex);
                      }
                    })
                }, (item: grids) => item.gridname)
              }
              .padding({ left: 10, right: 10 })
              .width("100%")
              .edgeEffect(EdgeEffect.None)
              .scrollBar(BarState.Off)
              // Scroll到达起始位置时触发。
              .onReachStart(() => {
                this.listPosition = ScrollPosition.start
              })
              // Scroll到达末尾位置时触发。
              .onReachEnd(() => {
                this.listPosition = ScrollPosition.end
              })
              // 获取List显示区域内第一个子组件的索引值
              .onScrollIndex((start: number, end: number, center: number) => {
                this.sizeList = [];
                this.sizeList[start] = 15;
              })
              .onScrollFrameBegin((offset: number, state: ScrollState) => {
                // 滑动到列表中间时
                if (!((this.listPosition == ScrollPosition.start && offset < 0)
                  || (this.listPosition == ScrollPosition.end && offset > 0))) {
                  this.listPosition = ScrollPosition.center
                }
                // 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量
                if (this.scrollPosition == ScrollPosition.end
                  && (this.listPosition != ScrollPosition.start || offset > 0)) {
                  return { offsetRemain: offset };
                } else {
                  this.scrollerForScroll.scrollBy(0, offset)
                  return { offsetRemain: 0 };
                }
              })
              .width("100%")
              .height("calc(100% - 40vp)")
              .backgroundColor('#F1F3F5')
            }
          }
          .scrollBar(BarState.Off)
          .width("100%")
          .height("100%")
          .onScroll((xOffset: number, yOffset: number) => {
            this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset;
 
            // 非（页面在顶部或页面在底部），则页面在中间
            if (!((this.scrollPosition == ScrollPosition.start && yOffset < 0)
              || (this.scrollPosition == ScrollPosition.end && yOffset > 0))) {
              this.scrollPosition = ScrollPosition.center
            }
          })
          .onScrollEdge((side: Edge) => {
            if (side == Edge.Top) {
              // 页面在顶部
              this.scrollPosition = ScrollPosition.start
            } else if (side == Edge.Bottom) {
              // 页面在底部
              this.scrollPosition = ScrollPosition.end
            }
          })
          .onScrollFrameBegin(offset => {
            if (this.scrollPosition == ScrollPosition.end) {
              return { offsetRemain: 0 };
            } else {
              return { offsetRemain: offset };
            }
          })
        }
        .width('100%')
        .height('100%')
        .backgroundColor(0xDCDCDC)
      }
    }
  }
}

@Component
struct GridDemo01 {
  @State gridList: grids = new grids('', []);
  @State isfla: boolean = false;
 
  build() {
    Column() {
      Grid() {
        GridItem() {
          Text(this.gridList.gridname)
            .fontSize(20)
            .height(30)
        }
      }
      Grid() {
        ForEach(this.gridList.gridList, (item: string, index) => {
          GridItem() {
            Column() {
              Image($r(`app.media.icons${index + 1}`))
                .syncLoad(true)
                .width(40)
                .height(40)
              Text(item)
                .fontSize(12)
            }
          }
        })
      }
      .columnsGap(20)
      .height(75 * (this.gridList.gridList.length / 4) + (this.gridList.gridList.length % 4 > 0 ? 75 : 0))
      .rowsGap(20)
      .scrollBar(BarState.Off)
      .columnsTemplate('1fr 1fr 1fr 1fr')
    }
  }
}

场景二：Grid与swiper相互嵌套使用。

方案

  1. Grid与swiper相互嵌套使用，通过多层遍历存放Grid容器组件的自定义组件来达到分页效果。
  2. 每一页里面功能菜单的数量存储至分页数组gridColList1。根据存入的值遍历拆分总菜单数。
  3. onGestureSwipe功能为页面跟手滑动过程中，逐帧触发该回调。使用extraInfo.currentOffset大小判断向左向右滑动，在向左向右滑动的时候逐帧修改分页的高度，来形成在滑动下一页的时候分页与下方瀑布流形成联动效果。
  4. onAnimationStart的效果为当滑动到一半不足以滑动到下一页，高度回弹，能够使高度以动画的效果回弹到未滑动前的高度。

核心代码

import { display } from '@kit.ArkUI';
 
@Entry
@Component
struct GridDemo {
  @State message: string = 'Hello World';
  @State numberList: number[] =
    [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];
  private swiperController: SwiperController = new SwiperController()
  @State gridColList: number = 0; // 第一页数据量
  // @State gridColList1:ArrayList<number> = new ArrayList() // 遍历页数
  @State gridColList1: number[] = [10, 30];
  @State gridcol: number = 10; // 断点值
  @State swiperDistance: number = 150;
  @State displayWidth: number = 0;
 
  onChage() {
    console.log('this.gridColList1:' + this.gridColList1);
  }
 
  aboutToAppear(): void {
    // 获取屏幕大小，用于后续计算卡片的偏移量
    const displayData: display.Display = display.getDefaultDisplaySync();
    this.displayWidth = px2vp(displayData.width);
    console.log('displayWidth:', this.displayWidth)
  }
 
  build() {
    Row() {
      Column() {
        // 修改成搜索框
        Image($r('app.media.text02'))
          .width("100%")
          .height('40')
 
        Swiper(this.swiperController) {
          ForEach(this.gridColList1, (item: number, index) => {
            Child({ numberList: this.numberList.slice(index * this.gridColList1[index-1], item) })
            // Child({numberList:this.numberList.slice(this.gridColList,this.gridcol)})
          })
        }
        .onChange(() => {
          console.log('swiperDistance=', this.swiperDistance)
          console.log('displayWidth=', this.displayWidth)
        })
        .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
          animateTo({
            duration: 700,
            curve: Curve.Smooth,
            playMode: PlayMode.Normal,
            onFinish: () => {
            }
          }, () => { // 通过左右滑动的距离来计算对应的上下位置的变化
            if (extraInfo.currentOffset < 0) { // 向左偏移
              this.swiperDistance = 250
            } else if (extraInfo.currentOffset > 0) { // 向右偏移
              this.swiperDistance = 150
            }
          })
        })
        .onAnimationStart((_: number, targetIndex: number) => {
          animateTo({
            duration: 700,
            curve: Curve.Smooth,
            playMode: PlayMode.Normal,
            onFinish: () => {
            }
          }, () => {
            if (targetIndex === 0) {
              this.swiperDistance = 150;
            } else if (targetIndex === 1) {
              this.swiperDistance = 250;
            }
          })
        })
        .height(this.swiperDistance)
 
        WaterFlowDemo()
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Child {
  @Prop numberList: number[];
  @State hei: number = 120
 
  build() {
    Grid() {
      ForEach(this.numberList, (item: number) => {
        GridItem() {
          Column() {
            Image($r('app.media.app_icon'))
              .width(20)
              .height(20)
            Text("菜单" + item)
              .fontSize(15)
          }
        }
      })
    }
    .columnsGap(20)
    .rowsGap(20)
    .scrollBar(BarState.Off)
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
    .height(50 * this.numberList.length / 4)
    .animation({
      duration: 1000
    })
  }
}

 

hongxiaomeng
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【HarmonyOS NEXT应用开发】案例95：基于Grid实现混合布局
xzs51job的专栏
08-25 8
⦁ 通过ForEach遍历出来的功能目录，与ForEach遍历出来的详细菜单列表，目录与内容两者的index值一致，两个分属不同的List列表，可以关联不同的Scroll值，可以通过scrollToIndex方法来使两个列表形成二级联动效果。⦁ 通过onScrollFrameBegin事件计算实时滚动量，滚动整个页面，使上方精选布局滚动，如果页面已滚动到底部，列表不在顶部或列表有正向偏移量，则使页面上方精选部分自动上滑，功能列表置顶。根据存入的值遍历拆分总菜单数。
ExtJS4.2实例：表格Grid嵌套(内部Grid)-MVC模式
weixin_33982670的博客
08-28 440
前文ExtJS4.2 Grid嵌套实例中讲解了如何在表格Grid中嵌套Grid，即外部Grid中每行分别展现为不同的内部Grid，比如常见的费用报销业务，费用类别有往返车费和住宿费，其中往返车费需要填写往返类型、交通工具、费用日期、出发地、目的地和金额，住宿费只需填写入住日期、离开日期、单价和金额，在一个表格中包含多种费用类别，每个费用类别下又有多条明细，所需实现的业务场景图...
10.介绍一下CSS中的Grid网格布局?
kleinBlue.的博客
11-07 771
一、是什么 Grid布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法 <divclass="container"> <divclass="itemitem-1"> ...
【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
最新发布
m0_62599305的博客
11-07 2565
Grid容器组件：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid容器组件：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
Grid 布局
ciguanpeng7618的博客
06-22 136
1：基本布局 Grid 布局是二维的基于网格的布局系统，它可以同时处理列和行（这是对比flex弹性盒模型布局而言）；第一个专门为解决布局问题而生的CSS模块。 几个基本概念： Grid Container，又叫做Grid容器，就是设置了display：grid的元素。 .main{ ...
grid布局
webprevious的博客
06-30 184
grid网格布局 网格布局是目前强大的css布局方案，它将网页划分成一个个网格，grid网格布局跟flex有些类似，但是flex布局是针对项目item轴线位置，相当于一维布局，而网格布局是指定项目item所在的单元格，可以看成是二维布局。 grid网格布局概念 区分容器container和项目item，跟flex类似 容器内水平区域成为行row，垂直区域称为列column，行和列交叉区域称...
grid 布局
Mark
02-29 279
1、认识 grid 布局 grid 布局（网格布局） 和 flex 布局一样，都是 CSS3 的新布局模式，但 flex 布局是一维布局，grid 布局是二维布局，相比传统布局 gtid 布局在页面整体划分上更加出色，而且它并不是只能单独使用，依然可以搭配 flex 布局以及传统定位布局一起使用。总之 grid 布局功能强大，虽然目前存有部分浏览器兼容问题，但问题不大。 先来了解几个 grid...
GRID布局
ssh6666的博客
03-26 243
GRID布局 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 格布局设置:...
Grid布局
m0_52386161的博客
01-12 261
01 简介 Grid 布局是 CSS 中最强大的布局方案，它将网页划分成一一个个网格,可以任意组合不同的网格，做出各种各样的布局。 与 flex 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。 Grid属性分为两类，一类作用于grid容器，一类作用于grid子项目上 属性繁多，按需选用 参考：CSS Grid 布局完全指南(图解 Grid 详细教程) https://www.html.cn/archives/8510#prop-grid-te.
基于grid布局实现的响应式栅格系统
09-10
在响应式栅格系统中，使用百分比或弹性单位（如`fr`）可以实现流体布局，即网格项的宽度随窗口大小变化而变化。这样，栅格系统能够自动适应各种屏幕尺寸，提供更好的用户体验。 6. 自适应断点和栅格切换： 结合...
grid-system:布局网格系统
03-19
总结一下，"grid-system"是一个基于Sass的布局工具，用于创建响应式网格布局。通过使用npm管理和编译Sass源码，我们可以将其集成到项目中，并通过添加特定的类到HTML元素来利用其功能。深入学习和实践使用这个grid-...
nth-grid:Nth Grid是功能强大的网格系统，可让您创建语义的水平或垂直网格布局
05-07
Nth Grid是一个易于使用但功能强大的基于Flexbox的Sass网格混合框架。 Nth Grid允许您仅使用2个简单易用的mixins来创建水平和垂直网格布局。 您可以自由使用自己的标记，并且没有负边距， .last类等。我们使用:nth...
结合Grid布局实现更灵活的页面结构设计
Grid布局是一种二维的布局系统，它可以让开发者在网页中以网格的形式来排列元素，实现更加灵活和精准的布局。通过将容器划分为行和列，可以轻松地控制元素在网页中的位置和大小。 ## 1.2 Grid布局与传统布局的对比 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值