鸿蒙HarmonyOS开发：一次开发，多端部署（界面级）天气应用案例

最新推荐文章于 2024-09-14 11:10:02 发布
最新推荐文章于 2024-09-14 11:10:02 发布
阅读量394 收藏 13
点赞数 10
分类专栏： HarmonyOS 文章标签： 多端部署 自适应布局 响应式布局 侧边栏 天气应用 GridRow组件 Grid组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shanghai597/article/details/142215843
版权

文章目录

一、布局简介

布局可以分为自适应布局和响应式布局，二者的介绍如下表所示。

名称简介
自适应布局当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种：拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。
响应式布局当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种：断点、媒体查询、栅格布局。响应式布局可以实现界面随外部容器大小有不连续变化，通常不同特征下的界面显示会有较大的差异。

自适应布局多用于解决页面各区域内的布局差异，响应式布局多用于解决页面各区域间的布局差异。

自适应布局和响应式布局常常需要借助容器类组件实现，或与容器类组件搭配使用。

  • 自适应布局常常需要借助Row组件、Column组件或Flex组件实现。

在这里插入图片描述

  • 响应式布局常常与GridRow组件、Grid组件、List组件、Swiper组件或Tabs组件搭配使用。

在这里插入图片描述

二、典型布局场景

虽然不同应用的页面千变万化，但对其进行拆分和分析，页面中的很多布局场景是相似的。本小节将介绍如何借助自适应布局、响应式布局以及常见的容器类组件，实现应用中的典型布局场景。

布局场景实现方案
页签栏Tab组件 + 响应式布局
运营横幅（Banner）Swiper组件 + 响应式布局
网格Grid组件 / List组件 + 响应式布局
侧边栏SideBar组件 + 响应式布局
单/双栏Navigation组件 + 响应式布局
三分栏SideBar组件 + Navigation组件 + 响应式布局
自定义弹窗CustomDialogController组件 + 响应式布局
大图浏览Image组件
操作入口Scroll组件+Row组件横向均分
顶部栅格组件
缩进布局栅格组件
挪移布局栅格组件
重复布局栅格组件

三、侧边栏 SideBarContainer

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。

1、子组件
  • 子组件类型：系统组件和自定义组件，不支持渲染控制类型（if/else、ForEach和LazyForEach）。
  • 子组件个数：必须且仅包含2个子组件。
  • 子组件个数异常时：3个或以上子组件，显示第一个和第二个。1个子组件，显示侧边栏，内容区为空白。
2、属性
名称参数类型描述
showSideBarboolean设置是否显示侧边栏。
默认值：true
controlButtonButtonStyle设置侧边栏控制按钮的属性。
showControlButtonboolean设置是否显示控制按钮。
默认值：true
sideBarWidthnumberLength9+
sideBarPositionSideBarPosition设置侧边栏显示位置。
默认值：SideBarPosition.Start
3、事件
onChange(callback: (value: boolean) => void)

当侧边栏的状态在显示和隐藏之间切换时触发回调。true表示显示，false表示隐藏。

触发该事件的条件：

1、showSideBar属性值变换时；

2、showSideBar属性自适应行为变化时；

3、分割线拖拽触发autoHide时。

四、案例 天气应用

通过一个天气应用，介绍一多应用的整体开发过程。

“一多”建议从最初的设计阶段开始就拉通多设备综合考虑。考虑实际智能终端设备种类繁多，设计师无法针对每种具体设备各自出一份UX设计图。“一多”建议从设备屏幕宽度的维度，将设备划分为三大类。设计师只需要针对这三大类设备做设计，而无需关心具体的设备形态。

在这里插入图片描述

1、UX设计

默认设备和平板对应于小设备、中设备及大设备，本示例以这三类设备场景为例，介绍不同设备上的UX设计。天气主页在不同设备上的设计图如下所示。

在这里插入图片描述

另外，大设备中天气主页还允许用户开启或者隐藏侧边栏。

在这里插入图片描述

2、实现分析

将天气主页划分为9个基础区域

在这里插入图片描述

天气主页中的9个基础区域介绍及实现方案如下表所示。

编号简介实现方案
1标题栏自适应布局拉伸能力。
2天气概览Row和Column组件，并指定其子组件按照主轴起始方向对齐或居中对齐。
3每小时天气自适应布局延伸能力 。
4每日天气自适应布局延伸能力 。
5空气质量Canvas画布组件绘制空气质量图，并使用Row组件和Column组件控制内部元素的布局。
6生活指数Grid响应式布局。
7日出日落Canvas画布组件绘制日出日落图 。
8应用信息Row和Column组件，并指定其子组件居中对齐。
9侧边导航栏综合运用自适应布局中的拉伸能力、占比能力和延伸能力 。

天气主页右侧的城市天气详情由区域1-8组成，区域1（标题栏）始终固定在页面顶部，区域2-8在不同设备下的布局不同且可以随页面上下滚动。本小节介绍如何实现城市天气详情中区域2~8的布局效果。

设备屏幕可能无法一次性显示区域2-8的所有内容，故需要在外层增加滚动组件（即Scroll组件）以支持上下滚动。不同设备下区域2-8的相对位置一共有三套不同的布局，可以借助响应式布局中的栅格布局实现这一效果。本示例中将栅格在不同场景下分别划分为4列、8列和12列，区域2-8在不同场景下的布局如下表所示。

在这里插入图片描述

为提升用户体验，大设备侧边栏隐藏状态下，每日天气与空气质量的相对顺序发生了改变。可以通过调整GridCol栅格子组件的order属性，实现目标效果。

3、主页整体实现

综合考虑各设备下的效果，天气主页的根节点使用侧边栏组件：

  • 小设备和中设备既不展示侧边栏，也不提供控制侧边栏显示和隐藏的按钮。

  • 大设备默认展示侧边栏，同时提供控制侧边栏显示和隐藏的按钮。

另外主页右侧的城市天气详情，支持左右滑动切换城市，可以使用Swiper组件实现目标效果。

  • 小设备和中设备开启Swiper组件的导航点，引导用户通过左右滑动切换不同城市。

  • 大设备中用户通过点击侧边栏中的城市列表即可高效的切换不同城市，此时需要关闭Swiper组件的导航点。

4、具体代码

代码里数据均采用测试数据，只是为了布局展示，没有详细数据模型。
图片icon只是采用了简单的代替。

  • 主页侧边栏布局

// Weather.ets

import HomeContent from './weather/HomeContent';
import IndexTitleBar from './weather/IndexTitleBar';
import SideContent from './weather/SideContent';
import { BreakpointSystem } from '../utils/BreakpointSystem'

@Entry
@Component
struct Home {
  @State showSideBar: boolean = false;
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'
  private breakpointSystem: BreakpointSystem = new BreakpointSystem();

  aboutToAppear() {
    // 注册监听
    this.breakpointSystem.register()
  }

  aboutToDisappear() {
    // 移除监听
    this.breakpointSystem.unregister()
  }

  build() {
    SideBarContainer(SideBarContainerType.Embed) {
      // 左侧侧边栏
      SideContent({ showSideBar: $showSideBar })
      // 右侧内容区
      Flex({ direction: FlexDirection.Column }) {
        // 基础区域1标题栏
        IndexTitleBar({ showSideBar: $showSideBar })
        // 天气详情，通过Swiper组件实现左右滑动切换城市的效果
        Swiper() {
          ForEach([1, 2, 3], (item, index) => {
            HomeContent({ showSideBar: this.showSideBar })
          })
        }
        // 大设备关闭导航点
        .indicator(this.currentBreakpoint !== 'lg')
        .width('100%')
      }
      .backgroundImage($r('app.media.whiteClouds'))
      .backgroundImageSize(ImageSize.Cover)
    }
    .height('100%')
    .sideBarWidth('34%')
    // 通过状态变量，控制不同设备下侧边栏的显隐状态
    .showSideBar(this.currentBreakpoint == 'lg' ? this.showSideBar : false)
    .showControlButton(this.currentBreakpoint == 'lg')
    .controlButton({
      left: this.showSideBar ? 232 : 10,
      top: 10,
      width: 30,
      height: 20,
      icons: {
        switching: $r('app.media.switching'),
        shown: $r('app.media.switching'),
        hidden: $r('app.media.switching')
      }
    })
    .onChange((value: boolean) => {
      this.showSideBar = value
    })
    .backgroundColor('#116ACE')
  }
}
  • 左边栏布局9

// SideContent.ets

@Component
export default struct SideContent {
  @Prop showSideBar: boolean;

  build() {
    Column({ space: 10 }) {
      Text('天气')
        .fontColor(Color.White)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .margin({ top: 40 })
      Search({ placeholder: '搜索城市(中文/拼音)' })
        .backgroundColor('rgba(255, 255, 255, 0.2)')
        .placeholderColor(Color.White)
        .placeholderFont({ size: 14 })
        .width('100%')
        .textFont({ size: 14 })
      List({ space: 12 }) {
        ForEach([1, 2, 3, 4, 5], (item) => {
          ListItem() {
            Row() {
              Text('深圳')
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.White)
                .fontSize(20)
              Blank()
              Column() {
                Row({ space: 2 }) {
                  Text('20')
                    .fontColor(Color.White)
                    .fontSize(32)
                  Text('℃')
                    .fontColor(Color.White)
                    .fontSize(16)
                    .margin({ top: 6 })
                }.alignItems(VerticalAlign.Top)

                Text('晴')
                  .fontColor(Color.White)
                  .fontSize(14)
              }
            }.width('100%')
            .backgroundColor('rgba(255, 255, 255, 0.1)')
            .padding(6)
            .borderRadius(8)
          }
        })
      }
    }.width('100%')
    .height('100%')
    .padding(18)
    .backgroundColor('rgba(255, 255, 255, 0.1)')
  }
}
  • 右边栏整体布局

// HomeContent.ets

import AirQuality from './AirQuality';
import HoursWeather from './HoursWeather';
import IndexEnd from './IndexEnd';
import IndexHeader from './IndexHeader';
import LifeIndex from './LifeIndex';
import MultidayWeather from './MultidayWeather';
import SunCanvas from './SunCanvas';

@Component
export default struct HomeContent {
  @Prop showSideBar: boolean;

  build() {
    // 支持滚动
    Scroll() {
      GridRow({
        columns: { sm: 4, md: 8, lg: this.showSideBar ? 8 : 12 },
        breakpoints: { reference: BreakpointsReference.WindowSize } }) {
        // 天气概览2
        GridCol({ span: { sm: 4, md: 8, lg: this.showSideBar ? 8 : 12 }, order: 1 }) {
          IndexHeader()
        }
        // 每小时天气3
        GridCol({ span: { sm: 4, md: 8, lg: 8 }, order: 2 }) {
          HoursWeather()
        }
        // 每日天气4
        GridCol({ span: 4, order: { sm: 3, md: 3, lg: this.showSideBar ? 3 : 4 } }) {
          MultidayWeather()
        }
        // 空气质量5
        GridCol({ span: 4, order: { sm: 4, md: 4, lg: this.showSideBar ? 4 : 3 } }) {
          AirQuality()
        }
        // 生活指数6
        GridCol({ span: 4, order: 5 }) {
          LifeIndex()
        }
        // 日出日落7
        GridCol({ span: 4, order: 6 }) {
          SunCanvas()
        }
        // 应用信息8
        GridCol({ span: { sm: 4, md: 8, lg: this.showSideBar ? 8 : 12 }, order: 7 }) {
          IndexEnd()
        }
      }
    }
    .width('100%')
  }
}
  • 标题栏布局1

// IndexTitleBar.ets

@Component
export default struct IndexTitleBar {
  @Prop showSideBar: boolean;

  build() {
    Row() {
      Image($r('app.media.menu'))
        .width(24)
        .height(24)
    }
    .width('100%')
    .height(44)
    .justifyContent(FlexAlign.End)
    .padding(10)
  }
}
  • 天气概览布局2

// IndexHeader.ets

@Component
export default struct IndexHeader {
  build() {
    Column({ space: 4 }) {
      Row({ space: 4 }) {
        Text('浦东新区')
          .fontColor(Color.White)
          .fontSize(18)
        Image($r('app.media.location2'))
          .width(18)
          .height(18)
      }.margin({ top: 4 })

      Row({ space: 4 }) {
        Text('20')
          .fontColor(Color.White)
          .fontSize(48)
        Text('℃')
          .fontColor(Color.White)
          .fontSize(16)
          .margin({ top: 8 })
      }.alignItems(VerticalAlign.Top)

      Row({ space: 4 }) {
        Text('22℃ / 15℃')
          .fontColor(Color.White)
          .fontSize(14)
      }

      Row({ space: 4 }) {
        Text('晴 空气优')
          .fontColor(Color.White)
          .fontSize(14)
      }

      Blank()
      Row({ space: 10 }) {
        Image($r('app.media.notice'))
          .width(14)
          .height(14)
        Text('当前多云，今天和昨天温度一样，适合外出游玩！')
          .fontColor(Color.White)
          .fontSize(12)
      }.width('100%').justifyContent(FlexAlign.Start)
    }.width('100%')
    .height(180)
    .padding(10)
  }
}
  • 每小时天气布局3

// HoursWeather.ets

@Component
export default struct HoursWeather {
  build() {
    Row() {
      List({ space: 2 }) {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], (item) => {
          ListItem() {
            Column({ space: 8 }) {
              Text(`上午 ${item}:00`).fontSize(12).fontColor(Color.White)
              Image($r('app.media.w7')).width(30).height(30).objectFit(ImageFit.Contain)
              Text(`${item}℃`).fontSize(12).fontColor(Color.White)
              Text('东风').fontSize(12).fontColor(Color.White)
              Text(`${item}级`).fontSize(12).fontColor(Color.White)
            }.width(84)
            .height('100%')
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .backgroundColor('rgba(255, 255, 255, 0.1)')
      .padding(5)
      .borderRadius(6)
      .width('100%')
    }.width('100%')
    .height(150)
    .padding(6)
  }
}
  • 每日天气布局4

// MultidayWeather.ets

@Component
export default struct MultidayWeather {
  build() {
    Row() {
      List({ space: 2 }) {
        ForEach([1, 2, 3, 4, 5, 6, 7], () => {
          ListItem() {
            Column({ space: 4 }) {
              Text('昨日').fontSize(12).fontColor(Color.White)
              Text('09/12').fontSize(12).fontColor(Color.White)
              Image($r('app.media.w5')).width(26).height(26).objectFit(ImageFit.Contain)
              Text('晴').fontSize(12).fontColor(Color.White)
              Text('16℃/22℃').fontSize(12).fontColor(Color.White)
              Button() {
                Text('良').fontSize(10).fontColor(Color.White)
              }.backgroundColor('rgba(255, 255, 255, 0.2)').padding({ top: 2, bottom: 2, left: 6, right: 6 })
            }.width(84)
            .height('100%')
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .backgroundColor('rgba(255, 255, 255, 0.1)')
      .padding(5)
      .borderRadius(6)
      .width('100%')
      .height('100%')
    }.width('100%')
    .height(150)
    .padding(6)
  }
}
  • 空气质量布局5

// AirQuality.ets

@Component
export default struct AirQuality {
  build() {
    Row() {
      Row() {
        Column() {
          Image($r('app.media.meteorological')).height('88%').objectFit(ImageFit.Contain)
        }.width('55%').height('100%').alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)

        Column({ space: 4 }) {
          Row() {
            Text('PM10').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)
            Text('181').fontColor(Color.White).fontSize(12).layoutWeight(1)
          }

          Row() {
            Text('PM2.5').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)
            Text('43').fontColor(Color.White).fontSize(12).layoutWeight(1)
          }

          Row() {
            Text('NO2').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)
            Text('66').fontColor(Color.White).fontSize(12).layoutWeight(1)
          }

          Row() {
            Text('SO2').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)
            Text('121').fontColor(Color.White).fontSize(12).layoutWeight(1)
          }

          Row() {
            Text('O2').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)
            Text('8').fontColor(Color.White).fontSize(12).layoutWeight(1)
          }

          Row() {
            Text('CO').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)
            Text('6').fontColor(Color.White).fontSize(12).layoutWeight(1)
          }
        }
        .width('45%')
        .height('100%')
        .padding(4)
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .backgroundColor('rgba(255, 255, 255, 0.1)')
      .padding(5)
      .borderRadius(6)
      .width('100%')
      .height('100%')
    }.width('100%')
    .height(150)
    .padding(6)
  }
}
  • 生活指数布局6

// LifeIndex.ets

@Component
export default struct LifeIndex {
  build() {
    Row() {
      Row() {
        Grid() {
          ForEach([1, 2, 3, 4, 5, 6, 7, 8], (item) => {
            GridItem() {
              Column() {
                Image($r('app.media.w9')).width(26).height(26).objectFit(ImageFit.Contain)
                Text('昨日').fontSize(12).fontColor(Color.White)
                Text('晴' + item).fontSize(12).fontColor(Color.White)
              }
            }
          })
        }.columnsTemplate('1fr 1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .columnsGap(2)
        .rowsGap(2)
      }
      .backgroundColor('rgba(255, 255, 255, 0.1)')
      .padding(5)
      .borderRadius(6)
      .width('100%')
      .height('100%')
    }.width('100%')
    .height(150)
    .padding(6)
  }
}
  • 日出日落布局7

// SunCanvas.ets

@Component
export default struct SunCanvas {
  build() {
    Row() {
      Column() {
        Image($r('app.media.sunset')).height('88%').objectFit(ImageFit.Contain)
      }
      .backgroundColor('rgba(255, 255, 255, 0.1)')
      .padding(5)
      .borderRadius(6)
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }.width('100%')
    .height(150)
    .padding(6)
  }
}
  • 应用信息布局8

// IndexEnd.ets

@Component
export default struct IndexEnd {
  build() {
    Row() {
      Column() {
        Text('中国天气').fontSize(12).fontColor(Color.White)
        Text('天气版本:11.1.0').fontSize(12).fontColor(Color.White)
        Text('关于天气与隐私的声明').fontSize(12).fontColor(Color.White)
        Text('版权所有©2018 华为技术有限公司保留一切权利').fontSize(12).fontColor(Color.White)
      }
      .backgroundColor('rgba(255, 255, 255, 0.1)')
      .padding(8)
      .borderRadius(6)
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.SpaceEvenly)
    }.width('100%')
    .height(120)
    .padding(6)
  }
}

五、运行效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

邹荣乐
关注
专栏目录
鸿蒙应用开发系列 EX篇：HarmonyOS应用开发者高级认证
生活在别处
05-06 867
通过该认证的开发者，不仅能够证明自己在HarmonyOS平台上的专业水平，还有机会获得华为官方的认可和支持，比如市场推广资源、技术支持优先权等，有助于提升个人职业竞争力或企业的业务发展。在Column和Row容器组件中，alignItems用于设置子组件在主轴方向上的对齐格式，justifyContent用于设置子组件在交叉轴方向上的对齐格式。E.属性方法：用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color()
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5098
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
鸿蒙HarmonyOS开发：一次开发，多端部署（界面级）音乐专辑案例
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
09-14 914
随着终端设备形态日益多样化，分布式技术逐渐打破单一硬件边界，一个应用或服务，可以在不同的硬件设备之间随意调用、互助共享，让用户享受无缝的全场景体验。而作为应用开发者，广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容，则需要适配不同的屏幕尺寸和硬件，开发成本较高。HarmonyOS 系统面向多终端提供了“一次开发，多端部署”（后文中简称为“一多”）的能力，让开发者可以基于一种设计，高效构建多端可运行的应用。定义：一套代码工程，一次开发上架，多端按需部署。
鸿蒙OS开发：【一次开发，多端部署】（ 设置app页面）
鸿蒙的技术博客
05-21 1032
本示例展示了设置应用的典型页面，其在小窗口和大窗口有不同的显示效果，体现一次开发、多端部署的能力。
HarmonyOS实战IM系统之：一次开发多端部署
m0_64422261的博客
06-18 2171
即时通讯功能已经成为现代应用中不可或缺的一部分，对提升用户体验、提高业务效率、增强客户服务、推动业务增长具有重要作用。从刚工作时做的秀场直播应用到现在的房屋平台应用，IM都在其中发挥了重要作用。随着鸿蒙系统的崛起及鸿蒙生态的成熟，很多厂商还是适配HarmonyOS Next系统
鸿蒙OS开发：【一次开发，多端部署】（典型布局场景）
鸿蒙的技术博客
05-23 1510
虽然不同应用的页面千变万化，但对其进行拆分和分析，页面中的很多布局场景是相似的。本小节将介绍如何借助自适应布局、响应式布局以及常见的容器类组件，实现应用中的典型布局场景。
鸿蒙OS开发：【一次开发，多端部署】（app市场首页）项目
鸿蒙的技术博客
05-20 1330
本示例展示了应用市场首页，页面中包括Tab栏、运营横幅、精品应用、精品游戏等。本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配，保证应用在不同设备或不同窗口尺寸下可以正常显示。用到了媒体查询接口[@ohos.mediaquery]
HarmonyOS Codelab 优秀样例——购物应用，体验一次开发多端部署魅力
HarmonyOSDev的博客
08-28 3278
订单确认页由上方收件信息、订单信息、底部的总价和提交订单按钮组成，通过响应式布局的栅格布局，实现不同设备类型显示不同的效果，并通过自适应布局的拉伸能力，设置flexGrow属性使总价和提交订单按钮位于底部。通过响应式布局的媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值，设置商品列表列数和轮播图数，lg断点显示4列3张轮播图，md断点显示3列2张轮播图，sm断点显示2列1张轮播图。购物车标签页，由购物车列表和商品列表组成，商品列表实现逻辑同主页的商品列表，购物车列表使用自适应布局的均分能力实现。
鸿蒙HarmonyOS项目实战：实现微信app效果（基础界面搭建）_鸿蒙原生开发 微信
2401_84181253的博客
04-21 775
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）一个人可以走的很快，但一群人才能走的更远！
HarmonyOS开发：【基于命令行（安装编译工具）】
m0_62167422的博客
04-26 904
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点如果。
weixin121作品集展示微信小程序+ssm.rar
09-13
所有源码，都可正常运行
weixin090体育资讯软件的实现+ssm.rar
09-13
所有源码，都是可以运行起来的
基于java的财务管理系统设计与实现.docx
09-13
基于java的财务管理系统设计与实现.docx
吕嘉诚_训练班表.pdf
09-13
吕嘉诚_训练班表.pdf
springboot王者荣耀游戏KPL比赛网上售票系统毕业论文.docx
09-13
springboot王者荣耀游戏KPL比赛网上售票系统毕业论文.docx
基于java的城镇保障性住房管理系统设计与实现.docx
09-13
基于java的城镇保障性住房管理系统设计与实现.docx
技术资料分享FPGA入门系列实验教程V1.0.zip
09-13
技术资料分享FPGA入门系列实验教程V1.0.zip
django荣誉证书管理系统设计与实现毕业论文.docx
09-13
django荣誉证书管理系统设计与实现毕业论文.docx
基于FPGA的数码管计时器
09-13
在 FPGA 中实现计时 59 分 59 秒 999 毫秒并在达到设定时间时蜂鸣器报警的过程如下： 一、总体设计思路利用 FPGA 的时钟信号，通过多个计数器分别对秒、毫秒和分钟进行计数。当计时达到 59 分 59 秒 999 毫秒时，触发蜂鸣器报警信号。 二、模块划分 时钟分频模块： FPGA 通常使用较高频率的时钟源，需要将其分频为合适的频率供各个计数器使用。例如，若原始时钟为 50MHz，可以通过计数器分频得到 1kHz 的时钟信号用于毫秒计数。 毫秒计数器模块： 设计一个范围为 0 到 999 的计数器，以 1kHz 的时钟信号为触发进行计数。当计数到 999 时，产生一个进位信号给秒计数器。 秒计数器模块： 范围为 0 到 59 的计数器，当接收到毫秒计数器的进位信号时进行计数。当计数到 59 时，产生一个进位信号给分钟计数器。 分钟计数器模块： 范围为 0 到 59 的计数器，接收秒计数器的进位信号进行计数。 比较器模块： 用于比较当前的计时值与设定的 59 分 59 秒 999 毫秒是否相等。当相等时，输出一个报警信号。 蜂鸣器控制模块： 接收比较器输出的报警信号。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

邹荣乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值