实战11-Grid-ForEach-Column-Stack练习。

import { getRoomRecommendListApi } from '../../api/home';
import { IRoomRecommendItem, IRoomRecommendList, ITagItem } from '../../api/models/HomeData';
import { BORDER_RADIUS, PADDING, PADDING_S } from '../../constants/size';

@Component
export default struct RoomRecommend {
  @State roomRecommendList: IRoomRecommendList = []
  //获取房源推荐列表
  getRoomRecommendList = async () => {
    this.roomRecommendList = await getRoomRecommendListApi();
    console.log(JSON.stringify(this.roomRecommendList));
    console.log(JSON.stringify('222'));
  }

  aboutToAppear(): void {
    this.getRoomRecommendList()
    console.log(JSON.stringify('1111'));
  }

  build() {
    Column() {
      Row() {
        Text() {
          Span('周边房源').fontColor($r('app.color.black'))
          Span('推荐').fontColor($r('app.color.primary'))
        }
        .fontSize(16)
        .fontWeight(700)

        Row({ space: 6 }) {
          Text('更多推荐').fontSize(10).fontColor($r('app.color.gray_second'))
          Image($r('app.media.arrow_right')).width(4).height(8)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: PADDING, right: PADDING, bottom: PADDING_S })

      Grid() {
        ForEach(this.roomRecommendList, (room: IRoomRecommendItem) => {
          GridItem() {
            Column() {
              Stack() {
                Image(room.housePicture).width('100%').height('100%').objectFit(ImageFit.Fill).borderRadius({
                  topLeft: BORDER_RADIUS, topRight: BORDER_RADIUS
                })
                Image($r('app.media.room_text_bg')).width('100%').height('100%').objectFit(ImageFit.Fill).borderRadius({
                  topLeft: BORDER_RADIUS, topRight: BORDER_RADIUS
                })
                Row({ space: 6 }) {
                  Image($r('app.media.location'))
                    .width(12)
                    .height(14)
                    .objectFit(ImageFit.Fill)
                    .fillColor($r('app.color.white'))
                  Text(room.address).fontSize(10).fontColor($r('app.color.white'))
                }.margin({ left: 8, bottom: 6 })
              }.width('100%').height(120).alignContent(Alignment.BottomStart)

              Column() {
                Row() {
                  Text() {
                    Span(room.renPriceListing).fontSize(14)
                    Span(room.renPriceUnit).fontSize(12)
                  }.fontSize(14).fontColor('#E38010')

                  Text(room.rentArea + '㎡')
                }.width('100%').justifyContent(FlexAlign.SpaceBetween).height(22)

                Text(room.houseTitle)
                  .fontSize(12)
                  .fontColor($r('app.color.black'))
                  .textOverflow({
                    overflow: TextOverflow.Ellipsis
                  })
                  .width('100%')
                  .height(18)
                  .maxLines(1)
                  .margin({ top: 2 })
                Row({ space: 6 }) {
                  ForEach(room.tags.slice(0, 2), (tag: ITagItem, index) => {
                    Text(tag.name)
                      .fontSize(10)
                      .fontColor(index === 1 ? '#b3b3b3' : $r('app.color.white'))
                      .backgroundColor(index === 1 ? $r('app.color.bg_gray') : $r('app.color.primary'))
                      .height(16)
                      .padding({ left: 6, right: 6 })
                      .borderRadius(2)
                  }, (tag: ITagItem) => tag.name)
                }.width('100%').margin({ top: 6 })

              }.width('100%').padding(PADDING_S)
            }.width(160).height(210).borderRadius(BORDER_RADIUS).backgroundColor($r('app.color.white'))

          }.backgroundColor('#fff1efef')
        }, (room: IRoomRecommendItem) => room.id)
      }
      .width('100%')
      .height(210 * 4 + 16 * 2 + 8 * 3)
      .backgroundColor($r('app.color.bg_gray'))
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(8) //行间距
      .columnsGap(8) //列间距
      .padding(PADDING)
    }
    .width('100%')
    .margin({ top: 32 })

  }
}

import { getHomeDataApi } from '../api/home';
import { BannerListDataSource, INavList, IPlanList, ITitleList } from '../api/models/HomeData';
import SwiperLayout from '../views/Home/SwiperLayout';
import { window } from '@kit.ArkUI';
import NavList from '../views/Home/NavList';
import { PADDING, SHADOW_RADIUS } from '../constants/size';
import SearchBar from '../views/Home/SearchBar';
import TitleList from '../views/Home/TitleList';
import PlanList from '../views/Home/PlanList';
import RoomRecommend from '../views/Home/RoomRecommend';

@Entry
@Component
export default struct Home {
  @State bannerList: BannerListDataSource = new BannerListDataSource()
  @State navList: INavList = []
  @State titleList: ITitleList = []
  @State planList: IPlanList = []
  @State adPicure: string = ''
  //获取首页数据的函数
  getHomeData = async () => {
    const result = await getHomeDataApi()
    this.bannerList.setList(result.bannerList)
    this.navList = result.navList;
    this.titleList = result.titleList;
    this.planList = result.planList;
    this.adPicure = result.adPicTure;

  }

  //生命周期函数：初始化渲染时候
  aboutToAppear(): void {
    this.getHomeData()

    window.getLastWindow(getContext())
      .then(win => {
        win.setWindowLayoutFullScreen(true)
      })
  }

  build() {

    Scroll() {
      Stack() {
        Column() {
          //轮播图组件
          SwiperLayout({ bannerList: this.bannerList })
          Column() {
            //导航栏
            NavList({ navList: this.navList })
            // TitleList
            TitleList({ titleList: this.titleList })
            //计划列表
            PlanList({ planList: this.planList })
            //广告
            Image(this.adPicure)
              .width('100%')
              .height(60)
              .objectFit(ImageFit.Fill)
              .shadow(
                {
                  offsetX: 0,
                  offsetY: 0,
                  radius: SHADOW_RADIUS,
                  color: 'rgba(0,0,0.14)'
                }
              )
              .margin({ top: 10 })
          }
          .width('100%').padding({ left: PADDING, right: PADDING })

          //房源推荐
          RoomRecommend()
        }.width('100%')

        //搜索区
        SearchBar()
      }.width('100%').alignContent(Alignment.TopStart)
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .align(Alignment.TopStart)
    .backgroundColor('#ffffffff')

  }
}