重生之我要当前端大王–鸿蒙next篇 02 常用布局组件
第三篇章 鸿蒙next星河版
前言
阅读本章，学习Flex布局、Grid网格布局、Stack层叠布局
一、Flex布局
和html的flex相识，arkUi的flex组件也分为主轴和副轴，并提供声明式api进行设置排布样式，让我们来学习一下
@Entry
@Component
struct Flexs {
build() {
Column() {
Text('鸿蒙next').fontSize(30).fontWeight(FontWeight.Bold).width('100%')
Flex({
wrap:FlexWrap.Wrap,//换行
direction:FlexDirection.Row,//设置主轴
justifyContent:FlexAlign.Start,//设置主轴元素排布
alignItems:ItemAlign.Center//设置副轴元素排布
}){
Text('ArkUI').isText()
Text('ArkTs').isText()
Text('界面开发').isText()
Text('系统能力').isText()
Text('权限控制').isText()
Text('元服务').isText()
}
}
}
}
@Extend(Text)
function isText(){
.fontSize(20)
.padding(15)
.backgroundColor('#f1f1f1')
.margin(5)
}
样式效果：
二、Grid网格布局
学习了解一下语法使用
@Entry
@Component
struct GridPage {
build() {
Column() {
Grid(){
ForEach([1,2,3,4,5,6],(item:number)=>{
GridItem(){
Text(item.toString())
}.backgroundColor(Color.Pink)
})
}
.columnsTemplate('1fr 1fr 1fr')//三列
.rowsTemplate('1fr 1fr')//俩行
.columnsGap(10)//列间距
.rowsGap(10)//行间距
.width('100%')
.height(300)
}
.height('100%')
.width('100%')
}
}
页面效果：
三、Stack层叠布局
使用Stack，元素往下的排在上层
@Entry
@Component
struct Stacks {
build() {
Column() {
Column(){
Stack({alignContent:Alignment.Bottom}){//设置元素排布位置
Image($r('app.media.stack')).borderRadius({topLeft:15,topRight:15})
Row(){
Row({space:10}){
Image($r('app.media.bz_play')).height(25).fillColor(Color.White)
Text('288万').fontColor(Color.White)
}.margin({right:10})
Row({space:10}){
Image($r('app.media.bz_msg')).height(20).fillColor(Color.White)
Text('288万').fontColor(Color.White)
}
Blank()
Text('4：33').fontColor(Color.White)
}
.padding({left:10,right:5})
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
.width('100%')
}.width('100%')
.height(200)
.backgroundColor(Color.Gray)
Column(){}
Text('【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣流派推广曲》')
.fontSize(18)
.maxLines(2)
.textOverflow({overflow:TextOverflow.Ellipsis})
.margin({top:10})
Row(){
Text('19万点赞').width(70).height(25).backgroundColor(Color.Orange).fontSize(16)
Image($r('app.media.bz_more')).height(20)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.padding(10)
}
.height(300)
.backgroundColor(Color.White)
.borderRadius({bottomLeft:10,bottomRight:10})
}
.height('100%')
.width('100%')
.backgroundColor(Color.Gray)
.padding(20)
}
}
页面效果：
最后使用这些布局做个集生肖案例，点击抽取生肖，抽取随机生肖卡，筹集6个生肖卡，获得奖品,点击再来一次，即可重新抽卡
页面效果：
源码：
interface cardList{
url:string,
count:number
}
let cpCardList:cardList[]=[
{url:'app.media.bg_00',count:0},
{url:'app.media.bg_01',count:0},
{url:'app.media.bg_02',count:0},
{url:'app.media.bg_03',count:0},
{url:'app.media.bg_04',count:0},
{url:'app.media.bg_05',count:0}
]
@Entry
@Component
struct AnimalsignPage {
@State cardList: cardList[] = [
{url:'app.media.bg_00',count:0},
{url:'app.media.bg_01',count:0},
{url:'app.media.bg_02',count:0},
{url:'app.media.bg_03',count:0},
{url:'app.media.bg_04',count:0},
{url:'app.media.bg_05',count:0}
]
@State maskOpacity:number=0
@State maskZindex:number =-1
@State maskImageX:number=0
@State maskImageY:number=0
@State prizeImageX:number=0
@State prizeImageY:number=0
@State randomNum:number=0
@State prizeZindex:number=-2
@State prizeOpacity:number=0
build() {
Stack(){
Column(){
Grid(){
ForEach(this.cardList,(item:cardList)=>{
GridItem(){
Badge({
count:item.count,
position:BadgePosition.RightTop,
style:{
badgeSize:20,
fontSize:16
}
}){
Image($r(item.url)).height(120)
}
}
})
}.columnsTemplate('1fr 1fr 1fr ')
.rowsTemplate('1fr 1fr')
.height(300)
Button('立即抽卡')
.width(300)
.backgroundColor('#ed5b8c')
.margin({top:35})
.onClick(()=>{
this.maskOpacity=1
this.maskZindex=99
this.maskImageX=1
this.maskImageY=1
this.randomNum=Math.floor(Math.random()*6)
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.zIndex(10)
Column({space:10}){
Text('获得生肖卡').fontSize(24).fontColor('#f5ebcf')
Image($r(`app.media.img_0${this.randomNum}`))
.height(180)
.scale({
x:this.maskImageX,
y:this.maskOpacity
})
.animation({
duration:500
})
Button('开心收下')
.fontColor('#f5ebcf')
.backgroundColor(Color.Transparent)
.border({width:2,color:'#f5ebcf'})
.height(40)
.onClick(()=>{
this.maskOpacity=-1
this.maskZindex=0
this.maskImageX=0
this.maskImageY=0
let newCardList=[...this.cardList]
newCardList[this.randomNum].count++
newCardList[this.randomNum].url=`app.media.img_0${this.randomNum}`
this.cardList=newCardList
let code= this.cardList.every((item)=>{
return item.count>=1
})
if (code) {
this.prizeZindex=99
this.prizeOpacity=1
this.prizeImageX=1
this.prizeImageY=1
}
})
}
.height('100%')
.width('100%')
.backgroundColor('#cc000000')
.justifyContent(FlexAlign.Center)
.opacity(this.maskOpacity)
.zIndex(this.maskZindex)
.animation({
duration:500
})
Column({space:10}){
Image($r('app.media.mz'))
.height(300)
.scale({
x:this.prizeImageX,
y:this.prizeImageY
}).animation({
duration:1000
})
Button('再来一次')
.backgroundColor(Color.Transparent)
.border({width:2,color:Color.White})
.width(220)
.onClick(()=>{
this.prizeZindex=-2
this.prizeOpacity=0
this.cardList=cpCardList
})
}
.height('100%')
.width('100%')
.backgroundColor('#cc000000')
.justifyContent(FlexAlign.Center)
.opacity(this.prizeOpacity)
.zIndex(this.prizeZindex)
.animation({
duration:1000
})
}
}
}
总结
以上就是今天要讲的内容，本文介绍了常用的三种布局组件，文章仅用于学习交流，文章内容到此结束，你的点赞是我更新的动力。
标签：02,count,鸿蒙,url,media,app,height,next,100% From： https://blog.csdn.net/zzy831153/article/details/142267779