鸿蒙开发深入浅出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 运行