[应用开发]HarmonyOS鸿蒙Next中分享一种Grid布局
[应用开发]HarmonyOS鸿蒙Next中分享一种Grid布局 随易App开发实战 ：GridCol组件设计开发
项目地址：app_EasyRandom: 随易app (gitee.com)
本页面位于项目AllasOne页面中
本案例，分享一个GridCol组件的响应式布局
效果如下：
![cke_4347.png](data-originheight=“934” data-originwidth=“2035” src="https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/036/505/009/0070086000036505009.20241015225416.14852299939045668104179057534345:50001231000000:2800:16D379CBCD4852230FB352836E47FE5E568CE3C5C23B2C8D76999406FA100A0F.png)
完整代码如下，使用时将最内部的子组件替换为你自己的即可：
import BaGuaCard from '../widgets/BaGuaCard'
import FlipCoinCard from '../widgets/FlipCoinCard'
import RandomColorsCard from '../widgets/RandomColorsCard'
import RollBlessingsCard from '../widgets/RollBlessingsCard'
import RollDiceCard from '../widgets/RollDiceCard'
import RollWheelCard from '../widgets/RollWheelCard'
import { Blessings, Dices, Coin } from '../widgets/Components'
const tag = 'AddFormMenuItem'
@Entry
@Component
struct AllasOne {
private readonly titleFontColor = 0x333333
private readonly titleFontSize = 16
private readonly cardBorderRadius = 24
build() {
Scroll() {
GridRow({
columns: {
sm: 4,
md: 8,
lg: 12
},
gutter: 24
}) {
//八卦
GridCol({
span: 2,
offset: 0
}) {
Column() {
BaGuaCard()
.width('100%')
.aspectRatio(1)
.backgroundColor(0xffffff)
.borderRadius(this.cardBorderRadius)
.clip(true)
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.9 })
Row() {
Text($r("app.string.BaGuaCard_display_name"))
.textAlign(TextAlign.Center)
.fontSize(this.titleFontSize)
.fontColor(this.titleFontColor)
.border({ style: BorderStyle.Solid, width: 1, color: 0xfffffff })
}
.width('100%')
.aspectRatio(5)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}
.width('100%')
.height('100%')
}
.aspectRatio(10 / 12)
//硬币
GridCol({
span: 2,
offset: 0
}) {
Column() {
Coin()
.width('100%')
.aspectRatio(1)
.backgroundColor(0xffffff)
.borderRadius(this.cardBorderRadius)
.clip(true)
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.9 })
Row() {
Text($r("app.string.FlipCoinCard_display_name"))
.textAlign(TextAlign.Center)
.fontSize(this.titleFontSize)
.fontColor(this.titleFontColor)
.border({ style: BorderStyle.Solid, width: 1, color: 0xfffffff })
}
.width('100%')
.aspectRatio(5)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}
.width('100%')
.height('100%')
}
.aspectRatio(10 / 12)
//骰子
GridCol({
span: 2,
offset: 0
}) {
Column() {
Dices()
.width('100%')
.aspectRatio(1)
.backgroundColor(0xffffff)
.borderRadius(this.cardBorderRadius)
.clip(true)
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.9 })
Row() {
Text($r("app.string.RollDiceCard_display_name"))
.textAlign(TextAlign.Center)
.fontSize(this.titleFontSize)
.fontColor(this.titleFontColor)
.border({ style: BorderStyle.Solid, width: 1, color: 0xfffffff })
}
.width('100%')
.aspectRatio(5)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}
.width('100%')
.height('100%')
}
.aspectRatio(10 / 12)
//颜色
GridCol({
span: 2,
offset: 0
}) {
Column() {
RandomColorsCard()
.width('100%')
.aspectRatio(1)
.backgroundColor(0xffffff)
.borderRadius(this.cardBorderRadius)
.clip(true)
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.9 })
Row() {
Text($r("app.string.RandomColorsCard_display_name"))
.textAlign(TextAlign.Center)
.fontSize(this.titleFontSize)
.fontColor(this.titleFontColor)
.border({ style: BorderStyle.Solid, width: 1, color: 0xfffffff })
}
.width('100%')
.aspectRatio(5)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}
.width('100%')
.height('100%')
}
.aspectRatio(10 / 12)
//转盘
GridCol({
span: 2,
offset: 0
}) {
Column() {
RollWheelCard()
.width('100%')
.aspectRatio(1)
.backgroundColor(0xffffff)
.borderRadius(this.cardBorderRadius)
.clip(true)
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.9 })
Row() {
Text($r("app.string.RollWheelCard_display_name"))
.textAlign(TextAlign.Center)
.fontSize(this.titleFontSize)
.fontColor(this.titleFontColor)
.border({ style: BorderStyle.Solid, width: 1, color: 0xfffffff })
}
.width('100%')
.aspectRatio(5)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}
.width('100%')
.height('100%')
}
.aspectRatio(10 / 12)
//木鱼
GridCol({
span: 2,
offset: 0
}) {
Column() {
Blessings()
.width('100%')
.aspectRatio(1)
.backgroundColor(0xffffff)
.borderRadius(this.cardBorderRadius)
.clip(true)
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.9 })
Row() {
Text($r("app.string.RollBlessingsCard_display_name"))
.textAlign(TextAlign.Center)
.fontSize(this.titleFontSize)
.fontColor(this.titleFontColor)
.border({ style: BorderStyle.Solid, width: 1, color: 0xfffffff })
}
.width('100%')
.aspectRatio(5)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}
.width('100%')
.height('100%')
}
.aspectRatio(10 / 12)
//转盘
GridCol({
span: 4,
offset: 0
}) {
Column() {
RollWheelCard()
.width('100%')
.aspectRatio(1)
.backgroundColor(0xffffff)
.borderRadius(this.cardBorderRadius)
.clip(true)
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.9 })
Row() {
Text($r("app.string.RollWheelCard_display_name"))
.textAlign(TextAlign.Center)
.fontSize(this.titleFontSize)
.fontColor(this.titleFontColor)
.border({ style: BorderStyle.Solid, width: 1, color: 0xfffffff })
}
.width('100%')
.aspectRatio(10)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}
.width('100%')
.height('100%')
}
.aspectRatio(10 / 11)
}
.padding(24)
.backgroundColor(0xf1f3f5)
.width('100%')
}
.height('100%')
.width('100%')
.scrollable(ScrollDirection.Vertical)
}
}
export default AllasOne
更多关于[应用开发]HarmonyOS鸿蒙Next中分享一种Grid布局的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
在HarmonyOS鸿蒙Next中，Grid布局是一种用于在界面上排列子组件的布局方式。Grid布局通过将界面划分为行和列的网格，使得子组件可以按照指定的行和列进行排列。Grid布局的主要属性包括rows和columns，分别用于定义网格的行数和列数。子组件可以通过row和column属性指定其在网格中的位置。此外，rowSpan和columnSpan属性可以用于控制子组件跨越的行数和列数。Grid布局还支持alignment属性，用于调整子组件在网格单元中的对齐方式。通过合理使用这些属性，开发者可以灵活地构建复杂的界面布局。
更多关于[应用开发]HarmonyOS鸿蒙Next中分享一种Grid布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
