鸿蒙页面布局入门

news2025/5/19 4:17:19

本文以仿猫眼电影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站布局实战-列表布局

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2379002.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

阿里巴巴开源移动端多模态LLM工具——MNN

阿里巴巴开源移动端多模态LLM工具——MNN

MNN 是一个高效且轻量级的深度学习框架。它支持深度学习模型的推理和训练，并在设备端的推理和训练方面具有行业领先的性能。目前，MNN 已集成到阿里巴巴集团的 30 多个应用中，如淘宝、天猫、优酷、钉钉、闲鱼等，覆盖了直播、短视频…
阅读更多...
【漫话机器学习系列】256.用 k-NN 填补缺失值

【漫话机器学习系列】256.用 k-NN 填补缺失值

用 k-NN 填补缺失值：原理、实现与应用 在实际的数据科学项目中，我们经常会遇到数据缺失（Missing Values）的问题。缺失值如果处理不当，不仅会影响模型训练，还可能导致最终结果偏差。 今天，我们…
阅读更多...
金格iWebOffice控件在新版谷歌Chrome中不能加载了怎么办？

金格iWebOffice控件在新版谷歌Chrome中不能加载了怎么办？

金格iWebOffice控件是由江西金格网络科技有限责任公司开发的中间件软件，主要用于在浏览器中直接编辑Word、Excel、PowerPoint等Office文档，曾经是一款优秀国产的WebOffice插件。 由于2022年Chrome等浏览器取消支持PPAPI接口，导致这款金格iWe…
阅读更多...
实验6分类汇总

实验6分类汇总

设计性实验 (1)查询每门课程的平均分,包括课程号和平均分。 SELECT Cno AS 课程号, AVG(Degree) AS 平均分 FROM Score065 GROUP BY Cno;(2)查询每门课程的平均分,包括课程号、课程名和平均分。 SELECT c.Cno AS 课程号, c.Cname AS 课程名, AVG(sc.Degree) AS 平均分 FROM …
阅读更多...
如何通过交流沟通实现闭环思考模式不断实现自身强效赋能-250517

如何通过交流沟通实现闭环思考模式不断实现自身强效赋能-250517

感谢一直以来和我交流沟通的朋友们。 闭环思考 文字部分（25-05-04）这一天是青年节，在这一天与青年朋友交流这个是事先规划好的： “可以猜一猜，博士会被撤销吗？导师会被处理吗？千万不要回复，放心里，过段时间看结果，看看自己预估社会能力如何。 观察社会新闻，可以用…
阅读更多...
Python 3.11详细安装步骤（包含安装包）Python 3.11详细图文安装教程

Python 3.11详细安装步骤（包含安装包）Python 3.11详细图文安装教程

文章目录 前言Python 3.11介绍Python 3.11安装包下载Python 3.11安装步骤 前言 作为当前最热门的编程语言之一，Python 3.11 不仅拥有简洁优雅的语法，还在性能上实现了飞跃，代码运行速度提升显著。无论是初入编程的小白，还是经验丰…
阅读更多...
一个指令，让任意 AI 快速生成思维导图

一个指令，让任意 AI 快速生成思维导图

大家好，我是安仔，一个每天都在压榨 AI 的躺平打工人。 今天分享一个 AI 办公小技巧，让你用一个指令让 AI 生成思维导图。 DeepSeek、Kimi、豆包都可以哈 ～ KimiXMind 安仔经常用 XMind 来绘制思维导图，但是 AI 是没…
阅读更多...
FPGA图像处理（六）------ 图像腐蚀and图像膨胀

FPGA图像处理（六）------ 图像腐蚀and图像膨胀

默认迭代次数为1，只进行一次腐蚀、膨胀 一、图像腐蚀 1.相关定义 2.图像腐蚀效果图 3.fpga实现 彩色图像灰度化，灰度图像二值化，图像缓存生成滤波模块（3*3），图像腐蚀算法 timescale 1ns / 1ps // // Des…
阅读更多...
LVDS系列12：Xilinx Ultrascale系可编程输入延迟(二)

LVDS系列12：Xilinx Ultrascale系可编程输入延迟(二)

本节讲解Ultrascale IDELAYE3的参数；  IDELAYE3参数： REFCLK_FREQUENCY：如果使用COUNT模式，保持300MHz的默认值即可； 如果使用TIME模式，则该值与IDELAYCTRL参考时钟要匹配； DELAY_SRC&#…
阅读更多...
ARM (Attention Refinement Module)

ARM (Attention Refinement Module)

ARM模块【来源于BiSeNet】：细化特征图的注意力，增强重要特征并抑制不重要的特征。 Attention Refinement Module (ARM) 详解 ARM (Attention Refinement Module) 是 BiSeNet 中用于增强特征表示的关键模块，它通过注意力机制来细化特征图&…
阅读更多...
国产免费工作流引擎star 6.5k，Warm-Flow升级1.7.2（新增案例和修复缺陷）

国产免费工作流引擎star 6.5k，Warm-Flow升级1.7.2（新增案例和修复缺陷）

文章目录 主要更新内容项目介绍功能思维导图设计器流程图演示地址官网Warm-Flow视频 主要更新内容 [feat] 开启流程实例，新增流程定义是否存在校验[feat] 新增合同签订流程案例[feat] 新增企业采购流程案例[update] mybatis-plus逻辑删除，删除值和未删除…
阅读更多...
前端二进制数据指南：从 ArrayBuffer 到高级流处理

前端二进制数据指南：从 ArrayBuffer 到高级流处理

前端开发中，二进制数据是处理文件、图像、音视频、网络通信等场景的基础。以下是核心概念和用途的通俗解释： 前端二进制数据介绍 1. 什么是前端二进制数据？ 指计算机原始的 0 和 1 格式的数据（比如一张图片的底层代码&#xff…
阅读更多...
如何选择高性价比的 1T 服务器租用服务​

如何选择高性价比的 1T 服务器租用服务​

选择高性价比的 1T 服务器租用服务​，可参考以下内容： 1、根据需求选配置​ 明确自身业务需求是关键。若为小型网站或轻量级应用，数据存储与处理需求不高，选择基础配置服务器即可。如个人博客网站，普通的 Intel Xeon …
阅读更多...
一个可拖拉实现列表排序的WPF开源控件

一个可拖拉实现列表排序的WPF开源控件

从零学习构建一个完整的系统 推荐一个可通过拖拉，来实现列表元素的排序的WPF控件。 项目简介 gong-wpf-dragdrop是一个开源的.NET项目，用于在WPF应用程序中实现拖放功能，可以让开发人员快速、简单的实现拖放的操作功能。 可以在同一控件内…
阅读更多...
AI-02a5a6.神经网络-与学习相关的技巧-批量归一化

AI-02a5a6.神经网络-与学习相关的技巧-批量归一化

批量归一化 Batch Normalization 设置合适的权重初始值，则各层的激活值分布会有适当的广度，从而可以顺利的进行学习。那么，更进一步，强制性的调整激活值的分布，是的各层拥有适当的广度呢？批量归一化&#…
阅读更多...
SVGPlay：一次 CodeBuddy 主动构建的动画工具之旅

SVGPlay：一次 CodeBuddy 主动构建的动画工具之旅

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 背景与想法 我一直对 SVG 图标的动画处理有浓厚兴趣，特别是描边、渐变、交互等效果能为图标增添许…
阅读更多...
自己手写tomcat项目

自己手写tomcat项目

一：Servlet的原理 在Servlet(接口中)有： 1.init():初始化servlet 2.getServletConfig()：获取当前servlet的配置信息 3.service():服务器（在HttpServlet中实现，目的是为了更好的匹配http的请求方式） 4.g…
阅读更多...
2025年渗透测试面试题总结-安恒[实习]安全工程师（题目+回答）

2025年渗透测试面试题总结-安恒[实习]安全工程师（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 安恒[实习]安全工程师 一面 1. 自我介绍 2. 前两段实习做了些什么 3. 中等难度的算法题 4. Java的C…
阅读更多...
生成对抗网络（Generative Adversarial Networks ，GAN）

生成对抗网络（Generative Adversarial Networks ，GAN）

生成对抗网络是深度学习领域最具革命性的生成模型之一。 一 GAN框架 1.1组成 构造生成器（G）与判别器（D）进行动态对抗，实现数据的无监督生成。 G（造假者）：接收噪声 ​&#xff0c…
阅读更多...
在WSL中的Ubuntu发行版上安装Anaconda、CUDA、CUDNN和TensorRT

在WSL中的Ubuntu发行版上安装Anaconda、CUDA、CUDNN和TensorRT

在Windows 11的WSL（Windows Subsystem for Linux）环境中安装Anaconda、CUDA、CUDNN和TensorRT的详细步骤整理： 本文是用cuda12.4与CuDNN 8.9.7 和 TensorRT 9.1.0 及以上对应 一、前言（准备） 确保电脑上有NVIDIA GPU…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023