注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

目录

3.2. 响应式布局

3.2.1. 断点

3.2.2. 媒体查询

3.2.2.1. 核心用法

3.2.2.2. 使用查询结果

3.2.2.3. 系统工具-BreakpointSystem

3.2.2.4. 系统工具-BreakPointType

3.2.2.5. 案例-电影列表

3.2.3. 栅格布局 Grid

3.2.3.1. 核心用法

3.2.3.2. 案例-登录界面

3.2. 响应式布局

响应式布局

自适应布局可以保证窗口尺寸在【一定范围内变化】时，页面的显示是正常的。但是将窗口尺寸【变化较大】时（如窗口宽度从400vp变化为1000vp），仅仅依靠自适应布局可能出现图片异常放大或页面内容稀疏、留白过多等问题，此时就需要借助响应式布局能力调整页面结构。

响应式布局是指页面内的元素可以根据特定的特征（如窗口宽度、屏幕方向等）自动变化以适应外部容器变化的布局能力。

响应式布局中最常使用的特征是窗口宽度，可以将窗口宽度划分为不同的范围（下文中称为断点）。当窗口宽度从一个断点变化到另一个断点时，改变页面布局（如将页面内容从单列排布调整为双列排布甚至三列排布等）以获得更好的显示效果。

三种响应式布局能力：

响应式布局能力

简介

断点

将窗口宽度划分为不同的范围（即断点），监听窗口尺寸变化，当断点改变时同步调整页面布局。

媒体查询

媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局。

栅格布局

栅格组件将其所在的区域划分为有规律的多列，通过调整不同断点下的栅格组件的参数以及其子组件占据的列数等，实现不同的布局效果。

3.2.1. 断点

断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，在不同的区间下，开发者可根据需要实现不同的页面布局效果。

断点名称

取值范围（vp）

设备

xs

[0, 320）

手表等超小屏

sm

[320, 600)

手机竖屏

md

[600, 840)

手机横屏，折叠屏

lg

[840, +∞)

平板，2in1 设备

tips:

  1. 不需要记住范围
  2. 记住断点名称及设备的关系即可

系统提供了多种方法，判断应用当前处于何种断点，进而可以调整应用的布局。常见的监听断点变化的方法如下所示：

  • 获取窗口对象并监听窗口尺寸变化（了解）
  • 通过媒体查询监听应用窗口尺寸变化（掌握）
  • 借助栅格组件能力监听不同断点的变化（掌握）

通过窗口对象，监听窗口尺寸变化（了解）

  1. 在 EntryAbility 中添加监听


import window from '@ohos.window'
import display from '@ohos.display'
import UIAbility from '@ohos.app.ability.UIAbility'

export default class EntryAbility extends UIAbility {
  private windowObj?: window.Window
  private curBp: string = ''
  //...
  // 根据当前窗口尺寸更新断点
  private updateBreakpoint(windowWidth: number) :void{
    // 将长度的单位由px换算为vp
    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels
    let newBp: string = ''
    if (windowWidthVp < 320) {
      newBp = 'xs' // 超小屏
    } else if (windowWidthVp < 600) {
      newBp = 'sm' // 小屏
    } else if (windowWidthVp < 840) {
      newBp = 'md' // 中屏
    } else {
      newBp = 'lg' // 大屏
    }
    if (this.curBp !== newBp) {
      this.curBp = newBp
      // 使用状态变量记录当前断点值
      AppStorage.setOrCreate('currentBreakpoint', this.curBp)
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage) :void{
    windowStage.getMainWindow().then((windowObj) => {
      this.windowObj = windowObj
      // 获取应用启动时的窗口尺寸
      this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width)
      // 注册回调函数，监听窗口尺寸变化
      windowObj.on('windowSizeChange', (windowSize)=>{
        this.updateBreakpoint(windowSize.width)
      })
    });
   // ...
  }
   
  //...
}

  1. 页面中使用断点信息

@Entry
@Component
struct Index {
  @StorageProp('currentBreakpoint') curBp: string = 'sm'

  build() {
    Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
      Text(this.curBp).fontSize(50).fontWeight(FontWeight.Medium)
    }
    .width('100%')
    .height('100%')
  }
}

注意:

调试要在真机或者模拟器上, 在预览器中无法监听

3.2.2. 媒体查询

媒体查询

媒体查询常用于下面两种场景：

  1. 针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
  2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。

相比于上一节演示的 通过窗口对象监听尺寸变化，媒体查询的功能会更为强大

3.2.2.1. 核心用法

咱们分 2 个角度来看看如何使用媒体查询

  1. 整合步骤（重要）

导入模块 ---> 创建监听器 ---> 注册监听器 ---> 移除监听器

  1. 调整媒体查询条件（了解）

// 1. 导入 模块
import { mediaquery } from '@kit.ArkUI'

// 2. 创建监听器 
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)');
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)');

// 3. 注册监听器
// 组件即将创建出来
aboutToAppear(): void {
  // 添加回调函数
  listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
    console.log('changeRes:', JSON.stringify(res))
    // 执行逻辑
  })
  listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {
    console.log('changeRes:', JSON.stringify(res))
    // 执行逻辑
  })
}

// 4. 移除监听器
// 即将销毁
aboutToDisappear(): void {
  // 移除监听 避免性能浪费
  listenerXS.off('change')
  listenerSM.off('change')
}

注意:写范围的时候不要省略小括号试一试：参考示例代码：完成 4 个断点的监听

断点名称

取值范围（vp）

设备

xs

[0, 320）

手表等超小屏

sm

[320, 600)

手机竖屏

md

[600, 840)

手机横屏，折叠屏

lg

[840, +∞)

平板，2in1 设备

 

// 1. 导入媒体查询模块
import { mediaquery } from '@kit.ArkUI'

// 2. 创建监听器
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)')
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)')
const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)')
const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(840vp<=width)')


@Entry
@Component
struct Demo09 {
  @State breakPoint: string = ''
  @State bgColor: Color = Color.White

  aboutToAppear(): void {
    // 3. 注册监听器
    listenerXS.on('change', (res: mediaquery.MediaQueryResult)=>{
      // 尺寸符合要求则结果为true {"matches":true,"media":"(0vp<=width<320vp)"}
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'XS'
        this.bgColor = Color.Red
      }
    })
    listenerSM.on('change', (res: mediaquery.MediaQueryResult)=>{
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'SM'
        this.bgColor = Color.Green
      }
    })
    listenerMD.on('change', (res: mediaquery.MediaQueryResult)=>{
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'MD'
        this.bgColor = Color.Blue
      }
    })
    listenerLG.on('change', (res: mediaquery.MediaQueryResult)=>{
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'LG'
        this.bgColor = Color.Pink
      }
    })
  }

  aboutToDisappear(): void {
    // 4. 移除监听器
    listenerXS.off('change')
    listenerSM.off('change')
    listenerMD.off('change')
    listenerLG.off('change')
  }

  build() {
    RelativeContainer() {
      Text(this.breakPoint)
        .id('Demo09HelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
    .expandSafeArea([SafeAreaType.SYSTEM])
    .backgroundColor(this.bgColor)
  }

}

3.2.2.2. 使用查询结果

目前查询的内容只在当前页面可以使用，如果希望应用中任意位置都可以使用，咱们可以使用AppStorage 进行共享

核心步骤：

  1. 事件中通过 AppStorage.set(key,value)的方式保存当前断点值
  2. 需要使用的位置通过 AppStorage 来获取即可

// 添加回调函数
listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
  console.log('changeRes:', JSON.stringify(res))
  if (res.matches == true) {
    // this.currentBreakpoint = 'xs'
    AppStorage.set('currentBreakpoint', 'xs')
  }
})

// 组件中引入 AppStorage
@StorageProp('currentBreakpoint') currentBreakpoint: CurrentBreakpoint = 'xs'

// 在需要的位置使用 AppStorage 中保存的断点值
Text(this.currentBreakpoint)

// 1. 导入模块
import { mediaquery } from '@kit.ArkUI'

// 2. 创建监听器
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)')
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)')
const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)')
const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(800vp<=width)')


@Entry
@Component
struct Index {
  // @State curBp: string = ''

  @StorageProp('currentBreakPoint') currentBreakPoint: string = 'sm'

  aboutToAppear(): void {
    listenerXS.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
        if(res.matches){
          // this.curBp = 'xs'
          AppStorage.set('currentBreakPoint', 'xs')
        }
    })

    listenerSM.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
      if(res.matches){
         // this.curBp = 'sm'
        AppStorage.set('currentBreakPoint', 'sm')
      }
    })

    listenerMD.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
      if(res.matches){
        // this.curBp = 'md'
        AppStorage.set('currentBreakPoint', 'md')
      }
    })

    listenerLG.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
      if(res.matches){
        // this.curBp = 'lg'
        AppStorage.set('currentBreakPoint', 'lg')
      }
    })
  }

  aboutToDisappear(): void {
    listenerXS.off('change')
    listenerSM.off('change')
    listenerMD.off('change')
    listenerLG.off('change')
  }


  build() {
    Column(){
      Text(this.currentBreakPoint).fontSize(50).fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

试一试:

  1. 参考文档，增加深色模式查询

深色模式

// 1. 引入模块
import { mediaquery } from '@kit.ArkUI'

// 2. 创建监听器
const listenerDark: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(dark-mode: true)')

@Entry
@Component
struct Demo09 {
  @State message: string = '';

  aboutToAppear(): void {
    // 3. 注册监听器
    listenerDark.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('深色模式', JSON.stringify(res))
      this.message = res.matches ? '深色模式' : '亮色模式'
    })
  }

  // 4. 移除监听器
  aboutToDisappear(): void {
    listenerDark.off('change')
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Demo09HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

3.2.2.3. 系统工具-BreakpointSystem

媒体查询

了解了媒体查询的核心语法之后，咱们来看看一个 媒体查询监听断点的小工具，这个工具是基于官方代码调整而来

工具代码：

import { mediaquery } from '@kit.ArkUI'

interface Breakpoint {
  name: string
  size: number
  mediaQueryListener?: mediaquery.MediaQueryListener
}

export const BreakpointKey: string = 'currentBreakpoint'

export class BreakpointSystem {
  private currentBreakpoint: string = 'md'
  private breakpoints: Breakpoint[] = [
    { name: 'xs', size: 0 }, { name: 'sm', size: 320 },
    { name: 'md', size: 600 }, { name: 'lg', size: 840 }
  ]

  public register() {
    this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
      let condition: string
      if (index === this.breakpoints.length - 1) {
        condition = '(' + breakpoint.size + 'vp<=width' + ')'
      } else {
        condition = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)'
      }
      console.log(condition)
      breakpoint.mediaQueryListener = mediaquery.matchMediaSync(condition)
      breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
        if (mediaQueryResult.matches) {
          this.updateCurrentBreakpoint(breakpoint.name)
        }
      })
    })
  }

  public unregister() {
    this.breakpoints.forEach((breakpoint: Breakpoint) => {
      if (breakpoint.mediaQueryListener) {
        breakpoint.mediaQueryListener.off('change')
      }
    })
  }

  private updateCurrentBreakpoint(breakpoint: string) {
    if (this.currentBreakpoint !== breakpoint) {
      this.currentBreakpoint = breakpoint
      AppStorage.set<string>(BreakpointKey, this.currentBreakpoint)
      console.log('on current breakpoint: ' + this.currentBreakpoint)
    }
  }
}

核心用法：

  1. 导入 BreakpointSystem
  2. 实例化BreakpointSystem
  3. aboutToAppear中注册监听事件 aboutToDisappear中移除监听事件
  4. 通过 AppStorage，结合 获取断点值即可
// 1. 导入断点查询类
import { BreakpointSystem, BreakpointKey} from '../common/BreakpointSystem'

@Entry
@Component
struct Demo10 {

  // 5. 获取断点值
  @StorageProp(BreakpointKey) currentBreakpoint: string = 'sm'

  // 2. 实例化断点查询类
  breakpointSystem = new BreakpointSystem()

  // 3. 注册事件监听
  aboutToAppear(): void {
    this.breakpointSystem.register()
  }

  // 4. 移除事件监听
  aboutToDisappear(): void {
    this.breakpointSystem.unregister()
  }

  build() {
    RelativeContainer() {
      Text(this.currentBreakpoint)
        .id('Demo10HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

试一试：

  1. 测试 BreakpointSystem工具的使用
  2. 测试根据断点调整页面结构，比如颜色，比如图片
  3. 考虑 2 种情况即可，比如：
    1. md 为红色，其他为绿色
    2. sm 为图片 A，其他为图片 B
    3. ...
3.2.2.4. 系统工具-BreakPointType

上一节演示的工具可以方便的监听屏幕处于哪个断点范围，咱们可以根据断点调整页面：

  1. 如果是 2 个的情况：用 3 元即可
  2. 如果是 多个的情况：用 3 元就不太方便啦

咱们再来看一个系统提供的工具BreakPointType

下面这份代码可以拷贝到 BreakpointSystem.ets中，他们本来就是在一起的

/*
 定义一个接口类型
 键: 断点值
 值: 泛型
*/
declare interface BreakPointTypeOption<T> {
  xs?: T
  sm?: T
  md?: T
  lg?: T
  xl?: T
  xxl?: T
}

/*
 对外导出一个类
 在实例化的时候接收一个泛型
*/
export class BreakPointType<T> {
  // 选项对象
  options: BreakPointTypeOption<T>

  constructor(option: BreakPointTypeOption<T>) {
    this.options = option
  }

  getValue(currentBreakPoint: string) {
    if (currentBreakPoint === 'xs') {
      return this.options.xs
    } else if (currentBreakPoint === 'sm') {
      return this.options.sm
    } else if (currentBreakPoint === 'md') {
      return this.options.md
    } else if (currentBreakPoint === 'lg') {
      return this.options.lg
    } else if (currentBreakPoint === 'xl') {
      return this.options.xl
    } else if (currentBreakPoint === 'xxl') {
      return this.options.xxl
    } else {
      return undefined
    }
  }
}

核心用法:

需求:

xs: 红色, sm: 绿色, md: 蓝色, lg:粉色

// 1. 导入BreakPointType
import { BreakPointType } from 'xxx'

@entry
@Component
struct ComB {
  // 2. 通过 AppStorage 获取断点值
  @StorageProp('currentBreakpoint') currentBreakpoint: CurrentBreakpoint = 'xs'

  build() {
    Column() {
      Text(this.currentBreakpoint)
    }
    .width(200)
    .height(200)
    .backgroundColor(
      // 3. 实例化 设置不同断点的取值，并通过 getValue 根据当前断点值对应的值
      new BreakPointType({
        xs: Color.Red,
        sm: Color.Yellow,
        md: Color.Blue,
        lg: Color.Green
      }).getValue(this.currentBreakpoint)
    )
  }
}
3.2.2.5. 案例-电影列表

使用刚刚学习的媒体查询工具，结合断点来完成一个案例效果

需求：

  1. xs 及 sm 2 列
  2. md：3 列
  3. lg：4 列

自行拓展：

  1. 设置不同的宽高
  2. 设置不同的圆角尺寸
  3. 设置不同的间隙
  4. 。。。。

基础模版:


interface MovieItem {
  title: string
  img: ResourceStr
}

@Entry
@Component
struct Demo09_demo {
  items: MovieItem[] = [
    { title: '电影标题1', img: $r('app.media.ic_video_grid_1') },
    { title: '电影标题2', img: $r('app.media.ic_video_grid_2') },
    { title: '电影标题3', img: $r('app.media.ic_video_grid_3') },
    { title: '电影标题4', img: $r('app.media.ic_video_grid_4') },
    { title: '电影标题5', img: $r('app.media.ic_video_grid_5') },
    { title: '电影标题6', img: $r('app.media.ic_video_grid_6') },
    { title: '电影标题7', img: $r('app.media.ic_video_grid_7') },
    { title: '电影标题8', img: $r('app.media.ic_video_grid_8') },
    { title: '电影标题9', img: $r('app.media.ic_video_grid_9') },
    { title: '电影标题10', img: $r('app.media.ic_video_grid_10') },
  ]

  build() {
    Grid() {
      ForEach(this.items, (item: MovieItem) => {
        GridItem() {
          Column({ space: 10 }) {
            Image(item.img)
              .borderRadius(10)
            Text(item.title)
              .width('100%')
              .fontSize(20)
              .fontWeight(600)

          }
        }
      })
    }
    .columnsTemplate('1fr 1fr')
    .rowsGap(10)
    .columnsGap(10)
    .padding(10)
  }
}

参考代码:

import { BreakPointType, BreakpointSystem, BreakpointKey } from '../../common/breakpointsystem'

interface MovieItem {
  title: string
  img: ResourceStr
}

@Entry
@Component
struct Demo09_demo {
  items: MovieItem[] = [
    { title: '电影标题1', img: $r('app.media.ic_video_grid_1') },
    { title: '电影标题2', img: $r('app.media.ic_video_grid_2') },
    { title: '电影标题3', img: $r('app.media.ic_video_grid_3') },
    { title: '电影标题4', img: $r('app.media.ic_video_grid_4') },
    { title: '电影标题5', img: $r('app.media.ic_video_grid_5') },
    { title: '电影标题6', img: $r('app.media.ic_video_grid_6') },
    { title: '电影标题7', img: $r('app.media.ic_video_grid_7') },
    { title: '电影标题8', img: $r('app.media.ic_video_grid_8') },
    { title: '电影标题9', img: $r('app.media.ic_video_grid_9') },
    { title: '电影标题10', img: $r('app.media.ic_video_grid_10') },
  ]
  breakpointSystem: BreakpointSystem = new BreakpointSystem()
  @StorageProp(BreakpointKey)
  currentBreakpoint: string = 'sm'

  aboutToAppear(): void {
    this.breakpointSystem.register()
  }

  aboutToDisappear(): void {
    this.breakpointSystem.unregister()
  }

  build() {
    Grid() {
      ForEach(this.items, (item: MovieItem) => {
        GridItem() {
          Column({ space: 10 }) {
            Image(item.img)
              .borderRadius(10)
            Text(item.title)
              .width('100%')
              .fontSize(20)
              .fontWeight(600)

          }
        }
      })
    }
    .columnsTemplate(new BreakPointType({
      xs: '1fr 1fr',
      sm: '1fr 1fr ',
      md: '1fr 1fr 1fr ',
      lg: '1fr 1fr 1fr 1fr '
    }).getValue(this.currentBreakpoint))
    .rowsGap(10)
    .columnsGap(10)
    .padding(10)
  }
}

3.2.3. 栅格布局 Grid

栅格组件的本质是：将组件划分为有规律的多列，通过调整【不同断点】下的【栅格组件的列数】，及【子组件所占列数】实现不同布局

比如：

参考栅格列数设置:

3.2.3.1. 核心用法
// 行
GridRow(属性){
  // 列
  GridCol(属性){
    
  }
}

测试代码:

优先级从上往下：

  1. GridRow breakpoints属性 和 的 onBreakpointChange 事件（了解）
  2. GridRow的 columns 属性、GridCol 的 span 属性（掌握）
  3. GridRow 的 gutter属性、GridCol 的 offset 属性（掌握）
@Entry
@Component
struct Demo12 {
  @State currentBreakPoint: string = 'sm'

  build() {
    Column() {
      // GridRow 默认支持 4 个断点
      //  xs:(0vp<=width<320vp) 智能穿戴，比如手表
      //  sm:(320vp<=width<600vp) 手机
      //  md:(600vp<=width<840vp) 折叠屏
      //  lg:(840vp<=width) 平板
      GridRow() {
        ForEach(Array.from({ length: 12 }), (item: string, index: number) => {
          GridCol() {
            Text(index.toString())
          }
          .height(100)
          .border({ width: 1, color: Color.Black })
        })
      }
      .width('90%')
      .height('90%')
      .border({ width: 1, color: Color.Orange })

      Text(`断点值: ${this.currentBreakPoint}`)
        .fontSize(30)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#dcdfe8')
    .expandSafeArea([SafeAreaType.SYSTEM])
  }
}
@Entry
@Component
struct Demo12 {
  @State currentBreakPoint: string = ''

  build() {
    Column() {
      // GridRow 默认支持 4 个断点
      //  xs:(0vp<=width<320vp) 智能穿戴，比如手表
      //  sm:(320vp<=width<600vp) 手机
      //  md:(600vp<=width<840vp) 折叠屏
      //  lg:(840vp<=width) 平板
      GridRow({
        breakpoints: {
          value: ['320vp', '600vp', '840vp']
        },
        gutter: 10, // 子项之间的间距
        // columns: 12, // 设置一行的总列数, 默认: 一行12列
        // 可以根据断点值, 设置每一行的列数
        columns: {
          xs: 2, // 超小屏, 比如: 手表
          sm: 4, // 小屏幕, 比如: 手机竖屏
          md: 8, // 中等屏幕, 比如: 折叠屏, 手机横屏
          lg: 12, // 大屏幕, 比如: pad
        }
      }) {
        ForEach(Array.from({ length: 2 }), (item: string, index: number) => {
          GridCol({
            // 设置一列占得份数
            // span: 2,
            // 支持不同断点分别设置不同的占用列数
            span: {
              xs: 1,
              sm: 1,
              md: 1,
              lg: 1
            },
            // offset 偏移列数 默认为 0
            // offset: 1, // 偏移一列
            // 支持不同断点分别设置偏移不同的列数
            offset: {
              sm: 1
            }
          }) {
            Text(index.toString())
          }
          .height(100)
          .border({ width: 1, color: Color.Black })
        })
      }
      .width('90%')
      .height('90%')
      .border({ width: 1, color: Color.Orange })
      // 断点发生变化时触发回调
      .onBreakpointChange((breakPoint) => {
        console.log('breakPoint', breakPoint)
        this.currentBreakPoint = breakPoint
      })

      Text(`断点值: ${this.currentBreakPoint}`)
        .fontSize(30)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#dcdfe8')
  }
}

3.2.3.2. 案例-登录界面

结合咱们刚刚学习的 栅格布局。来实现如下效果

需求:

  1. sm：4列，占 4 列
  2. md：8 列，占 6 列，偏移 1
  3. lg: 12 列，占 8 列，偏移 2

基础模版：

@Entry
@Component
struct Demo14 {
  build() {
    Stack() {
      // 辅助用的栅格（顶层粉色区域）
      GridRow({ gutter: 10, columns: { sm: 4, md: 8, lg: 12 } }) {
        ForEach(Array.from({ length: 12 }), () => {
          GridCol()
            .width('100%')
            .height('100%')
            .backgroundColor('#baffa2b4')
        })
      }
      .zIndex(2)
      .height('100%')

      //  内容区域
      GridRow({
        // TODO 分别设置不同断点的 列数

      }) {
        // 列
        GridCol({
          // TODO 分别设置不同断点的 所占列数

          // TODO 分别设置不同断点的 偏移


        }) {
          Column() {
            // logo+文字
            LogoCom()

            // 输入框 + 底部提示文本
            InputCom()

            // 登录+注册账号按钮
            ButtonCom()

          }
        }
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#ebf0f2')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
  }
}

@Component
struct LogoCom {
  build() {
    Column({ space: 5 }) {
      Image($r('app.media.ic_logo'))
        .width(80)
      Text('登录界面')
        .fontSize(23)
        .fontWeight(900)
      Text('登录账号以使用更多服务')
        .fontColor(Color.Gray)
    }
    .margin({ top: 100 })
  }
}

@Component
struct InputCom {
  build() {
    Column() {
      Column() {
        TextInput({ placeholder: '账号' })
          .backgroundColor(Color.Transparent)
        Divider()
          .color(Color.Gray)
        TextInput({ placeholder: '密码' })
          .type(InputType.Password)
          .backgroundColor(Color.Transparent)

      }
      .backgroundColor(Color.White)
      .borderRadius(20)
      .padding({ top: 10, bottom: 10 })

      Row() {
        Text('短信验证码登录')
          .fontColor('#006af7')
          .fontSize(14)
        Text('忘记密码')
          .fontColor('#006af7')
          .fontSize(14)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ top: 10 })

    }
    .padding(5)
    .margin({ top: 80 })

  }
}

@Component
struct ButtonCom {
  build() {
    Column({ space: 10 }) {
      Button('登录')
        .width('90%')
      Text('注册账号')
        .fontColor('#006af7')
        .fontSize(16)
    }
    .margin({ top: 60 })
  }
}

参考代码

@Entry
@Component
struct Demo11_login {
  build() {
    Stack() {
      // 辅助用的栅格（顶层粉色区域）
      GridRow({ gutter: 10, columns: { sm: 4, md: 8, lg: 12 } }) {
        ForEach(Array.from({ length: 12 }), () => {
          GridCol()
            .width('100%')
            .height('100%')
            .backgroundColor('#baffa2b4')
        })
      }
      .zIndex(2)
      .height('100%')

      //  内容区域
      GridRow({
        // TODO 分别设置不同断点的 列数
        columns: {
          sm: 4,
          md: 8,
          lg: 12
        }
      }) {
        // 列
        GridCol({
          // TODO 分别设置不同断点的 所占列数
          span: {
            sm: 4,
            md: 6,
            lg: 8
          },
          // TODO 分别设置不同断点的 偏移
          offset: {
            md: 1,
            lg: 2
          }

        }) {
          Column() {
            // logo+文字
            LogoCom()

            // 输入框 + 底部提示文本
            InputCom()

            // 登录+注册账号按钮
            ButtonCom()

          }
        }
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#ebf0f2')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
  }
}

@Component
struct LogoCom {
  build() {
    Column({ space: 5 }) {
      Image($r('app.media.ic_logo'))
        .width(80)
      Text('登录界面')
        .fontSize(23)
        .fontWeight(900)
      Text('登录账号以使用更多服务')
        .fontColor(Color.Gray)
    }
    .margin({ top: 100 })
  }
}

@Component
struct InputCom {
  build() {
    Column() {
      Column() {
        TextInput({ placeholder: '账号' })
          .backgroundColor(Color.Transparent)
        Divider()
          .color(Color.Gray)
        TextInput({ placeholder: '密码' })
          .type(InputType.Password)
          .backgroundColor(Color.Transparent)

      }
      .backgroundColor(Color.White)
      .borderRadius(20)
      .padding({ top: 10, bottom: 10 })

      Row() {
        Text('短信验证码登录')
          .fontColor('#006af7')
          .fontSize(14)
        Text('忘记密码')
          .fontColor('#006af7')
          .fontSize(14)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ top: 10 })

    }
    .padding(5)
    .margin({ top: 80 })

  }
}

@Component
struct ButtonCom {
  build() {
    Column({ space: 10 }) {
      Button('登录')
        .width('90%')
      Text('注册账号')
        .fontColor('#006af7')
        .fontSize(16)
    }
    .margin({ top: 60 })
  }
}

HarmonyOS赋能资源丰富度建设（第四期）-吴东林

https://developer.huawei.com/consumer/cn/training/classDetail/9fdeeb1a35d64d2fabad3948ae7aab72?type=1?ha_source=hmosclass&ha_sourceId=89000248

# harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

深入浅出 Ascend C：新一代算子开发接口 Aclnn 原理解析与实践

avatar 人工智能6S服务平台
cover

从 Kernel 到可执行程序：Ascend C 单算子 API 的纯 C++ 调用与验证实战摘要

avatar 人工智能6S服务平台
cover

鸿蒙6：面试录音解决方案（上）

avatar 人工智能6S服务平台