【HarmonyOS之旅】基于ArkTS开发(二) -＞ UI开发三

目录

1 -> 绘制图形

1.1 -> 绘制基本几何图形

1.2 -> 绘制自定义几何图形

2 -> 添加动画效果

2.1 -> animateTo实现闪屏动画

2.2 -> 页面转场动画

3 -> 常见组件说明

1 -> 绘制图形

绘制能力主要是通过框架提供的绘制组件来支撑，支持svg标准绘制命令。

1.1 -> 绘制基本几何图形

绘制组件封装了一些常见的基本几何图形，比如矩形Rect、圆形Circle、椭圆形Ellipse等，为开发者省去了路线计算的过程。

FoodDetail页面的食物成分表里，给每一项成分名称前都加上一个圆形的图标作为成分标签。

1. 创建Circle组件，在每一项含量成分前增加一个圆形图标作为标签。设置Circle的直径为 6vp。修改FoodDetail页面的ContentTable组件里的IngredientItem方法，在成分名称前添加Circle。

// FoodDetail.ets
@Component
struct ContentTable {private foodItem: FoodData@Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {Flex() {Text(title).fontSize(17.4).fontWeight(FontWeight.Bold).layoutWeight(1)Flex({ alignItems: ItemAlign.Center }) {Circle({width: 6, height: 6}).margin({right: 12}).fill(colorValue)Text(name).fontSize(17.4).flexGrow(1)Text(value).fontSize(17.4)}.layoutWeight(2)}}build() {......}
}

2. 每个成分的标签颜色不一样，所以我们在build方法中，调用IngredientItem，给每个Circle填充不一样的颜色。

// FoodDetail.ets
@Component
struct ContentTable {private foodItem: FoodData@Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {Flex() {Text(title).fontSize(17.4).fontWeight(FontWeight.Bold).layoutWeight(1)Flex({ alignItems: ItemAlign.Center }) {Circle({width: 6, height: 6}).margin({right: 12}).fill(colorValue)Text(name).fontSize(17.4).flexGrow(1)Text(value).fontSize(17.4)}.layoutWeight(2)}}build() {Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {this.IngredientItem('Calories', '#FFf54040', 'Calories', this.foodItem.calories + 'kcal')this.IngredientItem('Nutrition', '#FFcccccc', 'Protein', this.foodItem.protein + 'g')this.IngredientItem(' ', '#FFf5d640', 'Fat', this.foodItem.fat + 'g')this.IngredientItem(' ', '#FF9e9eff', 'Carbohydrates', this.foodItem.carbohydrates + 'g')this.IngredientItem(' ', '#FF53f540', 'VitaminC', this.foodItem.vitaminC + 'mg')}.height(280).padding({ top: 30, right: 30, left: 30 })}
}

1.2 -> 绘制自定义几何图形

除绘制基础几何图形，开发者还可以使用Path组件来绘制自定义的路线，下面进行绘制应用的Logo图案。

1. 在pages文件夹下创建新的页面Logo.ets。

2. Logo.ets中删掉模板代码，创建Logo Component。

@Entry
@Component
struct Logo {build() {}
}

3. 创建Flex组件为根节点，宽高设置为100%，设置其在主轴方向和交叉轴方向的对齐方式都为Center，创建Shape组件为Flex子组件。

Shape组件是所有绘制组件的父组件。如果需要组合多个绘制组件成为一个整体，需要创建Shape作为其父组件。

我们要绘制的Logo的大小630px * 630px。声明式UI范式支持多种长度单位的设置，在前面的章节中，我们直接使用number作为参数，即采用了默认长度单位vp，虚拟像素单位。vp和设备分辨率以及屏幕密度有关。比如设备分辨率为1176 * 2400，屏幕基准密度(resolution)为3，vp = px / resolution，则该设备屏幕宽度是392vp。

但是绘制组件采用svg标准，默认采取px为单位的，为方便统一，在这绘制Logo这一部分，统一采取px为单位。声明式UI框架同样也支持px单位，入参类型为string，设置宽度为630px，即210vp，设置方式为width('630px')或者width(210)。

@Entry
@Component
struct Logo {build() {Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Shape() {}.height('630px').width('630px')}.width('100%').height('100%')}
}

4. 给页面填充渐变色。设置为线性渐变，偏移角度为180deg，三段渐变 #BDE895 -->95DE7F --> #7AB967，其区间分别为[0, 0.1], (0.1, 0.6], (0.6, 1]。

.linearGradient({angle: 180,colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
})

@Entry
@Component
struct Logo {build() {Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Shape() {}.height('630px').width('630px')}.width('100%').height('100%').linearGradient({angle: 180,colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]})}
}

5. 绘制第一条路线Path，设置其绘制命令。

Path().commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')

Path的绘制命令采用svg标准，上述命令可分解为：

M162 128.7

将笔触移动到(Moveto)坐标点(162, 128.7)。

a222 222 0 0 1 100.8 374.4

画圆弧线(elliptical arc)半径rx，ry为222，x轴旋转角度x-axis-rotation为0，角度大小large-arc-flag为0，即小弧度角，弧线方向(sweep-flag)为1，即逆时针画弧线，小写a为相对位置，即终点坐标为(162 + 100.8 = 262.8, 128.7 + 374.4 = 503.1)。

H198

画水平线(horizontal lineto)到198，即画(262.8, 503.1)到(198, 503.1)的水平线。

a36 36 0 0 3 -36 -36

画圆弧线(elliptical arc)，含义同上，结束点为(198 - 36 = 162, 503.1 - 36 = 467.1)。

V128.7

画垂直线(vertical lineto)到128.7，即画(162, 467.1)到(162, 128.7)的垂直线。

z

关闭路径(closepath)。

填充颜色为白色。

.fill(Color.White)
@Entry
@Component
struct Logo {build() {Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Shape() {Path().commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36').fill(Color.White)}.height('630px').width('630px')}.width('100%').height('100%').linearGradient({angle: 180,colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]})}
}

6. 在Shape组件内绘制第二个Path。第二条Path的背景色为渐变色，但是渐变色的填充是其整体的box，所以需要clip将其裁剪，入参为Shape，即按照Shape的形状进行裁剪。

Path().commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z').fill('none').linearGradient({angle: 30,colors: [["#C4FFA0", 0],  ["#ffffff", 1]]}).clip(new Path().commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'))

Path的绘制命令比较长，可以将其作为组件的成员变量，通过this调用。

@Entry
@Component
struct Logo {private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'build() {......Path().commands(this.pathCommands1).fill('none').linearGradient({angle: 30,colors: [["#C4FFA0", 0],  ["#ffffff", 1]]}).clip(new Path().commands(this.pathCommands1))......}
}

7. 在Shape组件内绘制第二个Path。

@Entry
@Component
struct Logo {private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'build() {Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Shape() {Path().commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36').fill(Color.White)Path().commands(this.pathCommands1).fill('none').linearGradient({angle: 30,colors: [["#C4FFA0", 0],  ["#ffffff", 1]]}).clip(new Path().commands(this.pathCommands1))Path().commands(this.pathCommands2).fill('none').linearGradient({angle: 50,colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4],  ["#ffffff", 0.7]]}).clip(new Path().commands(this.pathCommands2))}.height('630px').width('630px')}.width('100%').height('100%').linearGradient({angle: 180,colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]})}
}

完成应用Logo的绘制。Shape组合了三个Path组件，通过svg命令绘制出一个艺术的叶子，寓意绿色健康饮食方式。

8. 添加应用的标题和slogan。

@Entry
@Component
struct Logo {private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Shape() {Path().commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36').fill(Color.White)Path().commands(this.pathCommands1).fill('none').linearGradient({angle: 30,colors: [["#C4FFA0", 0],  ["#ffffff", 1]]}).clip(new Path().commands(this.pathCommands1))Path().commands(this.pathCommands2).fill('none').linearGradient({angle: 50,colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4],  ["#ffffff", 0.7]]}).clip(new Path().commands(this.pathCommands2))}.height('630px').width('630px')Text('Healthy Diet').fontSize(26).fontColor(Color.White).margin({ top:300 })Text('Healthy life comes from a balanced diet').fontSize(17).fontColor(Color.White).margin({ top:4 })}.width('100%').height('100%').linearGradient({angle: 180,colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]})}
}

2 -> 添加动画效果

2.1 -> animateTo实现闪屏动画

声明式UI范式组件动画包括属性动画和animateTo显式动画：

  1. 属性动画：设置组件通用属性变化的动画效果。
  2. 显式动画：可以设置组件从状态A到状态B的变化动画效果，包括样式、位置信息和节点的增加删除等，开发者无需关注变化过程，只需指定起点和终点的状态。animateTo还提供播放状态的回调接口，是对属性动画的增强与封装。

闪屏页面的动画效果是Logo图标的渐出和放大效果的动画，动画结束后跳转到食物分类列表页面。接下来，我们就使用animateTo来实现启动页动画的闪屏效果。

1. 动画效果自动播放。闪屏动画的预期效果是，进入Logo页面后，animateTo动画效果自动开始播放，可以借助于组件显隐事件的回调接口来实现。调用Shape的onAppear方法，设置其显式动画。

Shape() {...
}
.onAppear(() => {animateTo()
})

2. 创建opacity和scale数值的成员变量，用装饰器@State修饰。表示其为有状态的数据，即改变会触发页面的刷新。

@Entry
@Component
struct Logo {@State private opacityValue: number = 0@State private scaleValue: number = 0build() {Shape() {...}.scale({ x: this.scaleValue, y: this.scaleValue }).opacity(this.opacityValue).onAppear(() => {animateTo()})}
}

3. 设置animateTo的动画曲线curve。Logo的加速曲线为先慢后快，使用贝塞尔曲线cubicBezier，cubicBezier(0.4, 0, 1, 1)。

需要使用动画能力接口中的插值计算，首先要导入curves模块。

import Curves from '@ohos.curves'

@ohos.curves模块提供了线性Curve. Linear、阶梯step、三阶贝塞尔(cubicBezier)和弹簧(spring)插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。

@Entry
@Component
struct Logo {@State private opacityValue: number = 0@State private scaleValue: number = 0private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)build() {Shape() {...}.scale({ x: this.scaleValue, y: this.scaleValue }).opacity(this.opacityValue).onAppear(() => {animateTo({curve: this.curve1})})}
}

4. 设置动画时长为1s，延时0.1s开始播放，设置显示动效event的闭包函数，即起点状态到终点状态为透明度opacityValue和大小scaleValue从0到1，实现Logo的渐出和放大效果。

@Entry
@Component
struct Logo {@State private opacityValue: number = 0@State private scaleValue: number = 0private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)build() {Shape() {...}.scale({ x: this.scaleValue, y: this.scaleValue }).opacity(this.opacityValue).onAppear(() => {animateTo({duration: 1000, curve: this.curve1, delay: 100, }, () => {this.opacityValue = 1this.scaleValue = 1})})}
}

5. 闪屏动画播放结束后定格1s，进入FoodCategoryList页面。设置animateTo的onFinish回调接口，调用定时器Timer的setTimeout接口延时1s后，调用router.replace，显示FoodCategoryList页面。

import router from '@ohos.router'@Entry
@Component
struct Logo {@State private opacityValue: number = 0@State private scaleValue: number = 0private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)build() {Shape() {...}.scale({ x: this.scaleValue, y: this.scaleValue }).opacity(this.opacityValue).onAppear(() => {animateTo({duration: 1000,curve: this.curve1, delay: 100, onFinish: () => {setTimeout(() => {router.replace({ url: "pages/FoodCategoryList" })}, 1000);}}, () => {this.opacityValue = 1this.scaleValue = 1})})}
}

整体代码如下。

import Curves from '@ohos.curves'
import router from '@ohos.router'@Entry
@Component
struct Logo {@State private opacityValue: number = 0@State private scaleValue: number = 0private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)private pathCommands1: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'private pathCommands2: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Shape() {Path().commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36').fill(Color.White)Path().commands(this.pathCommands1).fill('none').linearGradient({angle: 30,colors: [["#C4FFA0", 0], ["#ffffff", 1]]}).clip(new Path().commands(this.pathCommands1))Path().commands(this.pathCommands2).fill('none').linearGradient({angle: 50,colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]]}).clip(new Path().commands(this.pathCommands2))}.height('630px').width('630px').scale({ x: this.scaleValue, y: this.scaleValue }).opacity(this.opacityValue).onAppear(() => {animateTo({duration: 1000,curve: this.curve1,delay: 100,onFinish: () => {setTimeout(() => {router.replace({ url: "pages/FoodCategoryList" })}, 1000);}}, () => {this.opacityValue = 1this.scaleValue = 1})})Text('Healthy Diet').fontSize(26).fontColor(Color.White).margin({ top: 300 })Text('Healthy life comes from a balanced diet').fontSize(17).fontColor(Color.White).margin({ top: 4 })}.width('100%').height('100%').linearGradient({angle: 180,colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]})}
}

2.2 -> 页面转场动画

食物分类列表页和食物详情页之间的共享元素转场，即点击FoodListItem/FoodGridItem后，食物缩略图会放大，随着页面跳转，到食物详情页的大图。

1. 设置FoodListItem和FoodGridItem的Image组件的共享元素转场方法(sharedTransition)。转场id为foodItem.id，转场动画时长为1s，延时0.1s播放，变化曲线为贝塞尔曲线Curves.cubicBezier(0.2, 0.2, 0.1, 1.0) ，需引入curves模块。

共享转场时会携带当前元素的被设置的属性，所以创建Row组件，使其作为Image的父组件，设置背景颜色在Row上。

在FoodListItem的Image组件上设置autoResize为false，因为image组件默认会根据最终展示的区域，去调整图源的大小，以优化图片渲染性能。在转场动画中，图片在放大的过程中会被重新加载，所以为了转场动画的流畅，autoResize设置为false。

// FoodList.ets
import Curves from '@ohos.curves'@Component
struct FoodListItem {private foodItem: FoodDatabuild() {Navigator({ target: 'pages/FoodDetail' }) {Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {Row() {Image(this.foodItem.image).objectFit(ImageFit.Contain).autoResize(false).height(40).width(40).sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100 })}.margin({ right: 16 })Text(this.foodItem.name).fontSize(14).flexGrow(1)Text(this.foodItem.calories + ' kcal').fontSize(14)}.height(64)}.params({ foodData: this.foodItem }).margin({ right: 24, left:32 })}
}@Component
struct FoodGridItem {private foodItem: FoodDatabuild() {Column() {Row() {Image(this.foodItem.image).objectFit(ImageFit.Contain).autoResize(false).height(152).width('100%').sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100 })}Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {Text(this.foodItem.name).fontSize(14).flexGrow(1).padding({ left: 8 })Text(this.foodItem.calories + 'kcal').fontSize(14).margin({ right: 6 })}.height(32).width('100%').backgroundColor('#FFe5e5e5')}.height(184).width('100%').onClick(() => {router.push({ url: 'pages/FoodDetail', params: { foodId: this.foodItem } })})}
}

2. 设置FoodDetail页面的FoodImageDisplay的Image组件的共享元素转场方法(sharedTransition)。设置方法同上。

import Curves from '@ohos.curves'@Component
struct FoodImageDisplay {private foodItem: FoodDatabuild() {Stack({ alignContent: Alignment.BottomStart }) {Image(this.foodItem.image).objectFit(ImageFit.Contain).sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100 })Text(this.foodItem.name).fontSize(26).fontWeight(500).margin({ left: 26, bottom: 17.4 })}.height(357)  }
}

3 -> 常见组件说明

组件是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

声明式开发范式目前可供选择的组件如下表所示。

组件类型
基础组件Blank、Button、Checkbox、CheckboxGroup、DataPanel、DatePicker、Divider、Gauge、Image、ImageAnimator、LoadingProgress、Marquee、Navigation、Progress、QRCode、Radio、Rating、RichText、ScrollBar、Search、Select、Slider、Span、Stepper、StepperItem、Text、TextArea、TextClock、TextInput、TextPicker、TextTimer、TimePicker、Toggle、Web、XComponent
容器组件AlphabetIndexer、Badge、Column、ColumnSplit、Counter、Flex、GridContainer、Grid、GridItem、List、ListItem、Navigator、Panel、Refresh、Row、RowSplit、Scroll、SideBarContainer、Stack、Swiper、Tabs、TabContent
媒体组件Video
绘制组件Circle、Ellipse、Line、Polyline、Polygon、Path、Rect、Shape
画布组件Canvas

感谢各位大佬支持！！！

互三啦！！！

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

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

相关文章

【算法】经典博弈论问题——威佐夫博弈 python

【算法】经典博弈论问题——威佐夫博弈 python

目录 威佐夫博弈(Wythoff Game)【模板】 威佐夫博弈(Wythoff Game) 有两堆石子，数量任意，可以不同，游戏开始由两个人轮流取石子 游戏规定，每次有两种不同的取法 1)在任意的一堆中取走任意多的石子 2)可以在两堆中同时取走相同数量…
阅读更多...
通过Redisson构建延时队列并实现注解式消费

通过Redisson构建延时队列并实现注解式消费

目录 一、序言二、延迟队列实现1、Redisson延时消息监听注解和消息体2、Redisson延时消息发布器3、Redisson延时消息监听处理器 三、测试用例四、结语 一、序言 两个月前接了一个4万的私活，做一个线上商城小程序，在交易过程中不可避免的一个问题就是用户…
阅读更多...
第一个Qt开发实例(一个Push Button按钮和两个Label)【包括如何在QtCreator中创建新工程、代码详解、编译、环境变量配置、测试程序运行等】

第一个Qt开发实例(一个Push Button按钮和两个Label)【包括如何在QtCreator中创建新工程、代码详解、编译、环境变量配置、测试程序运行等】

目录 Qt开发环境QtCreator的安装、配置在QtCreator中创建新工程在Forms→mainwindow.ui中拖曳出我们要的图形按钮查看拖曳出按钮后的代码为pushButton这个图形添加回调函数编译工程关闭开发板上QT的GUI(选做)禁止LCD黑屏(选做)设置Qt运行的环境变量运行Qt程序如何让程序在系统启…
阅读更多...
Spring Security(maven项目) 3.0.3.0版本

Spring Security(maven项目) 3.0.3.0版本

前言： 通过实践而发现真理，又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识，又从理性认识而能动地指导革命实践，改造主观世界和客观世界。实践、认识、再实践、再认识，这种形式，循环往…
阅读更多...
携程Java开发面试题及参考答案 （200道-上）

携程Java开发面试题及参考答案 （200道-上）

说说四层模型、七层模型。 七层模型（OSI 参考模型） 七层模型，即 OSI（Open System Interconnection）参考模型，是一种概念模型，用于描述网络通信的架构。它将计算机网络从下到上分为七层，各层的功能和作用如下： 物理层：物理层是计算机网络的最底层，主要负责传输比特流…
阅读更多...
【Rust自学】16.4. 通过Send和Sync trait来扩展并发

【Rust自学】16.4. 通过Send和Sync trait来扩展并发

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 16.4.1. Send和Sync trait Rust语言本身的并发特性较少，目前所提及的并发特性都来自于标准库，而不是语言本身。其…
阅读更多...
MYSQL面试题总结（题目来源JavaGuide）

MYSQL面试题总结（题目来源JavaGuide）

MYSQL基础架构 问题1：一条 SQL语句在MySQL中的执行过程 1. 解析阶段 (Parsing) 查询分析：当用户提交一个 SQL 语句时，MySQL 首先会对语句进行解析。这个过程会检查语法是否正确，确保 SQL 语句符合 MySQL 的语法规则。如果发现…
阅读更多...
传输层协议——TCP协议

传输层协议——TCP协议

文章目录 🍍TCP协议谈谈可靠性TCP协议格式序号与确认序号窗口大小六个标志位 确认应答机制（ACK）超时重传机制连接管理机制三次握手四次挥手 流量控制滑动窗口拥塞控制延迟应答捎带应答面向字节流粘包问题TCP异常情况TCP小结基于TCP的应用层协…
阅读更多...
pycharm（2）

pycharm（2）

conda 我下载安装conda的时候产生了各种问题，最终我发现，打开杀毒软件会有阻碍 cuda的版本问题很大，我尝试多个版本之后，发现anaconda3-2024.06.1-windows-x86_64安装了之后不会报错，另外pycharm的版本也一直有问题&a…
阅读更多...
python算法和数据结构刷题[3]：哈希表、滑动窗口、双指针、回溯算法、贪心算法

python算法和数据结构刷题[3]：哈希表、滑动窗口、双指针、回溯算法、贪心算法

回溯算法 「所有可能的结果」，而不是「结果的个数」，一般情况下，我们就知道需要暴力搜索所有的可行解了，可以用「回溯法」。 回溯算法关键在于:不合适就退回上一步。在回溯算法中，递归用于深入到所有可能的分支&…
阅读更多...
【PyQt】pyqt小案例实现简易文本编辑器

【PyQt】pyqt小案例实现简易文本编辑器

pyqt小案例实现简易文本编辑器 分析 实现了一个简单的文本编辑器，使用PyQt5框架构建。以下是代码的主要功能和特点： 主窗口类 (MyWindow): 继承自 QWidget 类。使用 .ui 文件加载用户界面布局。设置窗口标题、状态栏消息等。创建菜单栏及其子菜单项&…
阅读更多...
鼠标拖尾特效

鼠标拖尾特效

文章目录 鼠标拖尾特效一、引言二、实现原理1、监听鼠标移动事件2、生成拖尾元素3、控制元素生命周期 三、代码实现四、使用示例五、总结 鼠标拖尾特效 一、引言 鼠标拖尾特效是一种非常酷炫的前端交互效果，能够为网页增添独特的视觉体验。它通常通过JavaScript和C…
阅读更多...
Node.js与嵌入式开发：打破界限的创新结合

Node.js与嵌入式开发：打破界限的创新结合

文章目录 一、Node.js的本质与核心优势1.1 什么是Node.js？1.2 嵌入式开发的范式转变 二、Node.js与嵌入式结合的四大技术路径2.1 硬件交互层2.2 物联网协议栈2.3 边缘计算架构2.4 轻量化运行时方案 三、实战案例：智能农业监测系统3.1 硬件配置3.2 软件架…
阅读更多...
利用Vue和javascript分别编写一个“Hello World”的定时更新

利用Vue和javascript分别编写一个“Hello World”的定时更新

目录 一、利用Vue编写一个“Hello World”的定时更新（1）vue编码在Html文件中（2）vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 （1&#xff…
阅读更多...
排序算法--插入排序

排序算法--插入排序

插入排序是一种简单且稳定的排序算法&#xff0c;适合小规模数据或部分有序数据。 // 插入排序函数 void insertionSort(int arr[], int n) {for (int i 1; i < n; i) { // 从第二个元素开始int key arr[i]; // 当前需要插入的元素int j i - 1;// 将比 key 大的元素向后移…
阅读更多...
跟李沐学AI：视频生成类论文精读（Movie Gen、HunyuanVideo）

跟李沐学AI：视频生成类论文精读（Movie Gen、HunyuanVideo）

Movie Gen&#xff1a;A Cast of Media Foundation Models 简介 Movie Gen是Meta公司提出的一系列内容生成模型&#xff0c;包含了 3.2.1 预训练数据 Movie Gen采用大约 100M 的视频-文本对和 1B 的图片-文本对进行预训练。 图片-文本对的预训练流程与Meta提出的 Emu: Enh…
阅读更多...
CH340G上传程序到ESP8266-01(S)模块

CH340G上传程序到ESP8266-01(S)模块

文章目录 概要ESP8266模块外形尺寸模块原理图模块引脚功能 CH340G模块外形及其引脚模块引脚功能USB TO TTL引脚 程序上传接线Arduino IDE 安装ESP8266开发板Arduino IDE 开发板上传失败上传成功 正常工作 概要 使用USB TO TTL&#xff08;CH340G&#xff09;将Arduino将程序上传…
阅读更多...
游戏引擎 Unity - Unity 下载与安装

游戏引擎 Unity - Unity 下载与安装

Unity Unity 首次发布于 2005 年&#xff0c;属于 Unity Technologies Unity 使用的开发技术有&#xff1a;C# Unity 的适用平台&#xff1a;PC、主机、移动设备、VR / AR、Web 等 Unity 的适用领域&#xff1a;开发中等画质中小型项目 Unity 适合初学者或需要快速上手的开…
阅读更多...
AIGC（生成式AI）试用 20 -- deepseek 初识

AIGC（生成式AI）试用 20 -- deepseek 初识

>> 基本概念 Ollama -- 运行大模型&#xff0c;管理运行AI大模型的工具&#xff0c;用来安装布置DeepSeek https://ollama.com/ , Get up and running with large language models. AnythingLLM -- 大模型增强应用&#xff0c;GUI大模型交互程序 Download AnythingLLM …
阅读更多...
STM32 DMA+AD多通道

STM32 DMA+AD多通道

接线图 代码配置 ADC单次扫描DMA单次转运模式 uint16_t AD_Value[4]; //DMAAD多通道 void DMA_Config(void) {//定义结构体变量 GPIO_InitTypeDef GPIO_InitStructure;//定义GPIO结构体变量 ADC_InitTypeDef ADC_InitStructure; //定义ADC结构体变量 DMA_InitTypeDef DMA_In…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023