鸿蒙页面布局入门

本文以仿猫眼电影M站首页布局为案例，展示ArkUI在实际开发中的应用。内容包括案例效果及相关知识点，深入解析布局框架以及头部、脚部、内容区域的构建思路与代码实现，最后提供完整代码和教程资源，助力你强化实践能力。

1. 案例效果截图

如图1-1所示。

图1-1 案例效果截图

2. 案例运用到的知识点

1. 核心知识点

• UI范式基本语法。
• 文本显示Text、Span组件。
• 线性布局Column、Row组件。
• 层叠布局Stack组件。
• 按钮Button组件。
• 显示图片Image组件。

1. 其他知识点

• DevEco Studio的基本使用。
• 简单的资源分类访问。
• 移动端APP布局基本技巧。

3. 布局框架

可以按照图3-1来思考布局的框架：

图3-1 布局框架图

框架的代码如下：

@Entry
@Component
struct Index {build() {Column() {Stack() {}.width('100%').height(50).backgroundColor('#e54847')Column() {Text('content')}.width('100%').layoutWeight(1)Row() {}.width('100%').height(50).backgroundColor('#fff').border({width: { top: 1}, color: '#eee'})}}
}

4. 头部区域

可以按照图4-1思路来构建布局：

图4-1 布局示意图

代码如下：

// 头部区域
Stack({ alignContent: Alignment.End }) {Text('猫眼电影').width('100%').height('100%').textAlign(TextAlign.Center).fontColor('#fff').fontSize(18)Image($rawfile('menu.png')).width(17).height(16).margin({ right: 10 })
}.width('100%').height(50).backgroundColor('#e54847')

5. 脚部区域

可以按照图5-1思路来构建布局：

图5-1 布局示意图

代码如下：

// 脚部区域
Row() {Column() {Image($rawfile('movie.svg')).width(25).height(25).fillColor('#e54847')Text('电影/影院').fontSize(10).fontColor('#e54847')}.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)Column() {Image($rawfile('video.png')).width(25).height(25).fillColor('#696969')Text('视频').fontSize(10).fontColor('#696969')}.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)Column() {Image($rawfile('perform.svg')).width(25).height(25).fillColor('#696969')Text('演出').fontSize(10).fontColor('#696969')}.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)Column() {Image($rawfile('mine.svg')).width(25).height(25).fillColor('#696969')Text('我的').fontSize(10).fontColor('#696969')}.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)
}
.width('100%').height(50).border({ width: { top: 1 }, color: '#eee' })
.backgroundColor('#fff')

6. 内容区域

可以参照图6-1思考内容区域的整体框架布局：

图6-1 布局示意图

代码如下：

// 内容区域
Column() {Row() {}.width('100%').height(44).border({width: {bottom: 1}, color: '#e6e6e6'})Scroll() {}.layoutWeight(1)
}.width('100%').layoutWeight(1)

6.1. 导航区

内容区域的导航区可以参照图6-2思考布局：

图6-2 布局示意图

代码如下：

// 导航区
Row() {Row() {Text('北京').fontColor('#666')Text('').width(0).height(0).border({width: 5,color: {top: '#b0b0b0',left: Color.Transparent,right: Color.Transparent,bottom: Color.Transparent}}).margin({top: 6, left: 4})}.offset({x: 15}).width(60)Row() {Stack() {Text('热映').fontSize(17).fontWeight(FontWeight.Bold)Text('').width(24).border({width: {bottom: 3}, color: '#e54847'}).offset({y: 18})}Text('影院')Text('待映')Text('经典电影')}.justifyContent(FlexAlign.SpaceEvenly).layoutWeight(1)Row() {Image($rawfile('search-red.png')).width(20).height(20)}.justifyContent(FlexAlign.Center).width(50)
}.width('100%').height(44).border({width: {bottom: 1}, color: '#e6e6e6'})

6.2. 最受好评区

可以参照图6-3考虑整体布局：

图6-3 布局示意图

代码如下：

// 好评和列表区内容
Column() {// 好评区Column() {Text('最受好评电影').width('100%').fontSize(14).fontColor('#333').textAlign(TextAlign.Start).margin({ bottom: 12 })Scroll() {Row() {Column() {Stack({ alignContent: Alignment.BottomStart }) {Image('https://p0.pipi.cn/basicdata/' + '54ecdeddf2a92339dd2c95022e99e5fe27091.jpg?' + 'imageMogr2/thumbnail/2500x2500%3E').width(85).height(115)Text('').width('100%').height(35).linearGradient({direction: GradientDirection.Bottom, colors: [['rgba(0,0,0,0)', 0], [0x000000, 1]] })Text('观众评分：9.6').fontColor('#faaf00').fontSize(11).fontWeight(700).offset({ x: 4, y: -4 })}.height(115).margin({ bottom: 6 })Text('出走的决心').fontSize(13).fontWeight(FontWeight.Bold).width(85).textAlign(TextAlign.Start).margin({ bottom: 3 })}.width(85).margin({ right: 10 })// ... 其余7个Column与上述结构相同，因篇幅限制已省略，详见本书配套源码。}}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).edgeEffect(EdgeEffect.Spring)}.width('100%').padding({ top: 12, bottom: 12, left: 15, right: 15 })
}.height('100%')

6.3. 列表区

列表区整体布局参照图6-4。

图6-4 布局示意图

代码如下：

// 列表区
Column() {Row() {Image('https://p0.pipi.cn/basicdata/' + '54ecdedd5377e187a9e7aa5ee9ec15a184b18.jpg?' + 'imageMogr2/thumbnail/2500x2500%3E?imageView2/1/w/128/h/180').width(64).height(90)Stack({ alignContent: Alignment.End }) {Column() {Row() {Text('志愿军：存亡之战').fontSize(17).fontWeight(FontWeight.Bold)Image($rawfile('v2dimax.png')).width(43).height(14).margin({ left: 4 })}Text() {Span('274337').fontColor('#faaf00')Span('人想看').fontColor('#666').fontSize(13)}Text('主演: 朱一龙,辛柏青,张子枫').fontColor('#666').fontSize(13)Text('2024-09-30 下周一上映').fontColor('#666').fontSize(13)}.alignItems(HorizontalAlign.Start).height('100%').width('100%').justifyContent(FlexAlign.SpaceEvenly).padding({ right: 53 })Button() {Text('预售').fontColor('#fff').fontSize(13).fontWeight(500)}.width(54).height(28).backgroundColor('#3C9FE6')}.height('100%').layoutWeight(1).margin({ left: 12 }).padding({ top: 12, right: 14, bottom: 12, left: 0 }).border({ width: { bottom: 1 }, color: '#eee' })}.height(144)// ... 其余7个Row与上述结构相同，因篇幅限制已省略，详见本书配套源码。
}.backgroundColor('#fff').padding({ left: 15 })

--THE END--

本文配套视频教程观看地址：

11-猫眼电影M站布局实战-布局框架

12-猫眼电影M站布局实战-头部区域布局

13-猫眼电影M站布局实战-脚部区域布局

14-猫眼电影M站布局实战-内容导航区布局

15-猫眼电影M站布局实战-最受电影区布局

16-猫眼电影M站布局实战-列表布局