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

张紫娃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 })
  }
}
相关推荐
BullSmall25 分钟前
《道德经》第六十七章
学习
qy-ll29 分钟前
最新MMO-IG生成图像论文学习（25/11/19）
图像处理·深度学习·学习·计算机视觉·论文学习·遥感
fmk10231 小时前
TailwindCSS 学习笔记
笔记·学习
摇滚侠1 小时前
Vue 项目实战《尚医通》，完成确定挂号业务，笔记46
java·开发语言·javascript·vue.js·笔记
摇滚侠2 小时前
Vue 项目实战《尚医通》，完成取消预约业务，笔记49
vue.js·笔记
Just right2 小时前
AndroidApp笔记环境配置
笔记
月下的郁王子2 小时前
进阶学习 PHP 中的二进制和位运算
android·学习·php
xinxingrs2 小时前
贪心算法、动态规划以及相关应用（python）
笔记·python·学习·算法·贪心算法·动态规划
sensen_kiss3 小时前
INT301 Bio-computation 生物计算（神经网络）Pt.8 主成分分析（PCA）与无监督学习
神经网络·学习·线性代数·机器学习
四谎真好看3 小时前
Java 黑马程序员学习笔记（进阶篇28）
java·笔记·学习·学习笔记
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连04UV安装并设置国内源05Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07Linux下V2Ray安装配置指南08今天 Cloudflare 全球事故，连 GPT 和你的网站都一起“掉线”了09全球最强模型Grok4，国内已可免费使用！（附教程）1046个Nano-banana 精选提示词，持续更新中