简单写一个多端适配的鸿蒙新闻应用

基本结构和小屏幕（xs和sm）流式布局

//stack组件用于绝对定位
Stack({ alignContent: Alignment.Top }) {
//alignContent: Alignment.Top属性是的stack内部组件从上往下布局
  Scroll() {
  //scroll组件内部必须包含不定高的唯一容器组件，一般是Column
    Column() {
      //判断小屏幕和超小屏幕下页面结构，流式布局，不涉及响应式
      if (this.curBp === 'xs' || this.curBp === 'sm') {
        List({
          space: Constants.LIST_GUTTER
        }) {
          ListItem() {
            HotList({ hotList: this.hotList })
          }

          ListItem() {
            NewsWithThreeImage({ news: this.multiImageList[2] })
          }

          ForEach(this.imageAndTextViewModel.getNewsListGroup(0), (news: News) => {
            ListItem() {
              LeftTextRightImageBgWhite({ news })
            }
          }, (news: News) => news.getNewsID())

          ListItem() {
            TopTextBottomVideo({ news: this.videoList[0] })
          }
        }
        .width(Constants.CONTENT_WIDTH)
      } else {

      }
    }
    .padding($r("app.float.container_padding"))
    .width(Constants.FULL_WIDTH)
    .backgroundColor(Color.White)
    // .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
  }
  //header组件高36，所以scroll组件需要加36的marginTop
  .margin({ top: 36 })
  //垂直滚动
  .scrollable(ScrollDirection.Vertical)
  //打开滚动条
  .scrollBar(BarState.On)
  //设置滚动条颜色
  .scrollBarColor(Color.Gray)
  .edgeEffect(EdgeEffect.Spring)
  //header组件，高度6，包含返回功能
  Header()
}

深入剖析md(折叠屏展开)和lg(pad端)响应式设计

1. 分析第一个GridRow

GridRow({
  columns: {
    // md下分2份
    md: Constants.GRID_ROW_COLUMNS[1],
    // lg下分4份
    lg: Constants.GRID_ROW_COLUMNS[2]
  },
  gutter: $r("app.float.news_list_common_space")
}) {
  GridCol() {
    HotList({ hotList: this.hotList })
  }

  GridCol() {
    TopImageBottomText({ news: this.topImageBottomTextList[0] })
  }

  GridCol() {
    Column() {
      LeftTextRightImageBgGray({ news: this.newsList[0] })
      LeftTextRightImageBgGray({ news: this.newsList[1] })
    }
    .height($r("app.float.cards_height"))
    .justifyContent(FlexAlign.SpaceBetween)
  }

  GridCol() {
    Column() {
      LeftTextRightImageBgGray({ news: this.newsList[2] })
      LeftTextRightImageBgGray({ news: this.newsList[3] })
    }
    .height($r("app.float.cards_height"))
    .justifyContent(FlexAlign.SpaceBetween)
  }

}

每个GridCol默认占据一份，所以该GridRow行展示如下图

2. 分析第二个GridRow

GridRow({
  // 4
  columns: Constants.GRID_ALL_COLUMNS,
  gutter: $r("app.float.grid_gutter")
}) {
  GridCol({
    span: {
      // 4
      md: Constants.GRID_COLUMN_SPAN[2],
      // 2
      lg: Constants.GRID_COLUMN_SPAN[1]
    }
  }) {
    VideoCard({ news: this.videoList[0] })
  }

  GridCol({
    span: {
      // 2
      md: Constants.GRID_COLUMN_SPAN[1],
      // 1
      lg: Constants.GRID_COLUMN_SPAN[0]
    }
  }) {
    TopImageBottomText({ news: this.topImageBottomTextList[1] })
  }

  GridCol({
    span: {
      // 2
      md: Constants.GRID_COLUMN_SPAN[1],
      // 1
      lg: Constants.GRID_COLUMN_SPAN[0]
    }
  }) {
    TopImageBottomText({ news: this.topImageBottomTextList[2] })
  }
}
.margin({ top: $r("app.float.grid_gutter") })

GridRow一共分四份 md下分别是4、22如下图

lg下分别是211如下图

3. 分析第三个GridRow

GridRow({
  //4
  columns: Constants.GRID_ALL_COLUMNS,
  gutter: $r("app.float.grid_gutter")
}) {
  GridCol({
    span: {
      // 2
      md: Constants.GRID_COLUMN_SPAN[1],
      // 1
      lg: Constants.GRID_COLUMN_SPAN[0]
    }
  }) {
    Column() {
      LeftTextRightImageBgGray({ news: this.newsList[4] })
      LeftTextRightImageBgGray({ news: this.newsList[5] })
    }
    .height($r("app.float.cards_height"))
    .justifyContent(FlexAlign.SpaceBetween)
  }

  GridCol({
    span: {
      // 2
      md: Constants.GRID_COLUMN_SPAN[1],
      // 1
      lg: Constants.GRID_COLUMN_SPAN[0]
    }
  }) {
    Column() {
      LeftTextRightImageBgGray({ news: this.newsList[6] })
      LeftTextRightImageBgGray({ news: this.newsList[7] })
    }
    .height($r("app.float.cards_height"))
    .justifyContent(FlexAlign.SpaceBetween)
  }

  GridCol({
    span: {
      // 4
      md: Constants.GRID_COLUMN_SPAN[2],
      // 2
      lg: Constants.GRID_COLUMN_SPAN[1]
    }
  }) {
    VideoCard({ news: this.videoList[1] })
  }
}
.margin({ top: $r("app.float.grid_gutter") })

GridRow一共分四份 md下是两行22、4如下图

lg下是单行112如下图

关于简单的多端鸿蒙APP适配就是这样