【鸿蒙实战开发】简单手写一个多端适配的鸿蒙新闻应用-CSDN博客

本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141062271

基本结构和小屏幕（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端)响应式设计

分析第一个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行展示如下图

分析第二个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如下图

分析第三个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如下图