HarmonyOs 应用基础--ArkTS-核心-基础

news2024/11/16 21:54:47

目录

八. ArkTS-语句-类型进阶与渲染控制

1. 对象进阶

1.1. 定义对象数组

1.2. 使用对象数组

2. 渲染控制 - ForEach

2.1. ForEach语法

 2.2. ForEach使用优化代码

 2.3. 案例-学生档案

实现思路

3. Math对象

 4. 综合案例 -- 抽奖卡案例

4.1. 初始页面布局（静态）

4.2. 根据数据渲染初始页面

4.2.1. 准备响应数据

4.2.2. 渲染初始页面

4.3. 遮罩层静态布局

4.4. 遮罩层动态交互

4.4.1. 按钮交互

4.4.2. 图片数据

4.5. 中奖结果

 4.5.1. 抽奖静态页面

4.5.2. 条件渲染-抽卡与抽奖页面

4.5.3. 抽奖数据处理

4.6. 再次抽奖

八. ArkTS-语句-类型进阶与渲染控制

今日核心

  1. 对象
  2. 渲染控制ForEach

1. 对象进阶

1.1. 定义对象数组

// 1. 定义接口
interface Person {
  stuId: number
  name: string
  gender: string
  age: number
}

// 2. 根据接口定义对象数组
let students: Person[] = [
  {stuId: 1, name: '小红', gender: '女', age: 18},
  {stuId: 2, name: '小明', gender: '男', age: 19},
  {stuId: 3, name: '大强', gender: '男', age: 18}
]

1.2. 使用对象数组

  • 访问某一个对象:
    • 每一对象在数组中都是有对应的下标的, 可以通过 数组名[下标] 访问
  • 访问某一对象的某一个属性
    • 先找到要访问的对象, 在该对象的属性访问属性 数组名[下标].属性名 访问
  • 依次访问每一个对象
    • for ... of 进行访问即可
// 3. 访问属性 数组名[下标].属性名
console.log('小红的年龄是', students[0].age)

// 4. 遍历对象数组
for (const item of students) {
  console.log('学生姓名是', item.name)
}

2. 渲染控制 - ForEach

当我们页面中的区域中有多个样式相同的小区域,只有内容数据不一样的时候, 为了提升代码的复用率,不需要一个一个的编写UI组件,我们可以将所有的数据整合成一个数组, 并采取ForEach进行循环渲染.如下图区域,如果我们分别实现每个栏目,代码太过于冗余,这时就可以使用ForEach进行渲染了

2.1. ForEach语法

ForEach基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。

  • 语法: ForEach(arr, (item, index) => {})

参数

参数类型

是否必须

参数说明

arr

Array

是

数据源, 根据该数组生成对应的UI组件渲染到页面中:

  • 可以为空数组

UI组件生成函数

(item: any, index?: number) => void

是

UI组件生成函数

  • 为数组中的每个元素创建对应的组件
  • item: 代表每一个数组元素, 类型与数组元素保持一致,不可以省略
  • index: 代表每一个数组元素的下标,可以省略

 2.2. ForEach使用优化代码


@Entry
  @Component
  struct Index {
    build() {
      Column(){
        Text('电子产品')
          .fontSize('24')
          .fontWeight(700)
          .fontColor(Color.Orange)
          .width('100%')
          .padding(15)
        Text('精品服饰')
          .fontSize('24')
          .fontWeight(700)
          .fontColor(Color.Orange)
          .width('100%')
          .padding(15)
        Text('母婴产品')
          .fontSize('24')
          .fontWeight(700)
          .fontColor(Color.Orange)
          .width('100%')
          .padding(15)
        Text('影音娱乐')
          .fontSize('24')
          .fontWeight(700)
          .fontColor(Color.Orange)
          .width('100%')
          .padding(15)
        Text('海外旅游')
          .fontSize('24')
          .fontWeight(700)
          .fontColor(Color.Orange)
          .width('100%')
          .padding(15)
      }
      .width('100%')
        .height('100%')
    }
  }

 完成代码

@Entry
  @Component
  struct Index {
    @State
    titles:string[] = ['电子产品', '精品服饰', '母婴产品', '影音娱乐', '海外旅游']

    build() {
      Column() {
        ForEach(this.titles, (item: string, index: number) => {
          Text(item)
            .fontSize('24')
            .fontWeight(700)
            .fontColor(Color.Orange)
            .width('100%')
            .padding(15)
        })
      }
    }
  }

 2.3. 案例-学生档案

模版代码 

@Entry
@Component
struct Index {

  build() {
    Column() {
      Row() {
        Text(`姓名：张三，年龄：18`)
          .fontSize(18)
          .fontColor('#fff')
        Button('年龄+1')
          .backgroundColor('#e64133')
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Orange)
      .borderRadius(5)
      .padding({left: 10, right: 10})
      .margin({bottom: 10})
      .justifyContent(FlexAlign.SpaceBetween)
    }
      .padding(20)
  }
}
实现思路
  • 准备数据
    • 定义数组元素接口
    • 根据接口创建对象数组保存数据
  • ForEach循环渲染
    • 使用数组元素的属性(item.属性名)动态填充UI组件对应的位置
interface Person {
  stuId: number
  name: string
  gender: string
  age: number
}

@Entry
@Component
struct Index {
  @State
  students: Person[] = [
    {stuId: 1, name: '小红', gender: '女', age: 18},
    {stuId: 2, name: '小明', gender: '男', age: 19},
    {stuId: 3, name: '大强', gender: '男', age: 18}
  ]

  build() {
    Column() {
        ForEach(this.students, (item: Person, index: number) => {
            Row() {
              Text(`姓名：${item.name}，年龄：${item.age}`)
                .fontSize(18)
                .fontColor('#fff')
              Button('年龄+1')
                .backgroundColor('#e64133')
                .onClick(() => {
                  // item.age += 1
                  this.students[index] = {
                    stuId: item.stuId,
                    name: item.name,
                    gender: item.gender,
                    age: item.age += 1
                  }
                })
            }
            .width('100%')
            .height(60)
            .backgroundColor(Color.Orange)
            .borderRadius(5)
            .padding({left: 10, right: 10})
            .margin({bottom: 10})
            .justifyContent(FlexAlign.SpaceBetween)
        })
    }
    .padding(20)
  }
}

3. Math对象

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法, Math 用于 Number 类型数据的处理.

Math.random()

否
  • 随机数
  • 取值范围 [0, 1)之间的随机小数,左闭右开, 可以取到0,但是取不到1

Math.ceil()

是
  • 需要一个数字形参数
  • 总是向上取整

Math.floor()

是
  • 需要一个数字形参数
  • 总是向下取整
  • 代码测试
// 1. 随机数
console.log('Math对象', Math.random())  // 0-1 之间的随机小数

// 2. 向上取整
console.log('Math对象', Math.ceil(1.1))  // 2
console.log('Math对象', Math.ceil(1.9))  // 2

// 3. 向下取整
console.log('Math对象', Math.floor(1.1))  // 1
console.log('Math对象', Math.floor(1.9))  // 1
  • 求0--10之间的随机整数
// 0-10 之间的随机数
console.log('Math对象', Math.random() * 11)

// 0-10 之间的随机 整数
console.log('Math对象', Math.floor(Math.random() * 11))

 4. 综合案例 -- 抽奖卡案例

实现如下图所示的效果 

4.1. 初始页面布局（静态）

备注：无数据

@Entry
@Component
struct Index {

  build() {
    Column() {
      // 一. 初始界面
      Column() {
        // 图片区域
        Flex({wrap: FlexWrap.Wrap}) {
          Badge({
            count: 1,
            style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}
          }) {
            Image($r('app.media.bg_00'))
              .width(80)
          }
          .margin(15)
          Badge({
            count: 1,
            style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}
          }) {
            Image($r('app.media.bg_00'))
              .width(80)
          }
          .margin(15)
          Badge({
            count: 1,
            style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}
          }) {
            Image($r('app.media.bg_00'))
              .width(80)
          }
          .margin(15)
          Badge({
            count: 1,
            style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}
          }) {
            Image($r('app.media.bg_00'))
              .width(80)
          }
          .margin(15)
          Badge({
            count: 1,
            style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}
          }) {
            Image($r('app.media.bg_00'))
              .width(80)
          }
          .margin(15)
          Badge({
            count: 0,
            style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}
          }) {
            Image($r('app.media.bg_00'))
              .width(80)
          }
          .margin(15)
        }
        .margin({top: 100, bottom: 50})
        .padding({left: 15})
        // 抽卡按钮
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ED5B8C')
          .stateStyles({
            pressed: {
              .backgroundColor('#EA446C')
            }
          })
          .animation({
            duration: 1000
          })
      }
    }
  }
}

4.2. 根据数据渲染初始页面

4.2.1. 准备响应数据

思路: 观察效果可以发现列表区域的每一项, 至少需要两个数据:

  1. 图片的地址
  2. 抽中的数量
// 初始界面卡片接口
interface Card {
  url: string
  num: number
}

// 初始界面卡片状态
  @State
  images: Card[] = [
    {url: 'app.media.bg_00', num: 0},
    {url: 'app.media.bg_01', num: 0},
    {url: 'app.media.bg_02', num: 0},
    {url: 'app.media.bg_03', num: 0},
    {url: 'app.media.bg_04', num: 0},
    {url: 'app.media.bg_05', num: 0}
  ]
4.2.2. 渲染初始页面

ForEach() 渲染 Badge组件

// 初始界面卡片接口
interface Card {
  url: string
  num: number
}

@Entry
@Component
struct Index {
  // 初始界面卡片状态
  @State
  images: Card[] = [
    {url: 'app.media.bg_00', num: 0},
    {url: 'app.media.bg_01', num: 0},
    {url: 'app.media.bg_02', num: 0},
    {url: 'app.media.bg_03', num: 0},
    {url: 'app.media.bg_04', num: 0},
    {url: 'app.media.bg_05', num: 0}
  ]

  build() {
    Column() {
      // 一. 初始界面
      Column() {
        // 图片区域
        Flex({wrap: FlexWrap.Wrap}) {
          ForEach(this.images, (item: Card, index: number) => {
            Badge({
              count: item.num,
              style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}
            }) {
              Image($r(`${item.url}`))
                .width(80)
            }
            .margin(15)
          })
        }
        .margin({top: 100, bottom: 50})
        .padding({left: 15})
        // 抽卡按钮
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ED5B8C')
          .stateStyles({
            pressed: {
              .backgroundColor('#EA446C')
            }
          })
          .animation({
            duration: 1000
          })
      }
    }
  }
}

4.3. 遮罩层静态布局

单击“立即抽卡”按钮后显示的遮罩层

  • 标签解构: Column > Text + Image + Button

样式枚举:

  1. 遮罩层整体样式:

宽度 -> 100% 高度 -> 100% 背景色 -> 'rgba(0,0,0,0.8)' 定位 内容主轴对齐方式 -> 居中

  1. 文字: 颜色 -> '#F5EBCF' 大小 -> 25 粗细 -> 600
  2. 图片: 外边距 -> 30 宽度 -> 200
  3. 按钮样式:

宽度 -> 200 高度 -> 50 背景色 -> 透明 边框 -> 粗细 2 颜色 '#FFF9E0'

Column({space: 30}) {
  Text('获取生肖卡')
    .fontColor('#F5EBCF')
    .fontSize(25)
    .fontWeight(600)
  Image($r('app.media.img_00'))
    .width(200)
  Button('开心收下')
    .width(200)
    .height(50)
    .backgroundColor(Color.Transparent)
    .border({width: 2, color: '#FFF9E0'})
}
.width('100%')
  .height('100%')
  .backgroundColor('rgba(0,0,0,0.8)')
  .justifyContent(FlexAlign.Center)
  .position({x: 0, y: 0})

4.4. 遮罩层动态交互

4.4.1. 按钮交互

遮罩层的显示隐藏, 图片添加缩放效果

思路分析:

默认状态

  1. 界面隐藏visibility(Visibility:Hidden)
  2. 生肖卡隐藏（缩放比例为0）

抽卡后状态

  1. 界面显示visibility(Visibility:Visible)
  2. 生肖卡显示（缩放比例为1）

单击“开心收下”按钮

  1. 界面隐藏
 // 是否显示生肖卡界面状态
  @State
  isVisible: boolean = false

  // 生肖卡缩放状态
  @State
  imgX: number = 0
  @State
  imgY: number = 0

// 抽卡按钮
Button('立即抽卡')
  .width(200)
  .backgroundColor('#ED5B8C')
  .stateStyles({
    pressed: {
      .backgroundColor('#EA446C')
    }
  })
  .animation({
    duration: 1000
  })
  .onClick(() => {
    this.isVisible = true
    this.imgX = 1
    this.imgY = 1
  })

// 二. 生肖卡界面
Column({space: 30}) {
  Image($r('app.media.img_00'))
    .width(200)
    .scale({x: this.imgX, y: this.imgY})
    .animation({duration: 400})
  Button('开心收下')
    .onClick(() => {
      // 生肖卡界面隐藏;卡片隐藏
      this.isVisible = false
      this.imgX = 0
      this.imgY = 0
    })
}
  // 使用状态控制整个界面显隐
  .visibility(this.isVisible ? Visibility.Visible : Visibility.Hidden)
4.4.2. 图片数据

随机抽中一张生肖卡，单击“开心收下”按钮，显示对应的生肖卡，角标+1

思路分析:

  1. 随机显示生肖卡
  2. 卡片数量 +1
// 随机生肖卡序号
  @State
  randomIndex: number = -1

Button('立即抽卡')
  .onClick(() => {
    // 随机生肖卡 0-5
    this.randomIndex = Math.floor(Math.random() * 6)
  })
Column({space: 30}) {
  // 使用生成的随机数筛选生肖卡
  Image($r(`app.media.img_0${this.randomIndex}`))
  Button('开心收下')
    .onClick(() => {
      // 收下卡片更新对象数组 -- 替换初始界面图片url和角标数字
      this.images[this.randomIndex] = {
        url: `app.media.img_0${this.randomIndex}`,
        num: this.images[this.randomIndex].num += 1
      }
    })
}

4.5. 中奖结果

6张卡片数量均>=1，则可以抽奖一次（显示抽奖页面：奖品随机）

 4.5.1. 抽奖静态页面

// 抽奖页面-遮罩层
Column({space: 50}) {
  Text('恭喜获得手机一部')
    .fontColor('#F5EBCF')
    .fontSize(25)
    .fontWeight(600)
  Image($r('app.media.hw'))
    .width(300)
  Button('再来一次')
    .width(200)
    .height(50)
    .backgroundColor(Color.Transparent)
    .border({width: 2, color: '#FFF9E0'})
}
.width('100%')
  .height('100%')
  .backgroundColor('rgba(0,0,0,0.8)')
  .justifyContent(FlexAlign.Center)
  .position({x: 0, y: 0})
4.5.2. 条件渲染-抽卡与抽奖页面

集齐6种生肖卡显示抽奖页面，否则显示抽卡页面

// 是否中奖状态
  @State
  isGet: boolean = false

// 三. 抽奖中奖界面
if (this.isGet) {
  Column({space: 50}) {}
}
4.5.3. 抽奖数据处理

判断是否可以抽奖：定义count变量保存已经获得的卡片种类数量（如果每个生肖卡数量>=1,则count+1）

如果count == 6，说明已经得到了6种卡，则可以抽奖，渲染抽中的奖品图片

思路分析:

声明一个变量 保存 中奖的结果 、声明一个变量保存中奖的名称

  1. 声明一个变量保存 获得卡片的种类
  2. 遍历数组, 如果卡片的个数 大于 等于1 获得种类加 1 否则 肯定没有中奖 跳出循环
  3. 判断种类是否有 6 种
    1. 如果等于 6 说明已经集够卡片 中奖结果改为 true
    2. 罗列所有的奖品名称
    3. 获取随机下标 0 -- 2
    4. 获取随机名称
// 奖品状态
  @State
  jiangPin: string = ''

// 抽奖页面-遮罩层
Column({space: 50}) {
  Text('恭喜获得手机一部')
  Image($r(`app.media.${this.prize}`))
  Button('再来一次')
}

Button('开心收下')
  .onClick(() => {
    // 判断是否可以抽奖：定义count变量保存已经获得的卡片种类数量（如果每个生肖卡数量>=1,则count+1）
    // 如果count == 6，说明已经得到了6种卡，则可以抽奖
    // 判断是否中奖
    let count: number = 0
    for (const item of this.images) {
      if (item.num >= 1) {
        count += 1
      } else {
        break
      }
    }
    if (count == 6) {
      this.isGet = true
    }

    // 随机奖品
    const arr: string[] = ['hw', 'xm', 'pg']
    let randomNum: number = Math.floor(Math.random() * 3)
    this.jiangPin = arr[randomNum]
  })

4.6. 再次抽奖

单击“再来一次”按钮，重新抽卡

  1. 关闭遮罩层：中奖状态为 false
  2. 初始化列表数据
Button('再来一次')
  .onClick(() => {
    this.isGet = false
    this.images = [
      {url: 'app.media.bg_00', num: 0},
      {url: 'app.media.bg_01', num: 0},
      {url: 'app.media.bg_02', num: 0},
      {url: 'app.media.bg_03', num: 0},
      {url: 'app.media.bg_04', num: 0},
      {url: 'app.media.bg_05', num: 0}
    ]
  })

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

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

相关文章

手机到了外地ip地址就变了吗

手机到了外地ip地址就变了吗

手机到了外地IP地址就变了吗？随着智能手机的普及，人们越来越频繁地使用手机进行各种网络活动。然而，关于手机IP地址是否会随着地理位置的变化而改变，许多用户仍心存疑惑。本文将深入探讨这一问题，揭示IP地址变化的奥秘…
阅读更多...
【C++ 09】继承

【C++ 09】继承

文章目录 🌈 一、继承的概念及定义⭐ 1. 继承的概念⭐ 2. 继承的定义🌙 2.1 定义格式🌙 2.2 继承方式和访问限定符🌙 2.3 继承父类成员访问方式的变化🌙 2.4 默认继承方式 🌈 二、父类和子类对象赋值转换⭐…
阅读更多...
分布式通信：多计算平台的任务分配

分布式通信：多计算平台的任务分配

目录 1. 分布式通信 1.1 树莓派配置流程​编辑 1.2 树莓派和laptop处于同一网络​编辑 1.3 laptop配置 1.4 通信测试 1.5 分组通信 ​编辑 1.6 分布式通信测试 ​编辑参考资料 1. 分布式通信 机器人体积较小，采用树莓派作为控制器，实现传感器处…
阅读更多...
仿某皮影狸app官网源码 不错的APP下载官网单页源码 HTML源码

仿某皮影狸app官网源码 不错的APP下载官网单页源码 HTML源码

分享一款不错的APP下载官网单页源码，直接修改index.html即可 源码下载：https://download.csdn.net/download/m0_66047725/89731228 更多资源下载：关注我。
阅读更多...
OFDM系统PAPR算法的MATLAB仿真,对比SLM,PTS以及CAF,对比不同傅里叶变换长度

OFDM系统PAPR算法的MATLAB仿真,对比SLM,PTS以及CAF,对比不同傅里叶变换长度

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、选择映射（SLM） 4.2 相位截断星座图（PTS） 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 mat…
阅读更多...
极狐GitLab 新一代容器镜像仓库正式上线啦！

极狐GitLab 新一代容器镜像仓库正式上线啦！

从极狐GitLab 17.3 开始，私有化部署实例也可以使用新一代容器镜像仓库啦！新一代容器镜像仓库具有更高效的零宕机垃圾收集功能和其他优势。 从去年开始，极狐GitLab 就启动了重构容器镜像仓库的计划，用以构建具有更强功能的镜像仓库…
阅读更多...
就服务器而言，ARM架构与X86架构有什么区别？各自的优势在哪里？

就服务器而言，ARM架构与X86架构有什么区别？各自的优势在哪里？

一、服务器架构概述 在数字化时代，服务器架构至关重要。服务器是网络核心节点，存储、处理和提供数据与服务，是企业和组织信息化、数字化的关键基础设施。ARM 和 x86 架构为服务器领域两大主要架构，x86 架构服务器在市场占主导&…
阅读更多...
弹框调取阿里云播放器一直报错 TypeError: 没有为播放器指定容器

弹框调取阿里云播放器一直报错 TypeError: 没有为播放器指定容器

弹框调取阿里云播放器一直报错 TypeError: 没有为播放器指定容器 <template><el-dialogv-model"dialogpeopleVisible":before-close"handleClose"class"aliyunplayDialog"><!-- :show-close "false" --><div&g…
阅读更多...
2024年企业级电脑监控软件推荐，精选的电脑监控软件

2024年企业级电脑监控软件推荐，精选的电脑监控软件

随着企业信息化程度的不断提高&#xff0c;如何有效监控和管理企业电脑成为许多企业主和IT管理员的重要任务。企业级电脑监控软件不仅可以帮助企业提高工作效率&#xff0c;保障数据安全&#xff0c;还能够防止内部数据泄露和违规操作。在2024年&#xff0c;有多款优秀的电脑监…
阅读更多...
一帧图像绘制过程（详解）

一帧图像绘制过程（详解）

一帧图像的起始 手机流畅使用会带来良好的用户体验&#xff0c;而流畅的手机画面是通过屏幕刷新频率和稳定的帧率相配合实现。过高或过低的帧率会造成资源的浪费&#xff0c;不稳定的帧率造成卡顿等现象&#xff0c;影响用户体验。那么稳定的帧率如何实现&#xff1f;或者说一帧…
阅读更多...
【C++第十四课-map和set】set的用法、multiset、map的用法、multimap

【C++第十四课-map和set】set的用法、multiset、map的用法、multimap

目录 setset的用法set功能&#xff1a;排序去重反向迭代器finderasecountlower_bound、upper_bound multiseterasecountfind mapmap的构造findmultimap计算出现的次数[ ]insert 题目 之前学的都只是存储数据 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比…
阅读更多...
Python机器学习——利用Keras和基础神经网络进行手写数字识别（MNIST数据集）

Python机器学习——利用Keras和基础神经网络进行手写数字识别（MNIST数据集）

Python机器学习——利用Keras和基础神经网络进行手写数字识别&#xff08;MNIST数据集&#xff09; 配置环境创建虚拟环境安装功能包并进环境 编程1. 导入功能包2. 加载数据集3. 数据预处理4. 构建神经网络5. 神经网络训练6. 测试模型训练效果 配置环境 首先安装Anaconda&…
阅读更多...
vue3_对接腾讯_实时音视频

vue3_对接腾讯_实时音视频

项目需要对接腾讯的实时音视频产品&#xff0c;我这里选择的是多人会议&#xff0c;选择其他实时音视频产品对接流程也一样&#xff0c;如何对接腾讯实时音视频的多人会议产品&#xff0c;从开通服务到对接完成&#xff0c;一 一讲解。 一、开通腾讯实时音视频 1.腾讯实时音视…
阅读更多...
适用于计算机视觉的机器学习

适用于计算机视觉的机器学习

使用筛选器将效果应用于图像的功能在图像处理任务中非常有用&#xff0c;例如可能使用图像编辑软件执行的任务。 但是&#xff0c;计算机视觉的目标通常是从图像中提取含义或至少是可操作的见解&#xff0c;这需要创建经过训练以基于大量现有图像识别特征的机器学习模型。 卷积…
阅读更多...
Unet改进30：添加CAA(2024最新改进方法)|上下文锚定注意模块来捕获远程上下文信息。

Unet改进30：添加CAA(2024最新改进方法)|上下文锚定注意模块来捕获远程上下文信息。

本文内容：在不同位置添加CAA注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 遥感图像中的目标检测经常面临一些日益严峻的挑战，包括目标尺度的巨大变化和不同的测距环境。先前的方法试图通过大核卷积或扩展卷积来扩展主干的空间感受野来解决这…
阅读更多...
cfs三层靶机——内网渗透

cfs三层靶机——内网渗透

目录 1、环境地址 2、安装教程 3、配置虚拟机网卡 4、网络拓扑 5、安装宝塔 6、渗透测试 7、CentOS7 8、ubuntu 1、生成木马并上传 2、在kali上开启监听 3、回到蚁剑&#xff0c;运行木马 4、制作跳板 1、添加路由 2、查看路由 3、配置代理 4、配置kali的代理&…
阅读更多...
第九届“创客中国”生成式人工智能（AIGC）中小企业创新创业大赛圆满落幕

第九届“创客中国”生成式人工智能（AIGC）中小企业创新创业大赛圆满落幕

9月5日,第九届“创客中国”生成式人工智能(AIGC)中小企业创新创业大赛在南昌降下了帷幕。工业和信息化部网络安全产业发展中心(工业和信息化部信息中心)主任付京波;江西省工业和信息化厅党组成员、副厅长郭启东;南昌市委常委、市委秘书长、办公室主任赵捷;市中小企业局党组书记…
阅读更多...
MFC工控项目实例之十二板卡测试信号输出界面

MFC工控项目实例之十二板卡测试信号输出界面

承接专栏《MFC工控项目实例之十一板卡测试信号输入界面》 1、在BoardTest.h文件中添加代码 CButtonST m_btnStart[16],m_btnStart_O[16];2、在BoardTest.cpp文件中添加代码 UINT No_IDC_CHECK_O[16] {IDC_CHECK16,IDC_CHECK17,IDC_CHECK18,IDC_CHECK19,IDC_CHECK20,IDC_CH…
阅读更多...
Idea 创建 Maven项目的时候卡死

Idea 创建 Maven项目的时候卡死

文章目录 一、Archetype 和 Catalog1.1 Archetype&#xff08;原型&#xff09;1.2 Catalog&#xff08;目录&#xff09; 二、可能遇到的问题2.1 问题描述2.2 原因分析2.3 解决方案 参考资料 一、Archetype 和 Catalog 1.1 Archetype&#xff08;原型&#xff09; Archetype…
阅读更多...
vue3+ant design vue实现文件上传（阿里云oss）~

vue3+ant design vue实现文件上传（阿里云oss）~

1、效果图 2、自定义上传 <a-upload v-model:file-list"fileList" name"导入员工" action"" :customRequest"upDown" :beforeUpload"beforeUpload" :onChange"handleChange" remove"removeFile" ac…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023