纯血鸿蒙ArkUI线性布局详解

线性布局说明

线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定,Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。根据不同的排列方向,开发者可选择使用Row或Column容器创建线性布局。

Column容器内子元素排列示意图

Row容器内子元素排列示意图

基础概念

  • 布局容器:具有布局能力的容器组件,可以承载其他元素作为其子元素,布局容器会对其子元素进行尺寸计算和布局排列。

  • 布局子元素:布局容器内部的元素。

  • 主轴:线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row容器主轴为水平方向,Column容器主轴为垂直方向。

  • 交叉轴:垂直于主轴方向的轴线。Row容器交叉轴为垂直方向,Column容器交叉轴为水平方向。

  • 间距:布局子元素的间距。

布局子元素在排列方向上的间距

在布局容器内,可以通过space属性设置排列方向上子元素的间距,使各子元素在排列方向上有等间距效果。

Column容器内排列方向上的间距

Column容器内排列方向的间距图

@Entry
@Component
struct LinearLayout {build() {// Column容器组件默认情况下在垂直方向从上向下对子组件进行布局// space的值设置为20,表示子组件之间的距离为20vpColumn({ space: 20 }) {Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')Row().width('90%').height(50).backgroundColor(0xF5DEB3)Row().width('90%').height(50).backgroundColor(0xD2B48C)Row().width('90%').height(50).backgroundColor(0xF5DEB3)}.width('100%')}
}

Row容器内排列方向上的间距

Row容器内排列方向的间距图

@Entry
@Component
struct LinearLayout {build() {// 默认情况下,Row对子组件在水平方向上从左向右布局// space设置为35表示子组件之间在主轴方向上间距为35vpRow({ space: 35 }) {Text('space: 35').fontSize(15).fontColor(Color.Gray)Row().width('10%').height(150).backgroundColor(0xF5DEB3)Row().width('10%').height(150).backgroundColor(0xD2B48C)Row().width('10%').height(150).backgroundColor(0xF5DEB3)}.width('90%')}
}

布局子元素在交叉轴上的对齐方式

在布局容器内,可以通过alignItems属性设置子元素在交叉轴(排列方向的垂直方向)上的对齐方式。且在各类尺寸屏幕中,表现一致。其中,交叉轴为垂直方向时,取值为VerticalAlign类型,水平方向取值为HorizontalAlign类型。

alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式,其优先级高于alignItems属性,如果设置了alignSelf属性,则在单个子元素上会覆盖alignItems属性。

Column容器内子元素在水平方向上的排列

Column容器内子元素在水平方向上的排列图1

1. HorizontalAlign.Start:子元素在水平方向左对齐。

@Entry
@Component
struct LinearLayout03 {build() {// 列容器组件默认情况下对子组件从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%')// 设置列容器组件子元素在水平方向左对齐.alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')}
}

2. HorizontalAlign.Center:子元素在水平方向居中对齐。

@Entry
@Component
struct LinearLayout04 {build() {// 列容器组件默认情况下对子组件在垂直方向从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%')// 设置列容器组件子组件在水平方向居中对齐.alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')}
}

3. HorizontalAlign.End:子元素在水平方向右对齐。

@Entry
@Component
struct LinearLayout05 {build() {// 列容器组件默认情况下对子组件在垂直方向从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%')// 设置列容器组件的子组件在水平方向右对齐.alignItems(HorizontalAlign.End).backgroundColor('rgb(242,242,242)')}
}

Row容器内子元素在垂直方向上的排列

Row容器内子元素在垂直方向上的排列图

1. VerticalAlign.Top:子元素在垂直方向顶部对齐。

@Entry
@Component
struct LinearLayout06 {build() {// 行容器组件默认情况下对子组件在水平方向从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200)// 设置行容器子组件在垂直方向顶部对齐.alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')}
}

2. VerticalAlign.Center:子元素在垂直方向居中对齐。

@Entry
@Component
struct LinearLayout07 {build() {// 行容器组件默认情况下对子组件在水平方向从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200)// 设置行容器组件的子组件在垂直方向居中对齐.alignItems(VerticalAlign.Center).backgroundColor('rgb(242,242,242)')}
}

3. VerticalAlign.Bottom:子元素在垂直方向底部对齐。

@Entry
@Component
struct LinearLayout08 {build() {// 行容器组件默认情况下对子组件在水平方向上从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200)// 设置行容器组件的子组件在垂直方向上底部对齐.alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')}
}

布局子元素在主轴上的排列方式

在布局容器内,可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布,也可以从主轴结束位置开始排布,或者均匀分割主轴的空间。

Column容器内子元素在垂直方向上的排列

Column容器内子元素在垂直方向上的排列图

1. justifyContent(FlexAlign.Start):元素在垂直方向顶部对齐,第一个元素与顶部对齐,后续元素与前一个对齐。

@Entry
@Component
struct LinearLayout09 {build() {// 列容器组件默认情况下对子组件在垂直方向从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%').height(300).backgroundColor('rgb(242,242,242)')// 设置列容器组件子组件在垂直方向顶部对齐,第一个元素与顶部对齐,后续元素与前一个对齐。.justifyContent(FlexAlign.Start)}
}

2. justifyContent(FlexAlign.Center):元素在垂直方向中心对齐,第一个元素与顶部的距离与最后一个元素与底部距离相同。

@Entry
@Component
struct LinearLayout10 {build() {// 列容器组件默认情况下对子组件在垂直方向上从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%').height(300).backgroundColor('rgb(242,242,242)')// 设置列容器子组件在垂直方向中心对齐,第一个元素与顶部的距离与最后一个元素与底部距离相同。.justifyContent(FlexAlign.Center)}
}

3. justifyContent(FlexAlign.End):元素在垂直方向底部对齐,最后一个元素与底部对齐,其他元素与后一个对齐。

@Entry
@Component
struct LinearLayout11 {build() {// 列容器组件默认情况下对子组件在垂直方向上从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%').height(300).backgroundColor('rgb(242,242,242)')// 设置列容器子组件在垂直方向底部对齐,最后一个元素与底部对齐,其他元素与后一个对齐。.justifyContent(FlexAlign.End)}
}

4. justifyContent(FlexAlign.SpaceBetween):垂直方向均匀分配元素,相邻元素之间距离相同。第一个元素与容器顶部对齐,最后一个元素与容器底部对齐。

@Entry
@Component
struct LinearLayout12 {build() {// 列容器组件默认情况下对子组件在垂直方向从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%').height(300).backgroundColor('rgb(242,242,242)')// 垂直方向均匀分配元素,相邻元素之间距离相同。第一个元素与容器顶部对齐,最后一个元素与容器底部对齐。.justifyContent(FlexAlign.SpaceBetween)}
}

5. justifyContent(FlexAlign.SpaceAround):垂直方向均匀分配元素,相邻元素之间距离相同。第一个元素到容器顶部的距离和最后一个元素到容器底部的距离是相邻元素之间距离的一半。

@Entry
@Component
struct LinearLayout13 {build() {// 列容器组件默认情况下对子组件在垂直方向从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%').height(300).backgroundColor('rgb(242,242,242)')// 设置列容器组件子组件垂直方向均匀分配元素,相邻元素之间距离相同。// 第一个元素到容器顶部的距离和最后一个元素到容器底部的距离是相邻元素之间距离的一半。.justifyContent(FlexAlign.SpaceAround)}
}

6. justifyContent(FlexAlign.SpaceEvenly):垂直方向均匀分配元素,相邻元素之间的距离、第一个元素与容器顶部的间距、最后一个元素到容器底部的间距都完全一样。

@Entry
@Component
struct LinearLayout14 {build() {// 列容器组件默认情况下对子组件在垂直方向上并从上向下布局Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)}.width('100%').height(300).backgroundColor('rgb(242,242,242)')// 设置列容器子组件垂直方向均匀分配元素,// 相邻元素之间的距离、第一个元素与容器顶部的间距、最后一个元素到容器底部的间距都完全一样。.justifyContent(FlexAlign.SpaceEvenly)}
}

Row容器内子元素在水平方向上的排列

Row容器内子元素在水平方向上的排列图

1. ustifyContent(FlexAlign.Start):元素在水平方向左对齐,第一个元素与容器左侧对齐,同时后续的元素与前一个对齐。

@Entry
@Component
struct LinearLayout15 {build() {// 行容器组件默认情况下对子组件在水平方向上从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200).backgroundColor('rgb(242,242,242)')// 设置行容器组件的子组件在水平方向左对齐,第一个元素与容器左侧对齐,同时后续的元素与前一个对齐。.justifyContent(FlexAlign.Start)}
}

2. justifyContent(FlexAlign.Center):元素在水平方向居中对齐,第一个元素与容器左侧的距离与最后一个元素与容器右侧距离相同。

@Entry
@Component
struct LinearLayout16 {build() {// 行容器组件默认情况下对子组件在水平方向从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200).backgroundColor('rgb(242,242,242)')// 设置行容器子组件在水平方向居中对齐,第一个元素与容器左侧的距离与最后一个元素与容器右侧距离相同。.justifyContent(FlexAlign.Center)}
}

3. justifyContent(FlexAlign.End):元素在水平方向右对齐,最后一个元素与行容器右侧对齐,其他元素与后一个对齐。

@Entry
@Component
struct LinearLayout17 {build() {// 行容器组件默认情况下对子组件在水平方向从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200).backgroundColor('rgb(242,242,242)')// 设置行容器子组件在水平方向右对齐,最后一个元素与行容器右侧对齐,其他元素与后一个对齐。.justifyContent(FlexAlign.End)}
}

4. justifyContent(FlexAlign.SpaceBetween):水平方向均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。

@Entry
@Component
struct LinearLayout18 {build() {// 行容器组件默认情况下对子组件在水平方向从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200).backgroundColor('rgb(242,242,242)')// 设置行容器子组件水平方向均匀分配元素,// 相邻元素之间距离相同。第一个元素与容器左侧对齐,最后一个元素与容器右侧对齐。.justifyContent(FlexAlign.SpaceBetween)}
}

5. justifyContent(FlexAlign.SpaceAround):水平方向均匀分配元素,相邻元素之间距离相同。第一个元素到行容器左侧的距离和最后一个元素到行容器右侧的距离是相邻元素之间距离的一半。

@Entry
@Component
struct LinearLayout19 {build() {// 行容器组件默认情况下对子组件在水平方向从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200).backgroundColor('rgb(242,242,242)')// 设置行容器子组件水平方向均匀分配元素,相邻元素之间距离相同。// 第一个元素到行容器左侧的距离和最后一个元素到行容器右侧的距离是相邻元素之间距离的一半。.justifyContent(FlexAlign.SpaceAround)}
}

6. justifyContent(FlexAlign.SpaceEvenly):水平方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

@Entry
@Component
struct LinearLayout20 {build() {// 行容器组件默认情况下对子组件在水平方向从左向右布局Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)}.width('100%').height(200).backgroundColor('rgb(242,242,242)')// 设置行容器子组件在水平方向均匀分配元素,// 相邻元素之间的距离、第一个元素与容器左侧的间距、最后一个元素到容器右侧的间距都完全一样。.justifyContent(FlexAlign.SpaceEvenly)}
}

自适应拉伸

在线性布局下,常用空白填充组件Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果。Row和Column作为容器,只需要添加宽高为百分比,当屏幕宽高发生变化时,会产生自适应效果。

@Entry
@Component
struct LinearLayout21 {build() {// 列容器组件默认情况下对子组件在垂直方向从上向下布局Column() {Row() {Text('Bluetooth').fontSize(18)// 空白填充组件Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果Blank()Toggle({ type: ToggleType.Switch, isOn: true })}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')}.backgroundColor(0xEFEFEF).padding(20).width('100%')}
}

竖屏

横屏

自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸,适应各种不同大小的设备。在线性布局中,可以使用以下两种方法实现自适应缩放。

1. 父容器尺寸确定时,使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重,忽略元素本身尺寸设置,使它们在任意尺寸的设备下自适应占满剩余空间。

横屏

竖屏

2. 父容器尺寸确定时,使用百分比设置子元素和兄弟元素的宽度,使他们在任意尺寸的设备下保持固定的自适应占比。

@Entry
@Component
struct WidthExample {build() {Column() {Row() {Column() {Text('left width 20%').textAlign(TextAlign.Center)}.width('20%').backgroundColor(0xF5DEB3).height('100%')Column() {Text('center width 50%').textAlign(TextAlign.Center)}.width('50%').backgroundColor(0xD2B48C).height('100%')Column() {Text('right width 30%').textAlign(TextAlign.Center)}.width('30%').backgroundColor(0xF5DEB3).height('100%')}.backgroundColor(0xffd306).height('30%')}}
}

横屏

竖屏

自适应延伸

自适应延伸是指在不同尺寸设备下,当页面的内容超出屏幕大小而无法完全显示时,可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。

  • 在List中添加滚动条:当List子项目过多一屏放不下时,可以将每一个子元素放置在不同的组件中,通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态,edgeEffect属性设置拖动到内容最末端的回弹效果。

  • 使用Scroll组件:在线性布局中,开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时,可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。

    垂直方向布局中使用Scroll组件:

  • @Entry
    @Component
    struct ScrollExample {scroller: Scroller = new Scroller();private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];build() {Scroll(this.scroller) {Column() {ForEach(this.arr, (item?:number|undefined) => {if(item){Text(item.toString()).width('90%').height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({ top: 10 })}}, (item:number) => item.toString())}.width('100%')}.backgroundColor(0xDCDCDC).scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向    .scrollBar(BarState.On) // 滚动条常驻显示  .scrollBarColor(Color.Gray) // 滚动条颜色  .scrollBarWidth(10) // 滚动条宽度  .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹 }
    }

水平方向布局中使用Scroll组件:

@Entry
@Component
struct ScrollExample {scroller: Scroller = new Scroller();private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];build() {Scroll(this.scroller) {Row() {ForEach(this.arr, (item?:number|undefined) => {if(item){Text(item.toString()).height('90%').width(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(100).textAlign(TextAlign.Center).margin({ left: 10 })}})}.height('100%')}.backgroundColor(0xDCDCDC).scrollable(ScrollDirection.Horizontal) // 滚动方向为水平方向   .scrollBar(BarState.On) // 滚动条常驻显示    .scrollBarColor(Color.Gray) // 滚动条颜色   .scrollBarWidth(10) // 滚动条宽度   .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹 }
}

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

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

相关文章

Debian-linux运维-docker安装和配置

腾讯云搭建docker官方文档:https://cloud.tencent.com/document/product/213/46000 阿里云安装Docker官方文档:https://help.aliyun.com/zh/ecs/use-cases/install-and-use-docker-on-a-linux-ecs-instance 天翼云常见docker源配置指导:htt…

【网络安全实验室】脚本关实战详情

难道向上攀爬的那条路,不是比站在顶峰更让人热血澎湃吗 1.key又又找不到了 点击链接,burp抓包,发送到重放模块,点击go 得到key 2.快速口算 python3脚本 得到key 3.这个题目是空的 试了一圈最后发现是 4.怎么就是不弹出key呢…

极品飞车6的游戏手柄设置

极品飞车,既可以用键盘来控制车辆的前进、后退、左转、右转、加速与减速,也可以使用游戏手柄来操作车辆的运行。需要注意的是,极品飞车虽然支持手柄,但是仅支持常见的北通、罗技还有部分Xbox系列的手柄,至于其他的PS4手…

安科瑞防孤岛保护装置助力光储充系统安全运行

安科瑞 吕梦怡 ​1.孤岛效应是指在电网供电系统中出现的一种异常情况。 当公共电网因故障停电或者其他原因断电时,原本接入电网的分布式发电系统(如太阳能电站、风力发电场)如果没有及时与电网断开,就会继续向其周围的一部分用电…

联通 路由器 创维SK-WR9551X 联通华盛VS010 组mesh 和 锐捷X32 PRO 无缝漫游

前言 联通路由器:联通创维SK-WR9551X,联通华盛VS010组mesh,并与锐捷X32 PRO混合组网,开启无限漫游。 1、mesh ≠ 无缝漫游 mesh是实现路由器快速组网的一种方式,通过mesh组网后可以实现无缝漫游。 mesh组网的设备要…

Druid连接Oracle数据库,连接失效导致SQL无法执行

原始配置: type: com.alibaba.druid.pool.DruidDataSource druid:initial-size: 5max-active: 25min-idle: 5max-wait: 10000testWhileIdle: truetestOnBorrow: falsetestOnReturn: falsetimeBetweenEvictionRunsMillis: 2000minEvictableIdleTimeMillis: 600000ma…

JVM调优(内存、GC、JVM参数)

内存调优 常用监控工具 Top命令 top命令是linux下用来查看系统信息的一个命令,它提供给我们去实时地去查看系统的资源,比如执行时的进程、线程和系统参数等信息。进程使用的内存为RES(常驻内存)- SHR(共享内存&…

Cursor登录按钮点击没反应

问题 系统:Windows11 Cursor:Cursor 0.44.9 当安装Cursor打开进行登录时,点击Sign in没反应 解决方案 1.打开window11的设置 2.点击应用中的默认应用 3.在设置应用程序的默认值中搜索Google(没有Google浏览器的尝试下载一个&a…

强化学习(1)

Reinforcement Learning Goal-directed learing from ineraction with the environment. 1. Basic Element 基本元素 1.1 Agent 玩家 1.2 Environment 1.3 Goal 2. Main Element 主要元素 2.1 State 2.2 Action 状态与行为往复 2.3 Reward 目标:最大化总…

异步请求在TypeScript网络爬虫中的应用

异步请求的重要性 异步请求是现代网络应用中不可或缺的一部分,特别是在网络爬虫领域。它允许爬虫在等待网络响应的同时继续执行其他任务,从而提高效率和性能。在JavaScript和TypeScript中,异步请求可以通过多种方式实现,包括回调…

OpenLinkSaas使用手册-项目外部资源管理

在软件项目开发过程中,会依赖很多外部系统,比如服务器,代码仓库,CI/CD,构件仓库等等。 OpenLinkSaas可以在右侧工具栏中的服务列表中,添加这些外部资源。 进入外部服务列表 代码仓库 一个软件项目可能会…

自建私有云相册:Docker一键部署Immich,照片视频备份利器

自建私有云相册:Docker一键部署Immich,照片视频备份利器 前言 随着人们手机、PC、平板等电子产品多样,我们拍摄和保存的照片和视频数量也在不断增加。如何高效地管理和备份这些珍贵的记忆成为了一个重要的问题。 传统的云备份虽然方便&…

ArcGIS教程(009):ArcGIS制作校园3D展示图

文章目录 数据下载校园3D展示图制作创建要素类矢量化【楼】要素矢量化【绿地】矢量化【范围】矢量化处理打开ArcScene添加动画数据下载 https://download.csdn.net/download/WwLK123/90189025校园3D展示图制作 创建要素类 添加底图: 新建【文件地理数据库】,并修改名称为【…

Windows安装了pnpm后无法在Vscode中使用

Windows安装了pnpm后无法在Vscode中使用 解决方法: 以管理员身份打开 PowerShell 并执行以下命令后输入Y回车即可。 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser之后就可以正常使用了

OpenHarmony源码编译后烧录镜像教程,RK3566鸿蒙开发板演示

本文介绍瑞芯微主板/开发板编译OpenHarmony源码后烧录镜像的教程,触觉智能Purple Pi OH鸿蒙开发板演示。搭载了瑞芯微RK3566四核处理器,树莓派卡片电脑设计,支持开源鸿蒙OpenHarmony3.2-5.0系统,适合鸿蒙开发入门学习。 编译源码…

【MATLAB APP Designer】小波阈值去噪(第一期)

代码原理及流程 小波阈值去噪是一种信号处理方法,用于从信号中去除噪声。这种方法基于小波变换,它通过将信号分解到不同的尺度和频率上来实现。其基本原理可以分为以下几个步骤: (1)小波变换:首先对含噪信…

关于埃斯顿机器人指令含义

等待一组数字量输入指令,用于多个输入数字量的指示! DO8421(9.17.0)该指令含义为将9-17端口的虚信号输出为0 (图1) (CALL指令) 子程序调用指令,用于程序中调用子程序 (SetSimDO指令) 设置虚拟数字量输出指令,用于程序中设置虚…

Mac 环境 VVenC 编译与编码命令行工具使用教程

VVenC VVenC 是一个开源的高效视频编码器,专门用于支持 H.266/VVC (Versatile Video Coding) 标准的编码。H.266/VVC 是继 HEVC (H.265) 之后的新一代视频编码标准,主要目的是提供比 HEVC 更高的压缩效率,同时保持或提高视频质量。H.266/VVC…

html+css+js网页设计 美食 家美食1个页面

htmlcssjs网页设计 美食 家美食1个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#xf…

【发票提取明细+发票号改名】批量提取PDF电子发票明细导出Excel表格并改名技术难点,批量PDF多区域内容识别提取明细并用内容改名的小结

1、图片版的发票提取表格改名 【批量图片发票识别表格】批量图片发票的提取Excel表格和提取字段改名,扫描发票识别表格,拍照发票识别表格,图片发票识别改名我们在工作中很多扫描发票,拍照发票,需要整理成excel表格&am…