商品详情页面的常规布局方式

// DetailsPage.ets
...
@Entry
@Component
struct DetailsPage {
  private goodsDetails: GoodsData = new GoodsData();

  aboutToAppear() {
    if (position) {
      this.goodsDetails = viewModel.loadDetails(position);
    }
  }
  ...
  build() {
    Column() {
      Scroll() {
        Column() {
          Stack({ alignContent: Alignment.Top }) {
            // 商品图片预览组件
            PreviewerComponent({ goodsImg: this.goodsDetails.goodsImg })
            this.topBarLayout()
          }
          .height(DetailsPageStyle.TOP_LAYOUT_HEIGHT)
          .width(PERCENTAGE_100)
          .backgroundColor($r('app.color.background1'))
          // 展示商品信息的卡片布局
          this.cardsLayout()
        }
        .width(PERCENTAGE_100)
      }
      .height(DetailsPageStyle.SCROLL_LAYOUT_WEIGHT)
      .backgroundColor($r('app.color.background'))
      // 底部工具栏
      BottomBarComponent()
        .height(DetailsPageStyle.TOOLBAR_WEIGHT)
    }
    .height(PERCENTAGE_100)
    .width(PERCENTAGE_100)
  }
  ...
}