HarmonyOS Next 系列之可移动悬浮按钮实现(六)
系列文章目录
HarmonyOS Next 系列之省市区弹窗选择器实现(一)
HarmonyOS Next 系列之验证码输入组件实现(二)
HarmonyOS Next 系列之底部标签栏TabBar实现(三)
HarmonyOS Next 系列之HTTP请求封装和Token持久化存储(四)
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现(五)
HarmonyOS Next 系列之可移动悬浮按钮实现(六)
文章目录
- 系列文章目录
- 前言
- 一、实现原理分析
- 二、API简单回顾
- 三、规避和限制移动范围
- 四、窗口宽高、状态栏高度、底部规避区域高度获取
- 1、窗口宽高获取
- 2、状态栏高度获取
- 2、底部规避区域高度获取
- 四、完整代码实现
- 五、其他说明
前言
HarmonyOS Next(基于API11)实现一个可移动的悬浮按钮
ps:为演示作用,这边和后续代码例子随便用回到顶部图标来做演示,实际可自定义替换
一、实现原理分析
1、布局方面:使用Stack容器,让悬浮按钮堆叠在页面之上,通过postion属性x,y设置悬浮按钮位置(x,y为相对页面左上角距离)
2、事件处理:在移动过程中通过监听touch事件,获取手指在屏幕上位置与初始触摸点位置比较,计算悬浮按钮的偏移量,动态更新悬浮按钮x,y值。
二、API简单回顾
touch触摸事件
1、触摸类型TouchType
名称 | 描述 |
---|---|
Down | 手指按下时触发。 |
Up | 手指抬起时触发。 |
Move | 手指按压态在屏幕上移动时触发。 |
2、手指信息TouchObject
名称 | 描述 |
---|---|
type | 触摸事件的类型 |
windowX | 触摸点相对于应用窗口左上角的X坐标。 |
windowY | 触摸点相对于应用窗口左上角的Y坐标。 |
说明:以x轴为例,计算两个触摸点(A、B)水平方向距离只需B.windowX-A.windowX,而在我们实现悬浮按钮处理过程中这个A点就是手指刚按下去触摸点的windowX,B点就是移动过程中触摸点的windowX,在移动过程中不断计算这个差值后更新悬浮按钮坐标就能让其跟着手指移动。当然在这个过程中还需要考虑悬浮按钮移出屏幕情况,需要规避和限制。
ps:windowX、windowY单位为vp
三、规避和限制移动范围
为了让悬浮按钮不移出屏幕,需要限制x、y大小
最小值很容易想到x>=0,y>=0,也即悬浮按钮在最左上角
最大值位置在页面右下角
假设悬浮按钮半径为R,窗口宽为winWidth、窗口高winHeight,状态栏高statusHeight,底部规避区域高:bottomHeight
x最大值=winWidth-2R
y最大值=winHeight-2R-statusHeight-bottomHeight
所以x范围为0~(winWidth-2R),y范围0 ~(winHeight-2R-statusHeight-bottomHeight)
四、窗口宽高、状态栏高度、底部规避区域高度获取
1、窗口宽高获取
import { window } from '@kit.ArkUI'
.....
.....
.....window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//获取窗口宽高let windowProperties = windowClass.getWindowProperties()this.winWidth = px2vp(windowProperties.windowRect.width)this.winHeight = px2vp(windowProperties.windowRect.height)}})
2、状态栏高度获取
import { window } from '@kit.ArkUI'
.....
.....
.....window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//获取状态栏高度this.statusHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)}})
2、底部规避区域高度获取
import { window } from '@kit.ArkUI'
.....
.....
.....
window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//获取手机底部规避区域高度this.bottomAvoidAreaHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)}})
ps:需要注意的是上述获取到的宽高单位都是px需要统一转成vp单位,方便和windowXY进行计算
四、完整代码实现
SuspensionButton .ets
import { window } from '@kit.ArkUI'@Entry
@Component
struct SuspensionButton {@State statusHeight: number = 0 //状态栏高度@State bottomAvoidAreaHeight: number = 0 //手机底部规避区域高度@State curLeft: number = 0 //当前悬浮按钮距离窗口左边距离@State curTop: number = 0 //当前悬浮按钮距离窗口顶部距离private startLeft: number = 0 //开始移动那一刻悬浮按钮距离窗口左边距离private startTop: number = 0 //开始移动那一刻悬浮按钮距离窗口顶部距离private startX: number = 0 //开始移动触摸点x坐标,相对窗口左上角private startY: number = 0 //开始移动触摸点y坐标,相对窗口左上角private radius: number = 25 //悬浮按钮半径,单位vpprivate winWidth: number = 0 //窗口宽度private winHeight: number = 0 //窗口高度aboutToAppear() {this.getWindowInfo()}//获取窗口尺寸信息getWindowInfo() {window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//状态栏高度this.statusHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)//获取手机底部规避区域高度this.bottomAvoidAreaHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)//获取窗口宽高let windowProperties = windowClass.getWindowProperties()this.winWidth = px2vp(windowProperties.windowRect.width)this.winHeight = px2vp(windowProperties.windowRect.height)//设置初始位置位于屏幕右下角,演示设置可根据实际调整this.curLeft=this.winWidth*0.8this.curTop=this.winHeight*0.8}})}build() {Stack() {Column(){//页面内容}.width('100%').height('100%')//悬浮按钮Row() {Image($r('app.media.top')).width(25)}.width(this.radius * 2).height(this.radius * 2).justifyContent(FlexAlign.Center).borderRadius(this.radius).backgroundColor('#E8E8E8').position({x: this.curLeft,y: this.curTop}).onTouch((event: TouchEvent) => {//手指按下记录初始触摸点坐标、悬浮按钮位置if (event.type === TouchType.Down) {this.startX = event.touches[0].windowXthis.startY = event.touches[0].windowYthis.startLeft = this.curLeftthis.startTop = this.curTop}//手指拖动else if (event.type === TouchType.Move) {let touch = event.touches[0]//计算悬浮球与左边距离(x坐标), 当前悬浮球距离左边=开始位置(x轴)+(当前触摸点x坐标-开始移动触摸点x坐标)let curLeft = this.startLeft + (touch.windowX - this.startX)//限制悬浮球不能移除屏幕左边curLeft = Math.max(0, curLeft)//限制悬浮球不能移除屏幕右边this.curLeft = Math.min(this.winWidth - 2 * this.radius, curLeft)//计算悬浮球与顶部距离(y坐标), 当前悬浮球距离顶部=开始位置(y轴)+(当前触摸点y坐标-开始移动触摸点y坐标)let curTop = this.startTop + (touch.windowY - this.startY)//限制悬浮球不能移除屏幕上边curTop = Math.max(0, curTop)//限制悬浮球不能移除屏幕下边this.curTop = Math.min(this.winHeight - 2 * this.radius - this.bottomAvoidAreaHeight - this.statusHeight, curTop)}})}.width('100%').height('100%').backgroundColor('#f2f2f2')}
}
运行效果
五、其他说明
如果是想实现悬浮窗原理也一样,只不过把悬浮按钮半径计算拆开为x,y2个方向,根据悬浮窗宽高替换带入计算即可。
如果想实现不可移动悬浮按钮,类似案例中回到顶部固定在页面右下角,只需要把触摸事件去掉即可。
相关文章:
HarmonyOS Next 系列之可移动悬浮按钮实现(六)
系列文章目录 HarmonyOS Next 系列之省市区弹窗选择器实现(一) HarmonyOS Next 系列之验证码输入组件实现(二) HarmonyOS Next 系列之底部标签栏TabBar实现(三) HarmonyOS Next 系列之HTTP请求封装和Token…...
如何获得更高质量的回答-chatgpt
在与技术助手如ChatGPT进行交互时,提问的方式直接影响到你获得的答案质量。以下是几个关键的提问技巧,可以帮助你在与ChatGPT的互动中获得更有效的回答: 1. 清晰明了的问题 技巧:确保问题清晰明了,避免含糊不清或模糊的…...
ASP.NET Core 6.0 使用 Log4Net 和 Nlog日志中间件
前言 两年前,浅浅的学过 .NET 6,为啥要记录下来,大概是为了以后搭架子留下引线,还有抛砖引玉。 1. 环境准备 下载 建议使用 Visual Studio 2022 开发版 官网的下载地址:Visual Studio 2022 IDE - 适用于软件开发人员的编程工具借助 Visual Studio 设计,具有自动完成…...
使用Spring Boot实现与ActiveMQ的消息队列集成
使用Spring Boot实现与ActiveMQ的消息队列集成 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 消息队列在现代分布式系统中扮演着至关重要的角色,…...
深度学习 - Transformer 组成详解
整体结构 1. 嵌入层(Embedding Layer) 生活中的例子:字典查找 想象你在读一本书,你不认识某个单词,于是你查阅字典。字典为每个单词提供了一个解释,帮助你理解这个单词的意思。嵌入层就像这个字典…...
ONLYOFFICE 8.1编辑器桌面应用程序来袭——在线全面测评
目录 ✈下载✈ 👀界面👀 👊功能👊 🧠幻灯片版式的重大改进🧠 ✂无缝切换文档编辑、审阅和查看模式✂ 🎵在演示文稿中播放视频和音频文件🎵 🤗版本 8.1:…...
《Windows API每日一练》6.4 程序测试
前面我们讨论了鼠标的一些基础知识,本节我们将通过一些实例来讲解鼠标消息的不同处理方式。 本节必须掌握的知识点: 第36练:鼠标击中测试1 第37练:鼠标击中测试2—增加键盘接口 第38练:鼠标击中测试3—子窗口 第39练&…...
[C#]基于opencvsharp实现15关键点人体姿态估计
数据集 正确选择数据集以对结果产生适当影响也是非常必要的。在此姿势检测中,模型在两个不同的数据集即COCO关键点数据集和MPII人类姿势数据集上进行了预训练。 1. COCO:COCO关键点数据集是一个多人2D姿势估计数据集,其中包含从Flickr收集的…...
lambda-map.merge
map.merge 结论: 1.当前传入的 key ,value biFunction 2.如果之前map不存在则直接put(当前key,当前value) 3.如果之前map已经有了,老value与 当前value 进入function处理后再 put(当前key,处理后的value)...
pppd 返回错误码 含义
错误码 00: pppd已经断开,或者已经成功建立连接后请求方又中 断了。 01: 发成了一个严重错误,例如系统调用失败或者访问非法内存。 02: 处理给定操作是检测到错误,例如使用两个互斥的操作。 03:…...
XML 技术
XML 技术 XML(可扩展标记语言)是一种用于存储和传输数据的标记语言。它由万维网联盟(W3C)开发,并在1998年成为正式标准。XML的设计目标是既易于人类阅读,也易于机器解析。它是一种自描述的语言,允许用户定义自己的标签和文档结构。XML被广泛应用于各种领域,包括网络服…...
基于RabbitMQ的异步消息传递:发送与消费
引言 RabbitMQ是一个流行的开源消息代理,用于在分布式系统中实现异步消息传递。它基于Erlang语言编写,具有高可用性和可伸缩性。在本文中,我们将探讨如何在Python中使用RabbitMQ进行消息发送和消费。 安装RabbitMQ 在 Ubuntu 上安装 Rabbi…...
Golang | Leetcode Golang题解之第201题数字范围按位与
题目: 题解: func rangeBitwiseAnd(m int, n int) int {for m < n {n & (n - 1)}return n }...
竞争性谈判中,主要谈判什么内容?(电子化招采系统)
问:竞争性谈判中,主要谈判什么内容? 答:竞争性谈判是指采购人或代理机构通过与多家供应商(不少于3家)进行谈判,最后从中确定中标供应商的一种采购方式。在谈判的过程中,谈判的主要内…...
youlai-boot项目的学习(4) 前后端本地部署
环境 1、macOS, brew, IntelliJ IDEA, WebStrom 2、后端:https://gitee.com/youlaiorg/youlai-boot.git , master, 9a753a2e94985ed4cbbf214156ca035082e02723 3、前端:https://gitee.com/youlaiorg/vue3-element-admin.git, master, 66b913ef01dc880ad…...
Redis 5 种基础数据结构?
Redis 5 种基本数据结构(String、List、Hash、Set、Sorted Set)在面试中经常会被问到,这篇文章我们一起来回顾温习一下。 还有几种比较特殊的数据结构(HyperLogLogs、Bitmap 、Geospatial、Stream)也非常重要,我们后面下次再聊! 下面是正文。…...
搜维尔科技:SenseGlove Nova2国内首款支持手掌心力回馈手套开售
《SenseGlove Nova 2》现正全球发行中! 搜维尔科技独家代理最新上市的 SenseGlove Nova 2 是世上首款,也是目前市面上唯一一款提供手掌力回馈的无缐VR力回馈手套,它结合了三种最先进的反馈技术,包括主动反馈、强力反馈及震动反馈,…...
Java中的函数式编程入门
Java中的函数式编程入门 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我来为大家介绍一下Java中的函数式编程。随着Java 8的发布,函数式编程成…...
idea 自动生成序列化数字
目标:当类继承Serializable后自动生成序列化Uid 网上查了很多说勾选class without ‘serialVersionUID’ 但是我勾选没用 最后发现,我勾选的是Serialization issues里面的配置,要勾选的是JVM languages下的 如下图所示,记录一下…...
Java数据结构算法(最长递增序列二分查找)
前言: 最长递增子序列(Longest Increasing Subsequence, LIS)是指在一个给定的序列中,找到一个最长的子序列,使得这个子序列中的元素是单调递增的。子序列不要求在原序列中连续。 实现原理 使用一个 tails 列表,其中…...
编译VTK静态库
编译VTK静态库遇到问题 vtkCommonCore-9.3d.lib(vtkSMPToolsAPI.obj) : error LNK2019: unresolved external symbol "public: bool __cdecl vtk::detail::smp::vtkSMPToolsImpl<1>::IsParallelScope(void)" (?IsParallelScope?$vtkSMPToolsImpl$00smpdetai…...
Python中的@property装饰器:深入理解与应用
Python中的property装饰器:深入理解与应用 在Python中,property装饰器是一个强大的工具,它允许我们将方法作为属性来访问,使得代码更加简洁、清晰,并提供了更好的封装性。本文将深入探讨property装饰器的工作原理、应…...
springCloudalibabaAI孵化(一)
目录 1、what 1、简介 2、核心概念 3、高级特性 Prompt 和 AiResponse 4、功能 2、How 1、前言 2、在项目 pom.xml 中加入 2023.0.1.0 版本 Spring Cloud Alibaba 依赖: 3、在 配置文件中加入以下配置:application.yml 4、编写聊天服务实现类&a…...
【封装】Unity编辑器模式GUID加载资源
介绍 在编辑器模式下通过GUID获取工程目录下的指定资源的接口工具封装 工具原理 借助AssetDatabaseAPI FindAssets : 获取 GUID GUIDToAssetPath : 通过GUID获取路径LoadAssetAtPath<T>: 通过路径加载资源 代码: public static class GetAssetUtil {pub…...
安装 Docker 环境(通过云平台创建一个实例实现)
目录 1. 删除原有 yum 2. 手动配置 yum 源 3. 删除防火墙规则 4. 保存防火墙配置 5. 修改系统内核。打开内核转发功能。 6. 安装 Docker 7. 设置本地镜像仓库 8.重启服务 1. 删除原有 yum rm -rfv /etc/yum.repos.d/* 2. 手动配置 yum 源 使用 centos7-1511.iso 和 Xi…...
MySQL之可扩展性(六)
可扩展性 向外扩展 12.重新均衡分片数据 如有必要,可以通过在分片间移动数据来达到负载均衡。举个例子,许多读者可能听一些大型图片分享网站或流行社区网站的开发者提到过用于分片间移动用户数据的工具。在分片间移动数据的好处很明显。例如ÿ…...
C++ | Leetcode C++题解之第202题快乐数
题目: 题解: class Solution { public:int ProductSum(int n){int sum 0;while(n){int temp n % 10;sum temp*temp;n / 10;}return sum;}bool isHappy(int n) {int slow n,fast n;// 快慢指针,找环的相遇位置do{slow ProductSum(slow)…...
NIST网络安全框架体系应用
NIST网络安全框架体系应用 NIST网络安全框架(NIST Cybersecurity Framework, NIST CSF)由美国国家标准与技术研究院(NIST)发布,是一套广泛应用于各种组织的网络安全管理指南。该框架通过识别、保护、检测、响应和恢复…...
【LeetCode】七、树、堆、图
文章目录 1、树结构2、二叉树3、二叉树的遍历4、堆结构(Heap)5、堆化6、图 1、树结构 节点、根节点、叶子节点: 高度、深度、层三者的示意图: 2、二叉树 相比其他树,二叉树即每个节点最多两个孩子(两个分…...
FPGA PCIe加载提速方案
目录 1.bit流压缩 2.flash加载速度 3.Tandem模式 1.bit流压缩 set_property BITSTREAM.GENERAL.COMPRESS TRUE [current_design] 2.flash加载速度 打开bitstream setting,设置SPI的线宽和速率(线宽按原理图设置,速率尽可能高)…...
Hi3861 OpenHarmony嵌入式应用入门--轮询按键
本篇介绍使用轮询方式读取gpio状态来判断按键状态。 原理图如下 GPIO API API名称 说明 hi_u32 hi_gpio_init(hi_void); GPIO模块初始化 hi_u32 hi_io_set_pull(hi_io_name id, hi_io_pull val); 设置某个IO上下拉功能。 hi_u32 hi_gpio_set_dir(hi_gpio_idx id, hi_gpi…...
js,uni 自定义 时间选择器 vue2
<template><view class"reserve-time-box"><view class"title">选择时间</view><view class"date-box"><view class"date-scroll-box" :style"{ width : ${dataTimeWidth}rpx }"><v…...
搜索引擎的原理与相关知识
搜索引擎是一种网络服务,它通过互联网帮助用户找到所需的信息。搜索引擎的工作原理主要包括以下几个步骤: 网络爬虫(Web Crawler):搜索引擎使用网络爬虫(也称为蜘蛛或机器人)来遍历互联网&#…...
React:tabs或标签页自定义右击菜单内容,支持内嵌iframe关闭菜单方案
React:tabs或标签页自定义右击菜单内容,支持内嵌iframe关闭菜单方案 不管是react、vue还是原生js,原理是一样的。 注意如果内嵌iframe情况下,iframe无法使用事件监听,但是可以使用iframe的任何点击行为都会往父级wind…...
Taro +vue3 中的微信小程序中的分享
微信小程序 右上角分享 的触发 以及配 useShareAppMessage(() > {return {title: "电影属全国通兑券",page: /pages/home/index,imageUrl: "http:///chuanshuo.jpg",};}); 置 就是Taro框架中提供的一个分享Api 封装好的...
视频监控EasyCVR视频汇聚/智能边缘网关:EasySearch无法探测到服务器如何处理?
安防监控EasyCVR智能边缘网关/视频汇聚网关/视频网关属于软硬一体的边缘计算硬件,可提供多协议(RTSP/RTMP/国标GB28181/GAT1400/海康Ehome/大华/海康/宇视等SDK)的设备接入、音视频采集、视频转码、处理、分发等服务,系统具备实时…...
openlayer 鼠标点击船舶,打开船舶简单弹框
背景: 对创建的地图对象,可以添加上监听事件,常用的有:地图点击事件、鼠标移动事件。 通过监听这些事件,又可以区分不同图层的不同要素,获取不同数据; 根据这些数据,又可以发起网络请…...
数据挖掘常见算法(关联)
Apriori算法 Apriori算法基于频繁项集性质的先验知识,使用由下至上逐层搜索的迭代方法,即从频繁1项集开始,采用频繁k项集搜索频繁k1项集,直到不能找到包含更多项的频繁项集为止。 Apriori算法由以下步骤组成,其中的核…...
vue项目集成CanvasEditor实现Word在线编辑器
CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以…...
Redis Stream Redisson Stream
目录 一、Redis Stream1.1 场景1:多个客户端可以同时接收到消息1.1.1 XADD - 向stream添加Entry(发消息 )1.1.2 XREAD - 从stream中读取Entry(收消息)1.1.3 XRANGE - 从stream指定区间读取Entry(收消息&…...
threadX netx 设置IP地址以及获取IP地址
ThreadX 是一个实时操作系统(RTOS)内核,而 NetX 则是 Express Logic 提供的一个嵌入式 TCP/IP 网络栈,它经常与 ThreadX 一起使用来提供网络功能。在 ThreadX 和 NetX 中设置和获取 IP 地址通常涉及几个步骤。 设置 IP 地址 初始…...
计算机毕业设计hadoop+spark+hive知识图谱医生推荐系统 医生数据分析可视化大屏 医生爬虫 医疗可视化 医生大数据 机器学习 大数据毕业设计
测试过程及结果 本次对于医生推荐系统测试通过手动测试的方式共进行了两轮测试。 (1)第一轮测试中执行了个20个测试用例,通过16个,失败4个,其中属于严重缺陷的1个,属于一般缺陷的3个。 (2&am…...
lammps已经运算结束,有数据忘记算:rerun 命令
需要的文件 1、模拟运算的所有文件(模型 、in文件、力场文件) 2、模拟计算所得到的dump文件(原子轨迹文件) rerun命令的使用(修改in文件) 1、删除or注释掉 输出dump文件的那一行命令 2、加上需要补充计…...
CARLA自动驾驶模拟器基础
CARLA 使用服务器-客户端架构运行,其中 CARLA 服务器运行模拟并由客户端向其发送指令。客户端代码使用 API 与服务器进行通信。要使用 Python API,您必须通过 PIP 安装该模块: pip3 install carla-simulator # Python 3World and client 客…...
华为HCIP Datacom H12-821 卷16
1.判断题 在 VRRP 中,当设备状态变为 Master 后,,会立刻发送免费 ARP 来刷新下游设备的 MAC 表项,从而把用户的流量引到此台设备上来 A、对 B、错 正确答案: A 解析: 2.判断题 路由选择工具 route- policy 能够基于预先定义的条件来进行过滤并设置 BGP...
Python学习打卡:day17
day17 笔记来源于:黑马程序员python教程,8天python从入门到精通,学python看这套就够了 目录 day17121、Python 操作 MySQL 基础使用pymysql创建到 MySQL 的数据库链接执行 SQL 语句执行非查询性质的SQL语句执行查询性质的SQL语句 122、Pyth…...
Spring Cloud Gateway 与 Nacos 的完美结合
在现代微服务架构中,服务网关扮演着至关重要的角色。它不仅负责路由请求到相应的服务,还承担着诸如负载均衡、安全认证、限流熔断等重要功能。Spring Cloud Gateway 作为 Spring Cloud 生态系统中的一员,以其强大的功能和灵活的配置ÿ…...
vue2 element ui 表单 动态增加表单项 表单项值不可重复 select多选
案例 <template><el-form :model"form" ref"form" label-width"70px"><el-form-item><el-button icon"el-icon-plus" type"primary" plain click"add">新增</el-button><el-b…...
[数据集][目标检测]电力场景下电柜箱门把手检测数据集VOC+YOLO格式1167张1类别
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):1167 标注数量(xml文件个数):1167 标注数量(txt文件个数):1167 标注…...
OverTheWire Bandit 靶场通关解析(上)
介绍 OverTheWire Bandit 是一个针对初学者设计的网络安全挑战平台,旨在帮助用户掌握基本的命令行操作和网络安全技能。Bandit 游戏包含一系列的关卡,每个关卡都需要解决特定的任务来获取进入下一关的凭证。通过逐步挑战更复杂的问题,用户可…...