鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)

鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)

1、效果展示

2、ets/pages/Home.ets

ts 复制代码
import { getHomeDataApi } from "../api/home"
import { BasicListDataSource, IBannerItem, INavList, IPlanList, ITileList } from "../models/HomeData"
import SwiperLayout from '../views/Home/SwiperLayout'
import SearchBar from '../views/Home/SearchBar'
import NavList from "../views/Home/NavList";
import { PADDING, SHADOW_RADIUS } from "../contants/size";
import TileList from "../views/Home/TileList";
import PlanList from "../views/Home/PlanList";

/**
 * MyHouseApplication #项目的名称
 * Home.ets #文件名称
 * Created by zhong ON 2025/2/23 #作者及添加日期
 */
@Component
export default struct Home {
  @State bannerList: BasicListDataSource<IBannerItem> = new BasicListDataSource();
  @State navList: INavList = [];
  @State tileList: ITileList = [];
  @State planList: IPlanList = [];
  @State adPicture: string = "";
  
  // 获取首页数据的函数
  getHomeData = async () => {
    const result = await getHomeDataApi();
    this.bannerList.setList(result.bannerList);
    this.navList = result.navList;
    this.tileList = result.tileList;
    this.planList = result.planList;
    this.adPicture = result.adPicture
  }

  // 生命周期函数,初始化页面时触发
  aboutToAppear(): void {
    this.getHomeData();
  }

  build() {

    Scroll() {
      Stack() {
        Column() {
          SwiperLayout({ bannerList: this.bannerList });
          Column() {
            NavList({ navList: this.navList });
            TileList({ tileList: this.tileList })
            PlanList({ planList: this.planList })
            Image(this.adPicture)
              .width('100%')
              .height(60)
              .objectFit(ImageFit.Fill)
              .margin({ top: 10 })
              .shadow({
                offsetX: 0,
                offsetY: 0,
                radius: SHADOW_RADIUS,
                color: 'rgba(0, 0, 0, 0.14)'
              })
          }.padding({ left: PADDING, right: PADDING })
        }.width('100%')

        SearchBar();

      }.width('100%')
      .alignContent(Alignment.TopStart);
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .align(Alignment.TopStart)
  }
}

3、ets/views/Home/SearchBar.ets

ts 复制代码
import { Size } from "@ohos/hypium"
import { PADDING, PADDING_S } from "../../contants/size"

/**
 * MyHouseApplication #项目的名称
 * SearchBar.ets #文件名称
 * Created by zhong ON 2025/2/24 #作者及添加日期
 */
@Component
export default struct SearchBar {
  build() {
    Row({ space: PADDING }) {
      Text('北京').fontSize(14).fontColor($r('app.color.white'))
      Stack() {
        TextInput().width('100%').height('100%').backgroundColor($r('app.color.white'))
        Row() {
          Image($r("app.media.search")).width(18).height(18)
          Text('公司/地铁/小区,马上搜索')
            .fontSize(10)
            .fontColor($r('app.color.gray'))
            .layoutWeight(1)
            .margin({ left: PADDING_S, right: PADDING_S })
          Column() {
          }.width(1).height(18).backgroundColor($r('app.color.line')).margin({ right: PADDING })

          Image($r("app.media.position")).width(18).height(18)
        }.padding({ left: PADDING, right: PADDING })

      }.width(244)

      Image($r('app.media.message')).width(24).height(24)
    }.width('100%')
    .height(38)
    .padding({ left: PADDING, right: PADDING })
    .margin({ top: 4 })
  }
}

4、ets/views/Home/NavList.ets

ts 复制代码
import { INavItem, INavList } from "../../models/HomeData";

/**
 * MyHouseApplication #项目的名称
 * NavList.ets #文件名称
 * Created by zhong ON 2025/2/24 #作者及添加日期
 */
@Component
export default struct NavList {
  @Prop navList: INavList;

  build() {
    Grid() {

      ForEach(this.navList, (item: INavItem) => {
        GridItem() {
          Column({ space: 8 }) {
            Image(item.imageURL).width(58).height(56).objectFit(ImageFit.Fill)
            Text(item.title).fontSize(12).fontColor($r('app.color.black'))
          }
        }
      }, (nav: INavItem) => nav.id + '')
    }
    .width('100%')
    .height(170)
    .margin({ top: 24 })
    .rowsGap(14)
    .columnsGap(32)
    .rowsTemplate('1fr 1fr')
    .columnsTemplate('1fr 1fr 1fr 1fr')
  }
}

5、ets/views/Home/TileList.ets

ts 复制代码
import { ITileItem, ITileList } from "../../models/HomeData"

/**
 * MyHouseApplication #项目的名称
 * TileList.ets #文件名称
 * Created by zhong ON 2025/2/24 #作者及添加日期
 */
@Component
export default struct TileList {
  @Prop tileList: ITileList;

  build() {
    Row({ space: 64 }) {
      ForEach(this.tileList, (tile: ITileItem) => {
        Column() {
          Image(tile.imageURL).width("100%").height(58).objectFit(ImageFit.Fill)
          Row({ space: 5 }) {
            Text(tile.title).fontSize(12).fontColor($r('app.color.black'))
            Text(tile.sub_title).fontSize(10).fontColor($r('app.color.gray'))
          }.height(22)
          .width("100%")

        }.width(148)
      }, (tile: ITileItem) => tile.id + '')
    }.width('100%')
    .height('79')
    .margin({ top: 12 })
  }
}

6、ets/views/Home/PlanList.ets

ts 复制代码
import { IPlanItem, IPlanList } from "../../models/HomeData"

/**
 * MyHouseApplication #项目的名称
 * PlanList.ets #文件名称
 * Created by zhong ON 2025/2/24 #作者及添加日期
 */
@Component
export default struct PlanList {
  @Prop planList: IPlanList;

  build() {
    Row({ space: 15 }) {
      ForEach(this.planList, (plan: IPlanItem) => {
        Image(plan.imageURL).width(78).height(60).objectFit(ImageFit.Fill)
      }, (plan: IPlanItem) => plan.id + "")
    }.width('100%')
    .margin({ top: 18 })
  }
}

7、后端代码

双击 zufangBackend-windows-amd64.exe 运行

相关推荐
鸿蒙布道师21 分钟前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
Harrison_zhu1 小时前
Ubuntu18.04 编译 Android7.1代码报错
android
CYRUS STUDIO3 小时前
Unidbg Trace 反 OLLVM 控制流平坦化(fla)
android·汇编·算法·网络安全·逆向·ollvm
扫地的小何尚4 小时前
NVIDIA工业设施数字孪生中的机器人模拟
android·java·c++·链表·语言模型·机器人·gpu
顾林海6 小时前
深度解析ArrayList工作原理
android·java·面试
安静的海岸_AI6 小时前
Android端WIFI/流量共存技术方案
android
_一条咸鱼_6 小时前
Android Compose 框架进度指示器深入剖析(五十二)
android
张风捷特烈6 小时前
Flutter 伪 3D 绘制#02 | 地平面与透视
android·flutter
每次的天空6 小时前
Kotlin 作用域函数:apply、let、run、with、also
android·开发语言·kotlin
重生之我在写代码6 小时前
如何进行apk反编译
android·程序员·编译器