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

相关推荐
雨白8 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
kk爱闹9 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
每次的天空11 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭11 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日12 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安12 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑13 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
还鮟17 小时前
CTF Web的数组巧用
android
伍哥的传说18 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
小蜜蜂嗡嗡18 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio