【HarmonyOS】鸿蒙开发（三）：进阶组件与复杂布局实践-CSDN博客

本文链接：https://blog.csdn.net/2502_90283908/article/details/149843908

一、实验内容
二、开发过程与核心知识点
三、运行结果
四、学习总结
建议大家学习的过程中多查看官方文档，因为ArkUI的组件很多，视频教程中也不一定完全涉及并且也比较旧。官方文档中都是最新版的，也更加详细
网址：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development

一、实验内容

本次实验目标是完成校园二手交易平台“河你交易”的主页开发，具体要求如下：

页面整体包含六大核心区域：顶部搜索区、快捷功能区、广告轮播区、横向分类区、商品列表区、底部导航区2. 搜索区使用TextInput组件实现输入功能3. 快捷功能入口采用Grid布局展示
4. 广告轮播区通过Swiper组件实现自动轮播效果5. 横向商品分类使用可滚动的Row布局（支持水平滑动）
商品列表采用Grid布局且支持滚动7. 底部导航栏必须使用自定义组件（命名为Bottom_Component）
整体效果如下：

二、开发过程与核心知识点

1. 页面整体架构设计

页面采用Stack层叠布局作为根容器，实现顶部导航、主体内容与底部导航的分层展示：

外层Stack设置alignContent: Alignment.Bottom，确保底部导航固定在页面底部
内层嵌套Stack用于管理顶部导航与主体内容，通过zIndex属性控制层级（顶部导航zIndex:4，主体内容zIndex:2，底部导航zIndex:5）

2. 核心组件与布局实现

（1）自定义底部导航组件（myComponent）

@Component
struct myComponent{
  build() {
    Row(){
      // 五个导航项（首页、购买、卖闲置、社区、我的）
      Column(){
        Image($r('app.media.home')).width(25).padding({top:5})
        Text('首页').fontSize(10)
      }.padding({left:20})

      Column(){
        Image($r('app.media.buy_icon')).width(25).padding({top:5})
        Text('购买').fontSize(10)
      }.padding({left:40})

      // 中间突出的"卖闲置"按钮
      Column(){
        Text('卖').fontColor('#fff').fontSize(25).padding({top:15}).fontWeight(FontWeight.Bold)
        Text('闲置').fontColor('#fff').fontSize(10)
      }
      .layoutWeight(1)
      .backgroundColor('#2d3f8b')
      .width(70).height(70)
      .border({radius: 35}) // 圆形效果
      .position({x:150,y:-30}) // 向上偏移30px，实现悬浮效果

      Column(){
        Image($r('app.media.she_qu')).width(25).padding({top:5})
        Text('社区').fontSize(10)
      }.padding({left:140})

      Column(){
        Image($r('app.media.wo_de')).width(25).padding({top:5})
        Text('我的').fontSize(10)
      }.padding({left:40})
    }
    .width('100%').height(40).backgroundColor('#fff')
  }
}

知识点：

自定义组件通过@Component装饰器声明，可在页面中直接调用（myComponent()）
使用position({x,y})实现组件悬浮效果，border({radius:35})创建圆形背景

（2）顶部搜索区

顶部搜索

Row(){
  // 地理位置与天气信息
  Column(){
    Text('开封').fontSize(15).fontColor('#fff')
    Text('晴').fontSize(10).fontColor('#fff')
  }.padding({top:10,left:10,right:20})

  // 搜索框（含图标与输入区）
  Row(){
    Image($r('app.media.search')).width(23).fillColor('#908c8a').padding({left:5,right:3})
    TextInput({placeholder:'二手书'})
      .width(175).height(40).margin({right:5})
    Image($r('app.media.logo')).width(3).height(20).fillColor('#fff') // 竖线分隔符
    Text('搜索').fontSize(15).fontColor('#908c8a').fontWeight(FontWeight.Bold).padding({left:5})
  }
  .width(250).height(30)
  .backgroundColor('#fff')
  .borderRadius('3')
  .margin({top:5})

  // 右侧加号图标
  Row(){
    Image($r('app.media.plus')).fillColor('#fff').width(25)
  }.padding({left:15,top:5})
}
.backgroundColor('#2d3f8b').width('100%').height(60)

知识点：

TextInput组件通过placeholder属性设置默认提示文本
使用fillColor修改图片颜色，实现图标与背景的风格统一
通过嵌套Row与Column实现复杂的横向布局

（3）广告轮播区（Swiper组件）

Swiper(){
  Text('         书本、台灯、U盘......应有尽有，限时上新！').fontColor('#717171')
  Text('         更有河南大学周边等你抢购！').fontColor('#717171')
}
.loop(true) // 循环轮播
.autoPlay(true) // 自动播放
.width('100%')
.backgroundColor('#f3f3f3')
.padding({top:10,bottom:20})

知识点：

Swiper组件通过loop(true)开启循环轮播，autoPlay(true)实现自动播放
子组件为轮播项，可包含文本、图片等内容

（4）快捷功能区（Grid布局）

Grid(){
  GridItem(){
    Column(){
      Image($r('app.media.code')).width(35).padding({bottom:5})
      Text('商品码').fontSize(13).fontColor('#717171')
    }
  }
  // 其余7个GridItem（略）
}
.height(140)
.width('100%')
.rowsTemplate("1fr 1fr") // 2行
.columnsTemplate('1fr 1fr 1fr 1fr') // 4列
.backgroundColor('#f3f3f3')

知识点：

Grid布局通过rowsTemplate和columnsTemplate定义行列结构（1fr表示等分空间）
GridItem为Grid的子组件，每个Item对应一个功能入口

（5）横向分类区（Scroll+Row）

Scroll(){
  Row(){
    Text('关注').fontSize(16).padding({left:15})
    Text('推荐').fontSize(16).padding({left:15})
    // 其余分类文本（略）
  }
}
.backgroundColor('#fff')
.width('100%')
.height(40)
.scrollable(ScrollDirection.Horizontal) // 开启水平滚动

知识点：

Scroll组件通过scrollable(ScrollDirection.Horizontal)开启水平滚动
结合Row布局实现横向可滑动的分类菜单

（6）商品列表区（Grid布局）

Grid(){
  GridItem(){
    Column(){
      Image($r('app.media.mygood1')).width(180).borderRadius({topLeft:10,topRight:10}).padding({bottom:10})
      Text('TS Speak Now').fontSize(15).margin({right:50})
      Text('￥300').fontColor('#ec4446').fontSize(15).fontWeight(FontWeight.Bolder).margin({right:110,top:5})
    }
  }.padding({right:20,bottom:50})
  // 其余GridItem（略）
}
.width('100%')
.rowsTemplate("1fr 1fr") // 2行
.columnsTemplate('1fr 1fr') // 2列
.backgroundColor('#fff')

知识点：

通过borderRadius设置图片顶部圆角，优化视觉效果
商品价格通过fontColor设置为红色，突出关键信息

3. 完整代码结构

// 自定义底部导航组件
@Component
struct myComponent{ ... }

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Stack({alignContent:Alignment.Bottom}){
      // 顶部导航与主体内容
      Stack({alignContent:Alignment.Top}){
        // 顶部搜索区Row
        // 主体内容Scroll
      }.width('100%')

      // 底部导航组件
      myComponent().zIndex(5)
    }
    .width('100%').height('100%').backgroundColor('#2d3f8b')
  }
}