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

1、效果展示

2、ets/pages/Home.ets

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

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

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

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

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 运行