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

相关推荐
练小杰2 小时前
【Mysql】我在广州学Mysql 系列——Mysql 性能优化
android·数据库·经验分享·sql·mysql·性能优化·性能
ShawnRacine4 小时前
Flutter-Android编译报错与解决方案汇总
android·flutter
Python私教4 小时前
Flutter 实现抖音风格底部导航栏
android·开发语言·javascript
数据小爬虫@5 小时前
如何使用爬虫获取淘宝商品详情:API返回值说明与案例指南
android·爬虫
音视频牛哥7 小时前
深度解析SmartGBD助力Android音视频数据接入GB28181平台
android·音视频·大牛直播sdk·gb28181·gb28181平台·gb28181对接·gb28181语音广播
工程师老罗11 小时前
我用Ai学Android Jetpack Compose之Composable与View的区别与联系
android·android jetpack
工程师老罗11 小时前
我用Ai学Android Jetpack Compose之LinearProgressIndicator
android·android jetpack
风浅月明21 小时前
[Android]应用内更新问题
android
当归102421 小时前
接雨水的算法
android·java·算法