回复
#HarmonyOS NEXT体验官# 解决首页框架布局烦恼 原创
忙忙忙困困困
发布于 2024-7-30 22:18
浏览
0收藏
::: hljs-center
解决首页框架布局烦恼
:::
首先，我先来介绍一下我了解的最新数据，鸿蒙操作系统（HarmonyOS）市场份额从2023年一季度的8%显著提升至2024年一季度的17%，成功超越了iOS，跃居市场第二位。这一飞跃不仅彰显了鸿蒙系统日益增强的市场竞争力，也充分说明了它在用户中的认可度和接受度正在不断提升。同时，鸿蒙生态设备数量已突破9亿大关，并保持持续增长态势，预示着其在物联网和智能设备领域的广阔前景。
鸿蒙真的已经深入到我的生活里了，随随便便一刷手机，就能收到关于鸿蒙的不少消息。今天在我上网的时候，看到了有人对鸿蒙的实现应用首页有疑问，觉得现在的技术实现起来足矣，为什么还要使用鸿蒙呢？
而我对于鸿蒙的使用跟这位老弟有着不同的见解，先不论其他优势，单讲代码量上面，鸿蒙绝对碾压！话不多说，上代码。
就以这个页面为例，我们开始框架布局把！
对于这个页面，我先分为三个模块：
顶部模块
主体模块（滚动）
底部的tap模块
整体是一个层叠样式，顶部和底部是固定的，中间为可滚动式。
所以首先是整体的stack布局+底部的tab
struct Index {
build() {
Column(){
//1.首先是整体的stack布局+底部的tap
Stack({alignContent:Alignment.Bottom}){
//顶部模块
//主体模块
Scroll(){
Column(){
//主体第一行快捷按钮区域
//主体内容区
}.width('100%').height('100%')
}
// 底部的tab模块
}.width('100%').height('100%').backgroundColor('#5b73de')
}
}
}
顶部模块
Row(){
//左边
Column(){
Text('北京').fontSize(18).fontColor('#fff')
Text('晴 32°C').fontSize(12).fontColor('#fff')
Image($r('app.media.zfb_head_down'))
.position({
x:40, y:0
}) .width(12) .fillColor('#fff')
}
//中间
Row(){
Image($r('app.media.zfb_head_search'))
.width(20) .fillColor('#666')
Text('北京交通一卡通')
.layoutWeight(1)
Text('搜索')
.fontWeight(700)
.textAlign(TextAlign.Center)
.width(55)
.fontColor('#5b73de')
.border({
width:{left:1},color:'#ccc'
})
} .height(32)
.layoutWeight(1)
.backgroundColor('#fff')
.borderRadius(5)
.margin({left:25,right:12})
//右边
Image($r('app.media.zfb_head_plus'))
.width(30)
.fillColor('#fff')
}.padding({left:10,right:10})
.zIndex(666)//层级设置更高
.width('100%')
.height(60)
.backgroundColor('#5b73de')
主体第一行快捷按钮区域
Row(){
Column(){
Image($r('app.media.zfb_top_scan'))
.width(36)
.height(36)
.fillColor(Color.White)
Text('扫一扫')
.fontColor(Color.White)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_top_pay'))
.width(36)
.height(36)
.fillColor(Color.White)
Text('收付款')
.fontColor(Color.White)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_top_travel'))
.width(36)
.height(36)
.fillColor(Color.White)
Text('出行')
.fontColor(Color.White)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_top_card'))
.width(36)
.height(36)
.fillColor(Color.White)
Text('卡包')
.fontColor(Color.White)
}.layoutWeight(1)
}
.backgroundColor('#5b73de')
.padding({top:5,bottom:15})
主体内容区
Column(){
//导航模块
Column({space:10}){
Row(){
Column() {
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({ bottom: 8 })
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav2'))
.width(28)
.margin({bottom:8})
Text('生活缴费')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav3'))
.width(28)
.margin({bottom:8})
Text('文本')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav4'))
.width(28)
.margin({bottom:8})
Text('蚂蚁森林')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav5'))
.width(28)
.margin({bottom:8})
Text('手机充值')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
}
Row(){
Column() {
Image($r('app.media.zfb_nav6'))
.width(28)
.margin({ bottom: 8 })
Text('余额宝')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav7'))
.width(28)
.margin({bottom:8})
Text('花呗')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav8'))
.width(28)
.margin({bottom:8})
Text('飞猪旅行')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav9'))
.width(28)
.margin({bottom:8})
Text('淘票票')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav10'))
.width(28)
.margin({bottom:8})
Text('饿了么')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
}
Row(){
Column() {
Image($r('app.media.zfb_nav11'))
.width(28)
.margin({ bottom: 8 })
Text('读书听书')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav12'))
.width(28)
.margin({bottom:8})
Text('基金')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav13'))
.width(28)
.margin({bottom:8})
Text('直播广场')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav14'))
.width(28)
.margin({bottom:8})
Text('医疗健康')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav15_more'))
.width(28)
.margin({bottom:8})
Text('更多')
.fontSize(12)
.fontColor('#666')
} .layoutWeight(1)
}
}.padding(10)
//产品区
Row({space:5}){
Image($r('app.media.zfb_pro_pic1'))
.layoutWeight(1)
Image($r('app.media.zfb_pro_pic2'))
.layoutWeight(1)
Image($r('app.media.zfb_pro_pic3'))
.layoutWeight(1)
}.padding(10)
Column({space :10}){
Image($r('app.media.zfb_pro_list1'))
.width('100%')
Image($r('app.media.zfb_pro_list2'))
.width('100%')
}
} .height(1000)
.width('100%')
.backgroundColor('#fff')
.borderRadius({
topLeft:20,
topRight:20
})
底部的Tab导航区
Row(){
Column(){
Image($r('app.media.zfb_tab_home'))
.width(35)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_money'))
.width(35)
Text('理财')
.fontSize(12)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_life'))
.width(35)
Text('生活')
.fontSize(12)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_chat'))
.width(35)
Text('消息')
.fontSize(12)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_me'))
.width(35)
Text('我的')
.fontSize(12)
}.layoutWeight(1)
}
.width('100%')
.height(60)
.backgroundColor('#fbfcfe')
}
.width('100%')
.height('100%')
.backgroundColor('#5b73de')
到这里，所有的内容就已经结束了。
随着鸿蒙系统的不断演进与升级，我们一起见证了它从诞生到逐渐成熟的每一个重要时刻。鸿蒙，这个寓意着“开天辟地”的操作系统，正以其独特的微内核全场景分布式架构，引领着智能设备互联互通的未来。它不仅仅是一个操作系统，更是华为乃至整个科技行业在逆境中坚韧不拔、勇于创新精神的象征。在此，也感谢每一位关注鸿蒙、支持鸿蒙的朋友。是你们的热情与期待，给予了我们不断前进的动力。让我们携手并进，共同见证鸿蒙的辉煌未来！
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
已于2024-8-1 15:57:55修改
赞
2
收藏
回复
相关推荐
