【鸿蒙学习笔记】页面布局

张紫娃2024-07-08 22:22

官方文档：布局概述

常见页面结构图

布局元素的组成

线性布局（Row、Column）

了解思路即可，更多样例去看官方文档

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Column() {
      Column({ space: 20 }) {
        Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
        Row().width('90%').height(50).backgroundColor(0xF5DEB3)
        Row().width('90%').height(50).backgroundColor(0xD2B48C)
        Row().width('90%').height(50).backgroundColor(0xF5DEB3)
      }.width('100%')

      Divider().height(20)

      Row({ space: 35 }) {
        Text('space: 35').fontSize(15).fontColor(Color.Gray)
        Row().width('10%').height(150).backgroundColor(0xF5DEB3)
        Row().width('10%').height(150).backgroundColor(0xD2B48C)
        Row().width('10%').height(150).backgroundColor(0xF5DEB3)
      }.width('90%')
    }
  }
}

层叠布局 (Stack)

了解思路即可，更多样例去看官方文档

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Text('Stack').width('90%').height('100%').backgroundColor(Color.Yellow).align(Alignment.BottomStart)
      Text('Item 1').width('70%').height('80%').backgroundColor(Color.Green).align(Alignment.BottomStart)
      Text('Item 2').width('50%').height('60%').backgroundColor(Color.Pink).align(Alignment.BottomStart)
    }.width('100%').height(150).margin({ top: 5 })
  }
}

弹性布局（Flex）

了解思路即可，更多样例去看官方文档

布局方向

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Row }) {
        Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(Color.Orange)

      Flex({ direction: FlexDirection.RowReverse }) {
        Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(0xAFEEEE)

      Flex({ direction: FlexDirection.Column }) {
        Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(Color.Orange)

      Flex({ direction: FlexDirection.ColumnReverse }) {
        Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(0xAFEEEE)
    }
  }
}

布局换行

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Column() {
      Flex({ wrap: FlexWrap.NoWrap }) {
        Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
      }.width('100%').padding(10).backgroundColor(Color.Orange)

      Flex({ wrap: FlexWrap.Wrap }) {
        Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
      }.width('100%').padding(10).backgroundColor(0xAFEEEE)

      Flex({ wrap: FlexWrap.WrapReverse}) {
        Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
      }.width('100%').padding(10).backgroundColor(Color.Orange)
    }
  }
}

主轴对齐方式

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Flex({ justifyContent: FlexAlign.Start }) {
        Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
      }
      .width('90%')
      .padding({ 'top': 10, 'bottom': 10 })
      .backgroundColor(0xAFEEEE)
  }
}

未完待续

相对布局 (RelativeContainer)

了解思路即可，更多样例去看官方文档

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100).backgroundColor(Color.Red)
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            left: { anchor: "__container__", align: HorizontalAlign.Start }
          }).id("row1")

        Row().width(100).backgroundColor(Color.Black)
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            right: { anchor: "__container__", align: HorizontalAlign.End },
            bottom: { anchor: "row1", align: VerticalAlign.Center },
          }).id("row2")

        Row().height(100).backgroundColor(Color.Blue)
          .alignRules({
            top: { anchor: "row1", align: VerticalAlign.Bottom },
            left: { anchor: "row1", align: HorizontalAlign.Start },
            right: { anchor: "row2", align: HorizontalAlign.Start }
          }).id("row3")

        Row().backgroundColor(Color.Green)
          .alignRules({
            top: { anchor: "row3", align: VerticalAlign.Bottom },
            left: { anchor: "row1", align: HorizontalAlign.Center },
            right: { anchor: "row2", align: HorizontalAlign.End },
            bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
          }).id("row4")
      }.width(300).height(300).margin({ left: 50 }).border({ width: 2, color: Color.Orange })
    }.height('100%')
  }
}

栅格布局 (GridRow/GridCol)

了解思路即可，更多样例去看官方文档

cpp 复制代码 
@Entry
@Component
struct PracExample {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];

  build() {
    Column() {
      GridRow({ columns: 10 }) {
        ForEach(this.bgColors, (color: Color, index?: number | undefined) => {
          GridCol({ span: 2 }) {
            Row() {Text(`${index}`)}.width('100%').height('50vp')
          }.backgroundColor(color)
        })
      }
    }
  }
}

媒体查询 (@ohos.mediaquery)

需要消化

创建列表 (List)

列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Column({ space: 5 }) {
      List() {
        ListItem() {
          Row() {
            Image($r('app.media.icon')).width(40).height(40).margin(10)
            Text('小明').fontSize(20)
          }
        }

        ListItem() {
          Row() {
            Image($r('app.media.ic_main')).width(40).height(40).margin(10)
            Text('小红').fontSize(20)
          }
        }
      }
    }.width('100%').height('100%')
  }
}

创建网格 (Grid/GridItem)

网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

cpp 复制代码 
@Entry
@Component
struct PracExample {
  @State services: Array<string> = ['会议', '投票', '签到', '打印']

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

创建轮播 (Swiper)

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

cpp 复制代码 
@Entry
@Component
struct PracExample {
  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 })
  }
}

选项卡 (Tabs)

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。

cpp 复制代码 
@Entry
@Component
struct PracExample {
  build() {
    Column({ space: 5 }) {
      Tabs() {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }.width('100%').margin({ top: 5 })
  }
}
相关推荐
轻口味11 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
无处安放的波澜14 分钟前
【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)
华为·harmonyos·arkts·鸿蒙·鸿蒙系统
虾球xz18 分钟前
游戏引擎学习第55天
学习·游戏引擎
oneouto34 分钟前
selenium学习笔记（二）
笔记·学习·selenium
sealaugh3239 分钟前
aws(学习笔记第十九课) 使用ECS和Fargate进行容器开发
笔记·学习·aws
李洋-蛟龙腾飞公司39 分钟前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据文件资产迁移
分布式·华为·harmonyos
炭烤玛卡巴卡1 小时前
学习postman工具使用
学习·测试工具·postman
大土豆的bug记录1 小时前
鸿蒙历史搜索功能：tag标签根据文字宽度自动换行 展示更多
华为·harmonyos
thesky1234561 小时前
活着就好20241224
学习·算法
轻口味2 小时前
【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等
华为·harmonyos
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库