目录

概述

基本概念

设置依赖关系

设置参考边界

设置锚点

设置相对于锚点的对齐位置

子组件位置偏移

多种组件的对齐布局

组件尺寸

多个组件形成链

概述

RelativeContainer是一种采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于处理界面复杂的场景，对多个子元素进行对齐和排列。子元素可以指定兄弟元素或父容器作为锚点，基于锚点进行相对位置布局。在使用锚点时，需注意子元素的相对位置关系，以避免出现错位或遮挡的情况。下图展示了一个 RelativeContainer的概念图，图中的虚线表示位置的依赖关系。

图1 相对布局示意图

子元素并不完全是上图中的依赖关系。比如，Item4可以以Item2为依赖锚点，也可以以RelativeContainer父容器为依赖锚点。

基本概念

  • 参考边界：设置当前组件的哪个边界对齐到锚点。
  • 锚点：通过锚点设置当前元素基于哪个元素确定位置。
  • 对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

设置依赖关系

设置参考边界

设置当前组件的哪个边界对齐到锚点。容器内子组件的参考边界区分水平方向和垂直方向。

  • 在水平方向上，可以按照起始（left）、居中（middle）或尾端（right）的组件边界与锚点对齐。当设置三个边界时，仅起始（left）和居中（middle）的边界设置生效。

  • 在垂直方向上，可以设置组件边界与锚点对齐，具体包括顶部（top）、居中（center）和底部（bottom）。当设置三个边界时，仅顶部（top）和居中（center）生效。

设置锚点

锚点设置涉及子元素相对于其父元素或兄弟元素的位置依赖关系。具体而言，子元素可以将其位置锚定到相对布局容器（RelativeContainer）、辅助线（guideline）、屏障（barrier）或其他子元素上。

为了准确定义锚点，RelativeContainer的子元素必须拥有唯一的组件标识（id），用于指定锚点信息。父元素RelativeContainer的标识默认为“__container__”，其他子元素的组件标识（id）则通过id属性设置。

  • 未设置组件标识（id）的组件虽可显示，但无法被其他组件引用为锚点。相对布局容器会为其拼接组件标识，但组件标识（id）的规律无法被应用感知。辅助线（guideline）与屏障（barrier）的组件标识（id）需确保唯一，避免与任何组件冲突。若有重复，遵循组件 > guideline > barrier 的优先级。
  • 组件间设置锚点时应避免形成依赖循环（组件之间设置链除外），依赖循环将导致子组件缺乏定位基准，最终无法绘制。

  • RelativeContainer父组件为锚点，__container__代表父容器的组件标识（id）。
let AlignRus: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}
let AlignRue: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }
}
let Mleft: Record<string, number> = { 'left': 20 }
let BWC: Record<string, number | string> = { 'width': 2, 'color': '#6699FF' }@Entry
@Component
struct Index {build() {RelativeContainer() {Row() {Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#a3cf62').alignRules(AlignRus).id("row1")Row() {Text('row2')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#00ae9d').alignRules(AlignRue).id("row2")}.width(300).height(300).margin(Mleft).border(BWC)}
}

  • 以兄弟元素为锚点。
  • let AlignRus: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}
let RelConB: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {'top': { 'anchor': 'row1', 'align': VerticalAlign.Bottom },'left': { 'anchor': 'row1', 'align': HorizontalAlign.Start }
}
let Mleft: Record<string, number> = { 'left': 20 }
let BWC: Record<string, number | string> = { 'width': 2, 'color': '#6699FF' }@Entry
@Component
struct Index {build() {RelativeContainer() {Row() {Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#00ae9d').alignRules(AlignRus).id("row1")Row() {Text('row2')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#a3cf62').alignRules(RelConB).id("row2")}.width(300).height(300).margin(Mleft).border(BWC)}
}

  • 子组件锚点可以任意选择，但需注意不要相互依赖。 
  • @Entry
@Component
struct Index {build() {Row() {RelativeContainer() {Row(){Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#a3cf62').alignRules({top: {anchor: "__container__", align: VerticalAlign.Top},left: {anchor: "__container__", align: HorizontalAlign.Start}}).id("row1")Row(){Text('row2')}.justifyContent(FlexAlign.Center).width(100).backgroundColor('#00ae9d').alignRules({top: {anchor: "__container__", align: VerticalAlign.Top},right: {anchor: "__container__", align: HorizontalAlign.End},bottom: {anchor: "row1", align: VerticalAlign.Center},}).id("row2")Row(){Text('row3')}.justifyContent(FlexAlign.Center).height(100).backgroundColor('#0a59f7').alignRules({top: {anchor: "row1", align: VerticalAlign.Bottom},left: {anchor: "row1", align: HorizontalAlign.Start},right: {anchor: "row2", align: HorizontalAlign.Start}}).id("row3")Row(){Text('row4')}.justifyContent(FlexAlign.Center).backgroundColor('#2ca9e0').alignRules({top: {anchor: "row3", align: VerticalAlign.Bottom},left: {anchor: "row1", align: HorizontalAlign.Center},right: {anchor: "row2", align: HorizontalAlign.End},bottom: {anchor: "__container__", align: VerticalAlign.Bottom}}).id("row4")}.width(300).height(300).margin({left: 50}).border({width:2, color: "#6699FF"})}.height('100%')}
}

设置相对于锚点的对齐位置

设置了锚点之后，可以通过alignRules属性的align设置相对于锚点的对齐位置。

在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

子组件位置偏移

子组件经过相对位置对齐后，可能尚未达到目标位置。开发者可根据需要设置额外偏移（offset）。当使用offset调整位置的组件作为锚点时，对齐位置为设置offset之前的位置。从API Version 11开始，新增了bias对象，建议API Version 11及以后的版本使用bias来设置额外偏移。

@Entry
@Component
struct Index {
build() {Row() {RelativeContainer() {Row() {Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#a3cf62').alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },left: { anchor: "__container__", align: HorizontalAlign.Start }}).id("row1")Row() {Text('row2')}.justifyContent(FlexAlign.Center).width(100).backgroundColor('#00ae9d').alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },right: { anchor: "__container__", align: HorizontalAlign.End },bottom: { anchor: "row1", align: VerticalAlign.Center },}).offset({x: -40,y: -20}).id("row2")Row() {Text('row3')}.justifyContent(FlexAlign.Center).height(100).backgroundColor('#0a59f7').alignRules({top: { anchor: "row1", align: VerticalAlign.Bottom },left: { anchor: "row1", align: HorizontalAlign.End },right: { anchor: "row2", align: HorizontalAlign.Start }}).offset({x: -10,y: -20}).id("row3")Row() {Text('row4')}.justifyContent(FlexAlign.Center).backgroundColor('#2ca9e0').alignRules({top: { anchor: "row3", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom },left: { anchor: "__container__", align: HorizontalAlign.Start },right: { anchor: "row1", align: HorizontalAlign.End }}).offset({x: -10,y: -30}).id("row4")Row() {Text('row5')}.justifyContent(FlexAlign.Center).backgroundColor('#30c9f7').alignRules({top: { anchor: "row3", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom },left: { anchor: "row2", align: HorizontalAlign.Start },right: { anchor: "row2", align: HorizontalAlign.End }}).offset({x: 10,y: 20}).id("row5")Row() {Text('row6')}.justifyContent(FlexAlign.Center).backgroundColor('#ff33ffb5').alignRules({top: { anchor: "row3", align: VerticalAlign.Bottom },bottom: { anchor: "row4", align: VerticalAlign.Bottom },left: { anchor: "row3", align: HorizontalAlign.Start },right: { anchor: "row3", align: HorizontalAlign.End }}).offset({x: -15,y: 10}).backgroundImagePosition(Alignment.Bottom).backgroundImageSize(ImageSize.Cover).id("row6")}.width(300).height(300).margin({ left: 50 }).border({ width: 2, color: "#6699FF" })}.height('100%')
}
}

多种组件的对齐布局

Row、Column、Flex、Stack等多种布局组件，可按照RelativeContainer组件规则进行对齐排布。

@Entry
@Component
struct Index {
@State value: number = 0build() {Row() {RelativeContainer() {Row().width(100).height(100).backgroundColor('#a3cf62').alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },left: { anchor: "__container__", align: HorizontalAlign.Start }}).id("row1")Column().width('50%').height(30).backgroundColor('#00ae9d').alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },left: { anchor: "__container__", align: HorizontalAlign.Center }}).id("row2")Flex({ direction: FlexDirection.Row }) {Text('1').width('20%').height(50).backgroundColor('#0a59f7')Text('2').width('20%').height(50).backgroundColor('#2ca9e0')Text('3').width('20%').height(50).backgroundColor('#0a59f7')Text('4').width('20%').height(50).backgroundColor('#2ca9e0')}.padding(10).backgroundColor('#30c9f7').alignRules({top: { anchor: "row2", align: VerticalAlign.Bottom },left: { anchor: "__container__", align: HorizontalAlign.Start },bottom: { anchor: "__container__", align: VerticalAlign.Center },right: { anchor: "row2", align: HorizontalAlign.Center }}).id("row3")Stack({ alignContent: Alignment.Bottom }) {Text('First child, show in bottom').width('90%').height('100%').backgroundColor('#a3cf62').align(Alignment.Top)Text('Second child, show in top').width('70%').height('60%').backgroundColor('#00ae9d').align(Alignment.Top)}.margin({ top: 5 }).alignRules({top: { anchor: "row3", align: VerticalAlign.Bottom },left: { anchor: "__container__", align: HorizontalAlign.Start },bottom: { anchor: "__container__", align: VerticalAlign.Bottom },right: { anchor: "row3", align: HorizontalAlign.End }}).id("row4")}.width(300).height(300).margin({ left: 50 }).border({ width: 2, color: "#6699FF" })}.height('100%')
}
}

组件尺寸

当同时存在前端页面设置的子组件尺寸和相对布局规则时，子组件的绘制尺寸依据约束规则确定。从API Version 11开始，此规则有所变化，子组件自身设置的尺寸优先级高于相对布局规则中的对齐锚点尺寸。因此，若要使子组件与锚点严格对齐，应仅使用alignRules，避免使用尺寸设置。

说明

  • 根据约束条件和子组件自身的size属性无法确定子组件的大小，此时，不绘制该子组件。
  • 在同一方向上设置两个或更多锚点时，若这些锚点的位置顺序有误，该子组件将被视为大小为0而不予绘制。
@Entry
@Component
struct Index {build() {Row() {RelativeContainer() {Row() {Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#a3cf62').alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },left: { anchor: "__container__", align: HorizontalAlign.Start }}).id("row1")Row() {Text('row2')}.justifyContent(FlexAlign.Center).width(100).backgroundColor('#00ae9d').alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },right: { anchor: "__container__", align: HorizontalAlign.End },bottom: { anchor: "row1", align: VerticalAlign.Center },}).id("row2")Row() {Text('row3')}.justifyContent(FlexAlign.Center).height(100).backgroundColor('#0a59f7').alignRules({top: { anchor: "row1", align: VerticalAlign.Bottom },left: { anchor: "row1", align: HorizontalAlign.End },right: { anchor: "row2", align: HorizontalAlign.Start }}).id("row3")Row() {Text('row4')}.justifyContent(FlexAlign.Center).backgroundColor('#2ca9e0').alignRules({top: { anchor: "row3", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom },left: { anchor: "__container__", align: HorizontalAlign.Start },right: { anchor: "row1", align: HorizontalAlign.End }}).id("row4")Row() {Text('row5')}.justifyContent(FlexAlign.Center).backgroundColor('#30c9f7').alignRules({top: { anchor: "row3", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom },left: { anchor: "row2", align: HorizontalAlign.Start },right: { anchor: "row2", align: HorizontalAlign.End }}).id("row5")Row() {Text('row6')}.justifyContent(FlexAlign.Center).backgroundColor('#ff33ffb5').alignRules({top: { anchor: "row3", align: VerticalAlign.Bottom },bottom: { anchor: "row4", align: VerticalAlign.Bottom },left: { anchor: "row3", align: HorizontalAlign.Start },right: { anchor: "row3", align: HorizontalAlign.End }}).id("row6").backgroundImagePosition(Alignment.Bottom).backgroundImageSize(ImageSize.Cover)}.width(300).height(300).margin({ left: 50 }).border({ width: 2, color: "#6699FF" })}.height('100%')}
}

多个组件形成链

链的形成依赖于组件之间的关联关系。以组件A和组件B构成的最简水平链为例，其依赖关系为：锚点1 <-- 组件A <---> 组件B --> 锚点2，即A具有left锚点，B具有right锚点，同时A的right锚点与B的HorizontalAlign.Start对齐，B的left锚点与A的HorizontalAlign.End对齐。

  • 链的方向和格式在链头组件的chainMode接口中声明；链内元素的bias属性全部失效，链头元素的bias属性作为整个链的bias生效。链头是指在满足成链规则时链的第一个组件（在水平方向上，从左边开始，镜像语言中从右边开始；在竖直方向上，从上边开始）。
  • 如果链内所有元素的size超出链的锚点约束，超出部分将被均匀分配到链的两侧。在Packed链中，可以通过bias设置超出部分的分布。
@Entry
@Component
struct Index {build() {Row() {RelativeContainer() {Row() {Text('row1')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#a3cf62').alignRules({left: { anchor: "__container__", align: HorizontalAlign.Start },right: { anchor: "row2", align: HorizontalAlign.Start },top: { anchor: "__container__", align: VerticalAlign.Top }}).id("row1").chainMode(Axis.Horizontal, ChainStyle.SPREAD)Row() {Text('row2')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#00ae9d').alignRules({left: { anchor: "row1", align: HorizontalAlign.End },right: { anchor: "row3", align: HorizontalAlign.Start },top: { anchor: "row1", align: VerticalAlign.Top }}).id("row2")Row() {Text('row3')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#0a59f7').alignRules({left: { anchor: "row2", align: HorizontalAlign.End },right: { anchor: "__container__", align: HorizontalAlign.End },top: { anchor: "row1", align: VerticalAlign.Top }}).id("row3")Row() {Text('row4')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#a3cf62').alignRules({left: { anchor: "__container__", align: HorizontalAlign.Start },right: { anchor: "row5", align: HorizontalAlign.Start },center: { anchor: "__container__", align: VerticalAlign.Center }}).id("row4").chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE)Row() {Text('row5')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#00ae9d').alignRules({left: { anchor: "row4", align: HorizontalAlign.End },right: { anchor: "row6", align: HorizontalAlign.Start },top: { anchor: "row4", align: VerticalAlign.Top }}).id("row5")Row() {Text('row6')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#0a59f7').alignRules({left: { anchor: "row5", align: HorizontalAlign.End },right: { anchor: "__container__", align: HorizontalAlign.End },top: { anchor: "row4", align: VerticalAlign.Top }}).id("row6")Row() {Text('row7')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#a3cf62').alignRules({left: { anchor: "__container__", align: HorizontalAlign.Start },right: { anchor: "row8", align: HorizontalAlign.Start },bottom: { anchor: "__container__", align: VerticalAlign.Bottom }}).id("row7").chainMode(Axis.Horizontal, ChainStyle.PACKED)Row() {Text('row8')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#00ae9d').alignRules({left: { anchor: "row7", align: HorizontalAlign.End },right: { anchor: "row9", align: HorizontalAlign.Start },top: { anchor: "row7", align: VerticalAlign.Top }}).id("row8")Row() {Text('row9')}.justifyContent(FlexAlign.Center).width(80).height(80).backgroundColor('#0a59f7').alignRules({left: { anchor: "row8", align: HorizontalAlign.End },right: { anchor: "__container__", align: HorizontalAlign.End },top: { anchor: "row7", align: VerticalAlign.Top }}).id("row9")}.width(300).height(300).margin({ left: 50 }).border({ width: 2, color: "#6699FF" })}.height('100%')}
}

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

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

相关文章

Linux命令的命令历史

Linux命令的命令历史

Linux下history命令可以对当前系统中执行过的所有shell命令进行显示。重复执行命令历史中的某个命令&#xff0c;使用&#xff1a;!命令编号&#xff1b;环境变量histsize的值保存历史命令记录的总行数&#xff1b;可用echo查看一下&#xff1b;需要大写&#xff1b;环境变量hi…
阅读更多...
【C++小白逆袭】内存管理从崩溃到精通的秘籍

【C++小白逆袭】内存管理从崩溃到精通的秘籍

目录【C小白逆袭】内存管理从崩溃到精通的秘籍前言&#xff1a;为什么内存管理让我掉了N根头发&#xff1f;内存四区大揭秘&#xff1a;你的变量都住在哪里&#xff1f;&#x1f3e0;内存就像大学宿舍区 &#x1f3d8;️C语言的内存管理&#xff1a;手动搬砖时代 &#x1f9f1;…
阅读更多...
【网络安全】利用 Cookie Sandwich 窃取 HttpOnly Cookie

【网络安全】利用 Cookie Sandwich 窃取 HttpOnly Cookie

未经许可，不得转载。 文章目录 引言Cookie 三明治原理解析Apache Tomcat 行为Python 框架行为窃取 HttpOnly 的 PHPSESSID Cookie第一步：识别 XSS 漏洞第二步：发现反射型 Cookie 参数第三步：通过 Cookie 降级实现信息泄露第四步：整合攻击流程修复建议引言 本文将介绍一种…
阅读更多...
【工具】什么软件识别重复数字？

【工具】什么软件识别重复数字？

网上的数字统计工具虽多&#xff0c;但处理重复数字时总有点不尽如人意。 要么只能按指定格式输入&#xff0c;要么重时得手动一点点筛&#xff0c;遇上数据量多的情况&#xff0c;光是找出重复的数字就得另外花不少功夫。​ 于是我做了个重复数字统计器&#xff0c;不管是零…
阅读更多...
CSS分层渲染与微前端2.0：解锁前端性能优化的新维度

CSS分层渲染与微前端2.0：解锁前端性能优化的新维度

CSS分层渲染与微前端2.0&#xff1a;解锁前端性能优化的新维度 当你的页面加载时间超过3秒&#xff0c;用户的跳出率可能飙升40%以上。这并非危言耸听&#xff0c;而是残酷的现实。在当前前端应用日益复杂、功能日益臃肿的“新常态”下&#xff0c;性能优化早已不是锦上添花的“…
阅读更多...
AI Agent开发学习系列 - langchain之Chains的使用(5)：Transformation

AI Agent开发学习系列 - langchain之Chains的使用(5)：Transformation

Transformation&#xff08;转换链&#xff09;是 LangChain 中用于“自定义数据处理”的链式工具&#xff0c;允许你在链路中插入任意 Python 代码&#xff0c;对输入或中间结果进行灵活处理。常用于&#xff1a; 对输入/输出做格式化、过滤、摘要、拆分等自定义操作作为 LLMC…
阅读更多...
Druid 连接池使用详解

Druid 连接池使用详解

Druid 连接池使用详解 一、Druid 核心优势与架构 1. Druid 核心特性 特性说明价值监控统计内置 SQL 监控/防火墙实时查看 SQL 执行情况防 SQL 注入WallFilter 防御机制提升系统安全性加密支持数据库密码加密存储符合安全审计要求扩展性强Filter 链式架构自定义功能扩展高性能…
阅读更多...
9.2 埃尔米特矩阵和酉矩阵

9.2 埃尔米特矩阵和酉矩阵

一、复向量的长度 本节的主要内容可概括为&#xff1a;当对一个复向量 z\pmb zz 或复矩阵 A\pmb AA 转置后&#xff0c;还要取复共轭。 不能在 zTz^TzT 或 ATA^TAT 时就停下来&#xff0c;还要对所有的虚部取相反的符号。对于一个分量为 zjajibjz_ja_jib_jzj​aj​ibj​ 的列向…
阅读更多...
AI驱动的低代码革命：解构与重塑开发范式

AI驱动的低代码革命：解构与重塑开发范式

引言&#xff1a;低代码平台的范式转移 当AI技术与低代码平台深度融合&#xff0c;软件开发正经历从"可视化编程"到"意图驱动开发"的根本性转变。这种变革不仅提升了开发效率&#xff0c;更重新定义了人与系统的交互方式。本文将从AI介入的解构层次、交互范…
阅读更多...
zookeeper etcd区别

zookeeper etcd区别

ZooKeeper与etcd的核心区别体现在设计理念、数据模型、一致性协议及适用场景等方面。‌ZooKeeper基于ZAB协议实现分布式协调&#xff0c;采用树形数据结构和临时节点特性&#xff0c;适合传统分布式系统&#xff1b;而etcd基于Raft协议&#xff0c;以高性能键值对存储为核心&am…
阅读更多...
模拟注意力：少量参数放大 Attention 表征能力

模拟注意力：少量参数放大 Attention 表征能力

论文标题 SAS: Simulated Attention Score 论文地址 https://arxiv.org/pdf/2507.07694 代码 见论文附录 作者背景 摩根士丹利&#xff0c;斯坦福大学&#xff0c;微软研究院&#xff0c;新加坡国立大学&#xff0c;得克萨斯大学奥斯汀分校&#xff0c;香港大学 动机 …
阅读更多...
零基础|宝塔面板|frp内网穿透|esp32cam远程访问|微信小程序

零基础|宝塔面板|frp内网穿透|esp32cam远程访问|微信小程序

1.准备好阿里云服务器和宝塔面板2.安装frp服务端3.测试(密码账号在详情里面)4.配置客户端#一、没有域名情况下 [common] server_addr #公网ip地址&#xff0c;vps server_port 7000 服务的bind_port token 12121212 [httpname] type tcp # 没有域名情况下使用 tcp local_i…
阅读更多...
Spring Boot整合MyBatis+MySQL+Redis单表CRUD教程

Spring Boot整合MyBatis+MySQL+Redis单表CRUD教程

Spring Boot整合MyBatisMySQLRedis单表CRUD教程 环境准备 1. Redis安装&#xff08;Windows&#xff09; # 下载Redis for Windows # 访问: https://github.com/tporadowski/redis/releases # 下载Redis-x64-5.0.14.1.msi并安装# 启动Redis服务 redis-server# 测试连接 redis-c…
阅读更多...
linux学习第30天（线程同步和锁）

linux学习第30天（线程同步和锁）

线程同步协同步调&#xff0c;对公共区域数据按序访问。防止数据混乱&#xff0c;产生与时间有关的错误。数据混乱的原因资源共享(独享资源则不会)调度随机(意味着数据访问会出现竞争)线程间缺乏必要同步机制锁的使用建议锁&#xff01;对公共数据进行保护。所有线程【应该】在…
阅读更多...
JavaScript中的系统对话框：alert、confirm、prompt

JavaScript中的系统对话框：alert、confirm、prompt

JavaScript中的系统对话框&#xff1a;alert、confirm、prompt 在Web开发的世界里&#xff0c;JavaScript始终扮演着“桥梁”的角色——它连接用户与网页&#xff0c;让静态的页面焕发活力。而在这座桥梁上&#xff0c;系统对话框&#xff08;System Dialogs&#xff09;是最基…
阅读更多...
圆幂定理深度探究——奥数专题讲义

圆幂定理深度探究——奥数专题讲义

圆幂定理深度探究——奥数专题讲义 开篇语&#xff1a;几何中的"隐藏等式" 在平面几何的星空中&#xff0c;圆与直线的交点仿佛散落的珍珠&#xff0c;而连接这些珍珠的线段之间&#xff0c;藏着一组令人惊叹的等量关系。当我们用直尺测量、用逻辑推导时&#xff0c;…
阅读更多...
一文看懂显示接口：HDMI / DP / VGA / USB-C 有什么区别？怎么选？

一文看懂显示接口：HDMI / DP / VGA / USB-C 有什么区别？怎么选？

刚买的新显示器&#xff0c;插上线却发现画面糊成马赛克&#xff1f;游戏打到关键时刻突然黑屏&#xff1f;4K电影看着看着就卡顿&#xff1f;别急&#xff01;这些问题很可能都是"接口没选对"惹的祸&#xff01;今天我们就来彻底搞懂HDMI、DP、VGA、USB-C这些常见的…
阅读更多...
【ARM嵌入式汇编基础】- 操作系统基础（二）

【ARM嵌入式汇编基础】- 操作系统基础（二）

操作系统基础（二） 文章目录 操作系统基础（二）6、线程7、进程内存管理8、内存页9、内存保护10、匿名内存和内存映射内存11、内存映射文件和模块6、线程 程序首次启动时，会创建一个新进程，并为该程序分配一个线程。该初始线程负责初始化进程并最终调用程序中的主函数。多线…
阅读更多...
C#调用Matlab生成的DLL

C#调用Matlab生成的DLL

C#调用Matlab生成的DLL 1.Matlab生成DLL文件1.1准备脚本文件1.2.输出DLL文件2.Winform项目中调用DLL2.1.创建Winform项目2.2.添加引用2.3.调用DLL2.3.1. 方法12.3.2. 方法22.4.配置CPU3.运行测试4.缺点1.Matlab生成DLL文件 1.1准备脚本文件 在Matlab环境下创建脚本文件calcul…
阅读更多...
Julia爬取数据能力及应用场景

Julia爬取数据能力及应用场景

Julia 是一种高性能编程语言&#xff0c;特别适合数值计算和数据分析。然而&#xff0c;关于数据爬取&#xff08;即网络爬虫&#xff09;方面&#xff0c;我们需要明确以下几点&#xff1a;虽然它是一门通用编程语言&#xff0c;但它的强项不在于网络爬取&#xff08;Web Scra…
阅读更多...
最新文章

Copyright @ 2022~2023