【HarmonyOS NEXT星河版开发学习】界面开发实战b-支付宝界面

@VON

发布于 2025-12-21 11:45:10

820

前言

这次的实战案例难度较大知识点概述的十分的全面，其中还包括了一些新的知识点比如（主体页面内容的滚动-Scroll组件），案例中所用的图标来自于阿里云的图标库。代码量也是达到了300行，所用组件众多，大都是嵌套应用。阿里云图标库

知识点概述

Scroll组件

croll组件是鸿蒙开发中的一种可滚动的容器组件，用于处理内容显示超出屏幕或指定区域的情况。

鸿蒙（HarmonyOS）是一个多智能终端的操作系统，由华为开发。作为鸿蒙开发的一部分，Scroll组件在用户界面构建中扮演了关键角色，特别是在应用程序需要展示过多信息而无法在一屏内完全显示时。Scroll组件通过允许内容滚动，增强了应用的用户体验和界面的动态交互能力。

基本用法

在 HarmonyOS 的 XML 布局文件中，您可以使用 <Scroll> 标签来定义一个可滚动的区域。

通常情况下，会在 <Scroll> 内部放置一个 <Column> 或 <Row> 组件，这样可以更方便地组织内部的内容。

注意事项

性能优化：如果在 <Scroll> 内部放置了大量组件，可能会导致性能问题。在这种情况下，考虑使用虚拟列表（如 List 组件），它可以只渲染当前可见的部分，从而提高性能。
边界处理：默认情况下，当滚动到底部时，滚动条会停止。如果需要实现类似于无限滚动的效果，您可能需要结合其他逻辑来动态加载数据。
事件监听：还可以通过绑定事件监听器来响应滚动事件，例如当用户滚动到列表底部时触发新的数据加载。

层叠布局

层叠布局是鸿蒙开发中用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局方式。

鸿蒙（HarmonyOS）是一个面向多智能终端的操作系统，由华为开发。在鸿蒙应用开发过程中，层叠布局是一种重要的用户界面布局方式，它通过Stack容器组件实现位置的固定定位与层叠，使得容器中的子元素依次入栈，后一个子元素覆盖前一个子元素。这种布局方式不仅增强了页面的视觉效果，还能实现更加复杂的交互设计。以下将具体分析层叠布局的具体特性和应用场景：

层叠布局的特性

元素重叠能力：层叠布局允许其中的子元素进行重叠排列，这意味着后渲染的子元素可以覆盖先渲染的子元素。
位置定位能力：通过Stack容器组件，可以实现元素的固定定位，这使得开发者能够精确控制每个元素的位置。
对齐方式：Stack组件提供了九种对齐方式，可以通过alignContent参数设置子组件在容器内的对齐方式，默认为居中对齐。
zIndex层级控制：子元素可以通过zIndex属性控制其在视觉上的层级，zIndex值越大，元素越在上层显示。

层叠布局的应用场景

广告展示：层叠布局适合用于需要重叠效果的广告展示场景，例如悬浮广告和层叠通知。
卡片层叠效果：在需要实现卡片或者图层依次层叠的效果时，层叠布局提供了简单高效的实现方式。
复杂交互界面：对于一些复杂的交互界面，例如控制面板、多功能窗口等，层叠布局能够提供灵活的布局方案。

Stack组件

Stack组件的接口和参数

alignContent参数：该参数决定了Stack内子元素的对齐方式，支持九种对齐方式，包括顶部左对齐、顶部居中对齐、顶部右对齐、中部左对齐、中间居中对齐、底部左对齐等。
zIndex属性：通过设置zIndex可以控制子元素的显示层级，适用于需要控制元素覆盖顺序的场景。

Stack组件的使用方法

基本使用：Stack组件作为容器，其内部的子元素可以依次叠加，也可以单独设置每个子元素的位置和样式。
对齐方式设置：通过alignContent参数，可以设置Stack内子元素的对齐方式，以实现不同的布局效果。
层级控制：利用zIndex属性，可以灵活控制子元素的层级关系，解决重叠元素的显示问题。

层叠布局的优势

灵活性：层叠布局提供了一种灵活的布局方式，适用于多种复杂的UI设计需求。
视觉效果：通过元素重叠和层级控制，可以创造出丰富的视觉效果和深度感。
空间利用率：层叠布局可以在有限的屏幕空间内有效利用三维空间，展示更多信息。

界面效果展示

代码展示

@Entry
@Component
struct Index {
  build() {
    // 1.整体Stack布局+底部的tab
    // 2.主体区域的架子：头部+主题页面（主题页面可滚动）
    Stack({alignContent:Alignment.Bottom}){
      // 1.1主题展示区
      Stack({alignContent:Alignment.Top}){
        // 头部
        Row(){
          // 左边
          Row(){
            Text('开封').fontColor('#fff')
            Image($r('app.media.zfb_public_arrow_down_0'))
              .width(20)
              .fillColor('#fff')
          }
          // 中间
          Row(){
            Image($r('app.media.zfb_public_search'))
              .width(20)
              .fillColor('#666')
              .margin({left:5,right:5})
            Text('证件中心，查看电子...')
              .layoutWeight(1)
              .textOverflow({
                overflow:TextOverflow.Ellipsis// 设置文字溢出效果
              })
                // 必须配合maxLines才有效果
              .maxLines(1)// 设置显示的行数
            Text('搜索')
              .width(55)
              .fontColor('#5b73de')
              .fontWeight(700)
              .textAlign(TextAlign.Center)
              .border({
                width:{left:1},
                color:'#ccc'
              })
          }
          .height(32)
          .layoutWeight(1)
          .backgroundColor('#fff')
          .borderRadius(5)
          .margin({left:12,right:12})
          // 右边
          Image($r('app.media.zfb_public_add_norm'))
            .width(30)
            .fillColor('#fff')
        }
        .padding({left:10,right:10})
        .width('100%')
        .height(60)
        .backgroundColor('#5b73de')
        .zIndex(10)// 头部层级最高

        // 主体页面
        // Column / Row不具备滚动效果
        Scroll(){
          Column(){
            // top快捷按钮区域
            Row(){
              // 扫一扫
              Column(){
                Image($r('app.media.zfb_public_scan'))
                  .width(36)
                  .fillColor('#fff')
                Text('扫一扫')
                  .fontColor('#fff')
              }
              .layoutWeight(1)
              // 设置
              Column(){
                Image($r('app.media.zfb_public_settings'))
                  .width(36)
                  .fillColor('#fff')
                Text('设置')
                  .fontColor('#fff')
              }
              .layoutWeight(1)
              // 导航
              Column(){
                Image($r('app.media.zfb_public_navigation'))
                  .width(36)
                  .fillColor('#fff')
                Text('导航')
                  .fontColor('#fff')
              }
              .layoutWeight(1)
              // 卡包
              Column(){
                Image($r('app.media.zfb_desktop_servicewidgets'))
                  .width(36)
                  .fillColor('#fff')
                Text('卡包')
                  .fontColor('#fff')
              }
              .layoutWeight(1)
            }
            .backgroundColor('#5b73de')
            .padding({top:5,bottom:15})

            // 主体区域
            Column(){
              // 导航区
              Column({space:10}){
                Row(){
                  Column(){
                    Image($r('app.media.zfb_01'))
                      .width(28).margin({bottom:8})
                    Text('市民中心')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_02'))
                      .width(28).margin({bottom:8})
                    Text('手机充值')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_03'))
                      .width(28).margin({bottom:8})
                    Text('滴滴出行')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_04'))
                      .width(28).margin({bottom:8})
                    Text('火车票机票')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_05'))
                      .width(28).margin({bottom:8})
                    Text('生活缴费')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                }
                Row(){
                  Column(){
                    Image($r('app.media.zfb_06'))
                      .width(28).margin({bottom:8})
                    Text('芭芭农场')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_07'))
                      .width(28).margin({bottom:8})
                    Text('花呗')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_08'))
                      .width(28).margin({bottom:8})
                    Text('蚂蚁保')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_09'))
                      .width(28).margin({bottom:8})
                    Text('蚂蚁森林')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_10'))
                      .width(28).margin({bottom:8})
                    Text('饿了么')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                }
                Row(){
                  Column(){
                    Image($r('app.media.zfb_11'))
                      .width(28).margin({bottom:8})
                    Text('转账')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_12'))
                      .width(28).margin({bottom:8})
                    Text('余额宝')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_13'))
                      .width(28).margin({bottom:8})
                    Text('信用卡还款')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_14'))
                      .width(28).margin({bottom:8})
                    Text('芝麻信用')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                  Column(){
                    Image($r('app.media.zfb_15'))
                      .width(28).margin({bottom:8})
                    Text('更多')
                      .fontSize(12).fontColor('#666')
                  }
                  .layoutWeight(1)
                }
              }
              .padding(10)

              // 产品区
              Column(){
                Image($r('app.media.zfb_pro01'))
                  .width('100%')
                Image($r('app.media.zfb_pro02'))
                  .width('100%')
                Image($r('app.media.zfb_pro03'))
                  .width('100%')
                Image($r('app.media.zfb_pro04'))
                  .width('100%')
                Image($r('app.media.zfb_pro05'))
                  .width('100%')
                Image($r('app.media.zfb_pro06'))
                  .width('100%')
                Image($r('app.media.zfb_pro07'))
                  .width('100%')
              }

            }
            .width('100%')
            .backgroundColor('#f6f6f6')
            .borderRadius({
              topLeft:20,
              topRight:20
            })
          }

          .width('100%')
          .padding({top:60,bottom:60})
        }

      }
      .width('100%')
      .height('100%')

      // 1.2底部tab导航区
      Row(){
        // 支付宝logo
        Column(){
          Image($r('app.media.zfb_logo'))
            .width(35)
        }
        .layoutWeight(1)
        // 回家
        Column(){
          Image($r('app.media.zfb_public_home'))
            .width(28).margin({bottom:2})
          Text('回家')
            .fontSize(12)
        }
        .layoutWeight(1)
        // 视频
        Column(){
          Image($r('app.media.zfb_gallery_album_damage_video'))
            .width(28).margin({bottom:2})
          Text('视频')
            .fontSize(12)
        }
        .layoutWeight(1)
        // 消息
        Column(){
          Image($r('app.media.zfb_public_comments'))
            .width(28).margin({bottom:2})
          Text('消息')
            .fontSize(12)
        }
        .layoutWeight(1)
        // 我的
        Column(){
          Image($r('app.media.zfb_public_contacts'))
            .width(28).margin({bottom:2})
          Text('我的')
            .fontSize(12)
        }
        .layoutWeight(1)
      }
      .width('100%')
      .height(60)
      .backgroundColor('#fbfcfe')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#5b73de')
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除