鸿蒙Harmony-列表组件（List）详解

不要和别人比生活，每个人阶段不同，追求不同，活法自然也不同。只要今天的你能比昨天的你快乐一点点，那你就是自己人生赢家。

目录

一，定义

二，布局与约束

2.1 布局

2.2 约束

三，开发布局

3.1 设置主轴方向

3.2设置交叉轴布局

四，迭代列表内容

五，自定义列表样式

5.1 设置内容间距

5.2 添加分隔线

5.3 添加滚动条

5.4 支持分组列表

5.5 添加粘性标题

5.6 控制滚动位置

5.7 响应列表项侧滑

5.8 给列表项添加标记

一，定义

类似于Android的recyclerview，鸿蒙的列表List是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。

使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem，为列表中的行或列提供单个视图，或使用循环渲染迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

二，布局与约束

列表作为一种容器，会自动按其滚动方向排列子组件，向列表中添加组件或从列表中移除组件会重新排列子组件。

在垂直列表中，List按垂直方向自动排列ListItemGroup或ListItem。

ListItemGroup用于列表数据的分组展示，其子组件也是ListItem。ListItem表示单个列表项，可以包含单个子组件。

​

注意：List的子组件必须是ListItemGroup或ListItem，ListItem和ListItemGroup必须配合List来使用。

2.1 布局

List除了提供垂直和水平布局能力、超出屏幕时可以滚动的自适应延伸能力之外，还提供了自适应交叉轴方向上排列个数的布局能力。

利用垂直布局能力可以构建单列或者多列垂直滚动列表

​

利用水平布局能力可以是构建单行或多行水平滚动列表

​

2.2 约束

列表的主轴方向是指子组件列的排列方向，也是列表的滚动方向。垂直于主轴的轴称为交叉轴，其方向与主轴方向相互垂直。

垂直列表的主轴是垂直方向，交叉轴是水平方向；水平列表的主轴是水平方向，交叉轴是垂直方向。

​

如果List组件主轴或交叉轴方向设置了尺寸，则其对应方向上的尺寸为设置值。

如果List组件主轴方向没有设置尺寸，当List子组件主轴方向总尺寸小于List的父组件尺寸时，List主轴方向尺寸自动适应子组件的总尺寸。

类似于Android的wrap_content

三，开发布局

3.1 设置主轴方向

List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表。

若是水平滚动列表场景，将List的listDirection属性设置为Axis.Horizontal即可实现。listDirection默认为Axis.Vertical，即主轴默认是垂直方向。

垂直列表：

@Entry
@Component
struct Index {build() {List(){ListItem(){Text("袁震1").fontSize(24)}ListItem(){Text("袁震2").fontSize(24)}ListItem(){Text("袁震3").fontSize(24)}}.listDirection(Axis.Vertical)}
}

​

水平列表：

@Entry
@Component
struct Index {build() {List(){ListItem(){Text("袁震1").fontSize(24)}ListItem(){Text("袁震2").fontSize(24)}ListItem(){Text("袁震3").fontSize(24)}}.listDirection(Axis.Horizontal)}
}

​

3.2设置交叉轴布局

List组件的交叉轴布局可以通过lanes和alignListItem属性进行设置，lanes属性用于确定交叉轴排列的列表项数量，alignListItem用于设置子组件在交叉轴方向的对齐方式。

List组件的lanes属性通常用于在不同尺寸的设备自适应构建不同行数或列数的列表，即一次开发、多端部署的场景，例如歌单列表。lanes属性的取值类型是"number | LengthConstrain"，即整数或者LengthConstrain类型。以垂直列表为例，如果将lanes属性设为2，表示构建的是一个两列的垂直列表。lanes的默认值为1，即默认情况下，垂直列表的列数是1。

交叉轴方向列表项是2，对齐方式为居中对齐：

@Entry
@Component
struct Index {build() {List(){ListItem(){Text("袁震1").fontSize(24)}ListItem(){Text("袁震2").fontSize(24)}ListItem(){Text("袁震3").fontSize(24)}ListItem(){Text("袁震4").fontSize(24)}}.listDirection(Axis.Vertical).lanes(2).alignListItem(ListItemAlign.Center)}
}

当其取值为LengthConstrain类型时，表示会根据LengthConstrain与List组件的尺寸自适应决定行或列数。

例如，假设在垂直列表中设置了lanes的值为{ minLength: 200, maxLength: 300 }。此时，

 当List组件宽度为300vp时，由于minLength为200vp，此时列表为一列：

@Entry
@Component
struct Index {@State egLanes: LengthConstrain = { minLength: 200, maxLength: 300 }build() {List(){ListItem(){Text("袁震1").fontSize(24)}ListItem(){Text("袁震2").fontSize(24)}ListItem(){Text("袁震3").fontSize(24)}ListItem(){Text("袁震4").fontSize(24)}}.width(300).lanes(this.egLanes).listDirection(Axis.Vertical).alignListItem(ListItemAlign.Center)}
}

  

当List组件宽度变化至400vp时，符合两倍的minLength，则此时列表自适应为两列：

@Entry
@Component
struct Index {@State egLanes: LengthConstrain = { minLength: 200, maxLength: 200 }build() {List(){ListItem(){Text("袁震1").fontSize(24)}ListItem(){Text("袁震2").fontSize(24)}ListItem(){Text("袁震3").fontSize(24)}ListItem(){Text("袁震4").fontSize(24)}}.width(400).lanes(this.egLanes).listDirection(Axis.Vertical).alignListItem(ListItemAlign.Center)}
}

  

四，迭代列表内容

通常，应用通过数据集合动态地创建列表。使用循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件，降低代码复杂度。

ArkTS通过ForEach提供了组件的循环渲染能力。

新建数据类：

export default class YuanZhen {public name: string = 'YuanZhen';public age: number = 18;constructor(name: string, age: number) {this.name = namethis.age = age}
}

组件：

import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct Index {@State list:Array<YuanZhen>=new ArrayaboutToAppear(){this.list.push(new YuanZhen("袁震1",18))this.list.push(new YuanZhen("袁震2",19))this.list.push(new YuanZhen("袁震3",20))this.list.push(new YuanZhen("袁震4",21))this.list.push(new YuanZhen("袁震5",22))this.list.push(new YuanZhen("袁震6",23))}build() {List(){ForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}.width(400).listDirection(Axis.Vertical)}
}

五，自定义列表样式

5.1 设置内容间距

在初始化列表时，如需在列表项之间添加间距，可以使用space参数。例如，在每个列表项之间沿主轴方向添加10vp的间距

import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct Index {@State list:Array<YuanZhen>=new ArrayaboutToAppear(){this.list.push(new YuanZhen("袁震1",18))this.list.push(new YuanZhen("袁震2",19))this.list.push(new YuanZhen("袁震3",20))this.list.push(new YuanZhen("袁震4",21))this.list.push(new YuanZhen("袁震5",22))this.list.push(new YuanZhen("袁震6",23))}build() {List({space:10}){ForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}.width(400).listDirection(Axis.Vertical)}
}

5.2 添加分隔线

分隔线用来将界面元素隔开，使单个元素更加容易识别。

List提供了divider属性用于给列表项之间添加分隔线。在设置divider属性时，可以通过strokeWidth和color属性设置分隔线的粗细和颜色。

startMargin和endMargin属性分别用于设置分隔线距离列表侧边起始端的距离和距离列表侧边结束端的距离。

import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct Index {@State list:Array<YuanZhen>=new ArrayaboutToAppear(){this.list.push(new YuanZhen("袁震1",18))this.list.push(new YuanZhen("袁震2",19))this.list.push(new YuanZhen("袁震3",20))this.list.push(new YuanZhen("袁震4",21))this.list.push(new YuanZhen("袁震5",22))this.list.push(new YuanZhen("袁震6",23))}build() {List({space:10}){ForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}.divider({strokeWidth:1,startMargin:60,endMargin:10,color: '#ffe9f0f0'}).width(400).listDirection(Axis.Vertical)}
}

5.3 添加滚动条

当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，

在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为BarState，当取值为BarState.Auto表示按需显示滚动条。此时，当触摸到滚动条区域时显示控件，可上下拖拽滚动条快速浏览内容，拖拽时会变粗。若不进行任何操作，2秒后滚动条自动消失。

从API version 10版本开始默认值为BarState.Auto

import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct Index {@State list:Array<YuanZhen>=new ArrayaboutToAppear(){this.list.push(new YuanZhen("袁震1",18))this.list.push(new YuanZhen("袁震2",19))this.list.push(new YuanZhen("袁震3",20))this.list.push(new YuanZhen("袁震4",21))this.list.push(new YuanZhen("袁震5",22))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震6",23))this.list.push(new YuanZhen("袁震8",28))}build() {List({space:10}){ForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}.scrollBar(BarState.On).divider({strokeWidth:1,startMargin:60,endMargin:10,color: '#ffe9f0f0'}).width(400).listDirection(Axis.Vertical)}
}

5.4 支持分组列表

在列表中支持数据的分组展示，可以使列表显示结构清晰，查找方便，从而提高使用效率。

在List组件中使用ListItemGroup对项目进行分组，可以构建二维列表。

在List组件中可以直接使用一个或者多个ListItemGroup组件，ListItemGroup的宽度默认充满List组件。在初始化ListItemGroup时，可通过header参数设置列表分组的头部组件。

如果多个ListItemGroup结构类似，可以将多个分组的数据组成数组，然后使用ForEach对多个分组进行循环渲染。

import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct Index {@State list:Array<YuanZhen>=new Array@Builder itemHead(text: string) {Text(text).fontSize(20).backgroundColor('#345').width('100%').padding(5)}aboutToAppear(){this.list.push(new YuanZhen("袁震1",18))this.list.push(new YuanZhen("袁震2",19))this.list.push(new YuanZhen("袁震3",20))this.list.push(new YuanZhen("袁震4",21))this.list.push(new YuanZhen("袁震5",22))}build() {List({space:10}){ListItemGroup({ header: this.itemHead('A') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}ListItemGroup({ header: this.itemHead('B') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}}.scrollBar(BarState.On).divider({strokeWidth:1,startMargin:60,endMargin:10,color: '#ffe9f0f0'}).width(400).listDirection(Axis.Vertical)}
}

5.5 添加粘性标题

粘性标题是一种常见的标题模式，常用于定位字母列表的头部元素。

粘性标题不仅有助于阐明列表中数据的表示形式和用途，还可以帮助用户在大量信息中进行数据定位，从而避免用户在标题所在的表的顶部与感兴趣区域之间反复滚动。

List组件的sticky属性配合ListItemGroup组件使用，用于设置ListItemGroup中的头部组件是否呈现吸顶效果或者尾部组件是否呈现吸底效果。

通过给List组件设置sticky属性为StickyStyle.Header，即可实现列表的粘性标题效果。如果需要支持吸底效果，可以通过footer参数初始化ListItemGroup的底部组件，并将sticky属性设置为StickyStyle.Footer。

5.6 控制滚动位置

控制滚动位置在实际应用中十分常见，例如当新闻页列表项数量庞大，用户滚动列表到一定位置时，希望快速滚动到列表底部或返回列表顶部。此时，可以通过控制滚动位置来实现列表的快速定位

List组件初始化时，可以通过scroller参数绑定一个Scroller对象，进行列表的滚动控制。例如，用户在新闻应用中，点击新闻页面底部的返回顶部按钮时，就可以通过Scroller对象的scrollToIndex方法使列表滚动到指定的列表项索引位置。

import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct Index {@State list:Array<YuanZhen>=new ArraylistScroller: Scroller = new Scroller();@Builder itemHead(text: string) {Text(text).fontSize(20).backgroundColor('#345').width('100%').padding(5)}aboutToAppear(){this.list.push(new YuanZhen("袁震1",18))this.list.push(new YuanZhen("袁震2",19))this.list.push(new YuanZhen("袁震3",20))this.list.push(new YuanZhen("袁震4",21))this.list.push(new YuanZhen("袁震5",22))}build() {Column(){Text("回到顶部").width(50).height(50).onClick(()=>{this.listScroller.scrollToIndex(0)})List({space:10, scroller: this.listScroller}){ListItemGroup({ header: this.itemHead('A') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}ListItemGroup({ header: this.itemHead('B') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}ListItemGroup({ header: this.itemHead('C') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}}.scrollBar(BarState.On).divider({strokeWidth:1,startMargin:60,endMargin:10,color: '#ffe9f0f0'}).sticky(StickyStyle.Header)  // 设置吸顶，实现粘性标题效果.width("100%").listDirection(Axis.Vertical)}.width("100%").height("100%")}
}

5.7 响应列表项侧滑

ListItem的swipeAction属性可用于实现列表项的左右滑动功能。swipeAction属性方法初始化时有必填参数SwipeActionOptions，其中，start参数表示设置列表项右滑时起始端滑出的组件，end参数表示设置列表项左滑时尾端滑出的组件。

在消息列表中，end参数表示设置ListItem左滑时尾端划出自定义组件，即删除按钮。在初始化end方法时，将滑动列表项的索引传入删除按钮组件，当用户点击删除按钮时，可以根据索引值来删除列表项对应的数据，从而实现侧滑删除功能。

import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct Index {@State list:Array<YuanZhen>=new ArraylistScroller: Scroller = new Scroller();@Builder itemHead(text: string) {Text(text).fontSize(20).backgroundColor('#345').width('100%').padding(5)}@Builder itemEnd(index: number) {// 构建尾端滑出组件Button({ type: ButtonType.Circle }) {Image($r('app.media.startIcon')).width(20).height(20)}.onClick(() => {// this.messages为列表数据源，可根据实际场景构造。点击后从数据源删除指定数据项。this.list.splice(index, 1);})}aboutToAppear(){this.list.push(new YuanZhen("袁震1",18))this.list.push(new YuanZhen("袁震2",19))this.list.push(new YuanZhen("袁震3",20))this.list.push(new YuanZhen("袁震4",21))this.list.push(new YuanZhen("袁震5",22))}build() {Column(){List({space:10, scroller: this.listScroller}){ListItemGroup({ header: this.itemHead('A') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen,index)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}.swipeAction({ end: this.itemEnd(index) }) // 设置侧滑属性})}ListItemGroup({ header: this.itemHead('B') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}ListItemGroup({ header: this.itemHead('C') }) {// 循环渲染分组A的ListItemForEach(this.list,(item:YuanZhen)=>{ListItem(){Row() {Image($r('app.media.startIcon')).width(40).height(40).margin(10)Text(item.name).fontSize(20)Text("  年龄："+item.age).fontSize(20)}}})}}.scrollBar(BarState.On).divider({strokeWidth:1,startMargin:60,endMargin:10,color: '#ffe9f0f0'}).sticky(StickyStyle.Header)  // 设置吸顶，实现粘性标题效果.width("100%").listDirection(Axis.Vertical)}.width("100%").height("100%")}
}

5.8 给列表项添加标记

添加标记是一种无干扰性且直观的方法，用于显示通知或将注意力集中到应用内的某个区域。例如，当消息列表接收到新消息时，通常对应的联系人头像的右上方会出现标记，提示有若干条未读消息

在ListItem中使用Badge组件可实现给列表项添加标记功能。Badge是可以附加在单个组件上用于信息标记的容器组件。

在消息列表中，若希望在联系人头像右上角添加标记，可在实现消息列表项ListItem的联系人头像时，将头像Image组件作为Badge的子组件。

在Badge组件中，count和position参数用于设置需要展示的消息数量和提示点显示位置，还可以通过style参数灵活设置标记的样式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/629186.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DC电源模块在新能源领域的应用前景

DC电源模块在新能源领域的应用前景

BOSHIDA DC电源模块在新能源领域的应用前景 DC电源模块在新能源领域有着广阔的应用前景。随着可再生能源技术的发展和普及&#xff0c;如太阳能和风能等的应用逐渐增多&#xff0c;DC电源模块在这些领域的应用越来越重要。 首先&#xff0c;DC电源模块可以用于太阳能发电系统…
阅读更多...
使用micro-app将现有项目改造成微前端，对现有项目实现增量升级

使用micro-app将现有项目改造成微前端，对现有项目实现增量升级

使用micro-app将现有项目改造成微前端&#xff0c;对现有项目实现增量升级 基座应用 1、安装依赖 npm i micro-zoe/micro-app --save2、在入口引入 //main.js import microApp from micro-zoe/micro-appnew Vue({ }) //在new Vue 下面执行 microApp.start()3、新增一个vue页…
阅读更多...
【目标检测】评价指标：mAP概念及其计算方法(yolo源码/pycocotools)

【目标检测】评价指标：mAP概念及其计算方法(yolo源码/pycocotools)

本篇文章首先介绍目标检测任务中的关键评价指标mAP的概念&#xff1b;然后介绍其在yolo源码和pycocotools工具中的实现方法&#xff1b;最后比较两种mAP的计算方法的不同之处。 目标检测中的评价指标&#xff1a; mAP概念及其计算方法(yolo源码/pycocotools) 混淆矩阵概念及其…
阅读更多...
ArcGIS Pro中怎么加载在线地图

ArcGIS Pro中怎么加载在线地图

当我们在制图的时候&#xff0c;有的时候需要加载在线地图&#xff0c;在ArcGIS Pro中加载在线地图的方式有很多&#xff0c;这里为大家介绍一下加载的方法&#xff0c;希望能对你有所帮助。 加载底图 在菜单栏上选择地图&#xff0c;点击底图&#xff0c;可以看到所有可加载…
阅读更多...
FTP文件传输协议 、多种方式安装yum仓库

FTP文件传输协议 、多种方式安装yum仓库

一、网络文件共享服务 1.存储类型分三种&#xff1a; 直连式存储&#xff1a;Direct-Attached Storage&#xff0c;简称DAS 存储区域网络&#xff1a;Storage Area Network&#xff0c;简称SAN&#xff08;可以使用空间&#xff0c;管理也是你来管理&#xff09; 网络附加存储…
阅读更多...
maxwell同步全量历史数据

maxwell同步全量历史数据

CentOS安装maxwell 在上篇的基础上&#xff0c;我们实现了实时同步mysql数据到kafka。maxwell不仅可以同步实时数据&#xff0c;也可以同步全量历史数据。在这里模拟一下历史数据的场景&#xff0c;创建表结构如下&#xff0c;并写入测试数据。 CREATE TABLE user_det…
阅读更多...
手把手教你搭建一个数据可视化看板

手把手教你搭建一个数据可视化看板

前言 俗话说的好&#xff0c;“字不如表&#xff0c;表不如图”、“有图有真相&#xff0c;一图胜千言”。 数据可视化就是用图的形式把基础数据直观&#xff0c;简洁的&#xff0c;高效的展示出来&#xff0c;今天为大家介绍一下如何使用葡萄城公司的嵌入式BI工具——Wyn商业…
阅读更多...
JavaScript的Class基本语法

JavaScript的Class基本语法

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 JavaScript是一种基于原型的语言&#xff0c;但在ES6中引入了class关…
阅读更多...
成功解决VScode进入到内置函数中调试

成功解决VScode进入到内置函数中调试

主要有两个关键步骤&#xff0c; 第一步 将launch.json中的"justMyCode"设为false 可通过使用ctrlshiftP搜索lauch.json找到次文件 如果找不到的话&#xff0c;可点击debug按钮&#xff0c;然后找到点击create a launch.json file创建 创建得到的launch.json如下&am…
阅读更多...
32单片机RTC时间接续，掉电时间保存

32单片机RTC时间接续，掉电时间保存

1、实现思路 前提&#xff1a;首先要实现RTC掉电之后时间还能继续走&#xff0c;RTC电池是必要的 说明&#xff1a;设备第一次启动需要初始化配置RTC&#xff0c;但当二次启动再重新配置RTC会导致RTC计数器置零&#xff0c;所以传统的程序流程是不行的&#xff0c;我们需要知…
阅读更多...
2024“华数杯”（A题）|放射性废水扩散|国际大学生数学建模竞赛建模解析，小鹿学长带队指引全代码文章与思路

2024“华数杯”（A题）|放射性废水扩散|国际大学生数学建模竞赛建模解析，小鹿学长带队指引全代码文章与思路

我是小鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮200人完成了建模与思路的构建的处理了&#xff5e; 完整内容可以在文章末尾领取&#xff01; 这回带大家体验一下2024“华数杯”国际大学生数学建模竞赛呀&#xff01; 此题涉及到放射性废水从日本排放…
阅读更多...
齿轮齿条运动相关计算(博途S7-1200PLC脉冲轴组态)

齿轮齿条运动相关计算(博途S7-1200PLC脉冲轴组态)

有关S7-1200PLC脉冲轴相关应用介绍请参考下面的系列文章： S7-1200PLC脉冲轴位置控制功能块 https://rxxw-control.blog.csdn.net/article/details/135299302https://rxxw-control.blog.csdn.net/article/details/135299302S7-1200脉冲轴功能块 https://rxxw-control.blog.c…
阅读更多...
如何在 Python3 中使用变量

如何在 Python3 中使用变量

介绍 变量是一个重要的编程概念&#xff0c;值得掌握。它们本质上是在程序中用于表示值的符号。 本教程将涵盖一些变量基础知识&#xff0c;以及如何在您创建的 Python 3 程序中最好地使用它们。 理解变量 从技术角度来说&#xff0c;变量是将存储位置分配给与符号名称或标…
阅读更多...
【JVM调优系列】如何导出堆内存文件

【JVM调优系列】如何导出堆内存文件

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子明细实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子明细实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…
阅读更多...
图像处理------亮度

图像处理------亮度

from PIL import Imagedef change_brightness(img: Image, level: float) -> Image:"""按照给定的亮度等级&#xff0c;改变图片的亮度"""def brightness(c: int) -> float:return 128 level (c - 128)if not -255.0 < level < 25…
阅读更多...
leetcode234. 回文链表

leetcode234. 回文链表

题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;hea…
阅读更多...
《手把手教你》系列技巧篇（十）-java+ selenium自动化测试-元素定位大法之By class name（详细教程）

《手把手教你》系列技巧篇（十）-java+ selenium自动化测试-元素定位大法之By class name（详细教程）

1.简介 按宏哥计划&#xff0c;本文继续介绍WebDriver关于元素定位大法&#xff0c;这篇介绍By ClassName。看到ID&#xff0c;NAME这些方法的讲解&#xff0c;小伙伴们和童鞋们应该知道&#xff0c;要做好Web自动化测试&#xff0c;最好是需要了解一些前端的基本知识。有了前端…
阅读更多...
养成密码管理习惯，保障个人数字安全

养成密码管理习惯，保障个人数字安全

在当今数字时代&#xff0c;保障个人信息的安全已经变得至关重要。创建和维护安全、复杂的密码是防范潜在攻击者的首要步骤。密码不仅仅是数字世界的通行证&#xff0c;更是个人隐私的最后一道防线。在本文中&#xff0c;我们将深入探讨密码安全管理的重要性。 在当今数字时代…
阅读更多...
超实用+全覆盖！17个大分类，近500款主流实用精品AI工具导航，太贴心了！总有一款适合你。

超实用+全覆盖！17个大分类，近500款主流实用精品AI工具导航，太贴心了！总有一款适合你。

超实用全覆盖&#xff01;17个大分类&#xff0c;近500款主流实用精品AI工具导航&#xff0c;太贴心了&#xff01;总有一款适合你。 大家好&#xff01;我是老码农。 今天给大家分享的这个工具导航&#xff1a;非常棒。 那棒在哪里呢&#xff1f; 第1点&#xff1a;非常垂…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023