8、鴻蒙Harmony Next開發：相對布局 (RelativeContainer)

目錄

概述

基本概念

設置依賴關系

設置參考邊界

設置錨點

設置相對于錨點的對齊位置

子組件位置偏移

多種組件的對齊布局

組件尺寸

多個組件形成鏈

概述

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