【纯血鸿蒙】——自适应布局如何实现？

界面级一多能力有 2 类：

  1. 自适应布局: 略微调整界面结构

  2. 响应式布局：比较大的界面调整

img

img

img

  • 本文章先主要讲解自适应布局，响应式布局再后面文章再细讲。话不多说，开始了。

自适应布局

针对常见的开发场景，方舟开发框架提炼了七种自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。

自适应布局类别自适应布局能力使用场景实现方式
自适应拉伸拉伸能力容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。Flex布局的flexGrow和flexShrink属性
均分能力容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。Row组件、Column组件或Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly
自适应缩放占比能力子组件的宽或高按照预设的比例，随容器组件发生变化。基于通用属性的两种实现方式： - 将子组件的宽高设置为父组件宽高的百分比 - layoutWeight属性
缩放能力子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。布局约束的aspectRatio属性
自适应延伸延伸能力容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。基于容器组件的两种实现方式： - 通过List组件实现 - 通过Scroll组件配合Row组件或Column组件实现
隐藏能力容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏。布局约束的displayPriority属性
自适应折行折行能力容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容，自动换行。Flex组件的wrap属性设置为FlexWrap.Wrap

下面我们依次介绍这几种自适应布局能力。

1. 拉伸能力

拉伸能力是指容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。

拉伸能力通常通过Flex布局中的flexGrow和flexShrink属性实现，flexGrow和flexShink属性常与flexBasis属性搭配使用，故将这三个属性放在一起介绍。

属性类型默认值描述
flexGrownumber0仅当父容器宽度大于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例拉伸，分配父容器的多余空间。
flexShrinknumber1仅当父容器宽度小于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例收缩，分配父容器的不足空间。
flexBasisauto | Lengthauto设置组件在Flex容器中主轴方向上基准尺寸。'auto’意味着使用组件原始的尺寸，不做修改。 flexBasis属性不是必须的，通过width或height也可以达到同样的效果。当flexBasis属性与width或height发生冲突时，以flexBasis属性为准。

说明：

  • 开发者期望将父容器的剩余空间全部分配给某空白区域时，也可以通过Blank组件实现。注意仅当父组件为Row\Column\Flex组件时，Blank组件才会生效。

  • 类Web开发范式也是通过flex-grow和flex-shrink实现拉伸能力，同时也支持配置flex-basis，详见通用样式。

  • 类Web开发范式没有提供blank组件，但可以通过div组件模拟blank组件的行为，如“<div style=‘flex-grow: 1; flex-shrink: 0; flex-basis: 0’></div>”。

示例1

本示例中的页面由中间的内容区（包含一张图片）以及两侧的留白区组成，各区域的属性配置如下。

  • 中间内容区的宽度设置为400vp，同时将flexGrow属性设置为1，flexShrink属性设置为0。

  • 两侧留白区的宽度设置为150vp，同时将flexGrow属性设置为0，flexShrink属性设置为1。

由上可知，父容器的基准尺寸是700vp（150vp+400vp+150vp）。

可以通过拖动底部的滑动条改变父容器的尺寸，查看布局变化。

  • 当父容器的尺寸大于700vp时，父容器中多余的空间全部分配给中间内容区。

  • 当父容器的尺寸小于700vp时，左右两侧的留白区按照“1:1”的比例收缩（即平均分配父容器的不足空间）。

@Entry
@Component
struct FlexibleCapabilitySample1 {@State containerWidth: number = 402
​// 底部滑块，可以通过拖拽滑块改变容器尺寸。@Builder slider() {Slider({ value: this.containerWidth, min: 402, max: 1000, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').onChange((value: number) => {this.containerWidth = value;}).position({ x: '20%', y: '80%' })}
​build() {Column() {Column() {Row() {// 通过flexGrow和flexShrink属性，将多余的空间全部分配给图片，将不足的控件全部分配给两侧空白区域。Row().width(150).height(400).backgroundColor('#FFFFFF').flexGrow(0).flexShrink(1)Image($r("app.media.illustrator")).width(400).height(400).objectFit(ImageFit.Contain).backgroundColor("#66F1CCB8").flexGrow(1).flexShrink(0)Row().width(150).height(400).backgroundColor('#FFFFFF').flexGrow(0).flexShrink(1)}.width(this.containerWidth).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)}
​this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

示例2

文字和开关的尺寸固定，仅有中间空白区域（Blank组件）随父容器尺寸变化而伸缩。

@Entry
@Component
struct FlexibleCapabilitySample2 {@State rate: number = 0.8
​// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: this.rate * 100, min: 30, max: 80, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').onChange((value: number) => {this.rate = value / 100;}).position({ x: '20%', y: '80%' })}
​build() {Column() {Column() {Row() {Text('飞行模式').fontSize(16).width(135).height(22).fontWeight(FontWeight.Medium).lineHeight(22)Blank()      // 通过Blank组件实现拉伸能力Toggle({ type: ToggleType.Switch }).width(36).height(20)}.height(55).borderRadius(12).padding({ left: 13, right: 13 }).backgroundColor('#FFFFFF').width(this.rate * 100 + '%')}
​this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

2. 均分能力

均分能力是指容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。它常用于内容数量固定、均分显示的场景，比如工具栏、底部菜单栏等。

均分能力可以通过将Row组件、Column组件或Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly实现，即子元素在父容器主轴方向等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

说明：

  • 均分能力还可以通过其它方式实现，如使用Grid网格组件或在每个组件间添加Blank组件等。

  • 类Web开发范式中，通过将div组件的justify-content属性设置为space-evenly来实现均分布局。

示例：

父容器尺寸变化过程中，图标及文字的尺寸不变，图标间的间距及图标离左右边缘的距离同时均等改变。


@Entry
@Component
struct EquipartitionCapabilitySample {readonly list: number [] = [0, 1, 2, 3]@State rate: number = 0.6
​// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: this.rate * 100, min: 30, max: 60, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').onChange((value: number) => {this.rate = value / 100}).position({ x: '20%', y: '80%' })}
​build() {Column() {Column() {// 均匀分配父容器主轴方向的剩余空间Row() {ForEach(this.list, (item:number) => {Column() {Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 })Text('App name').width(64).height(30).lineHeight(15).fontSize(12).textAlign(TextAlign.Center).margin({ top: 8 }).padding({ bottom: 15 })}.width(80).height(102).flexShrink(1)})}.width('100%').justifyContent(FlexAlign.SpaceEvenly)// 均匀分配父容器主轴方向的剩余空间Row() {ForEach(this.list, (item:number) => {Column() {Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 })Text('App name').width(64).height(30).lineHeight(15).fontSize(12).textAlign(TextAlign.Center).margin({ top: 8 }).padding({ bottom: 15 })}.width(80).height(102).flexShrink(1)})}.width('100%').justifyContent(FlexAlign.SpaceEvenly)}.width(this.rate * 100 + '%').height(222).padding({ top: 16 }).backgroundColor('#FFFFFF').borderRadius(16)
​this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

3. 占比能力

占比能力是指子组件的宽高按照预设的比例，随父容器组件发生变化。

占比能力通常有两种实现方式：

  • 将子组件的宽高设置为父组件宽高的百分比。

  • 通过layoutWeight属性配置互为兄弟关系的组件在父容器主轴方向的布局权重。

    • 当父容器尺寸确定时，其子组件按照开发者配置的权重比例分配父容器中主轴方向的空间。

    • 仅当父容器是Row、Column或者Flex时，layoutWeight属性才会生效。

    • 设置layoutWeight属性后，组件本身的尺寸会失效。比如同时设置了.width(‘40%’)和.layoutWeight(1)，那么只有.layoutWeight(1)会生效。

layoutWeight存在使用限制，所以实际使用过程中大多通过将子组件宽高设置为父组件的百分比来实现占比能力。

说明：

  • 占比能力在实际开发中使用的非常广泛，可以通过很多不同的方式实现占比能力，如还可以通过Grid组件的columnsTemplate属性设置网格容器中列的数量及其宽度比例，或通过配置子组件在栅格（本章后文将详细介绍栅格系统）中占据不同的列数来实现占比能力。

  • 类Web开发范式同样支持以百分比的形式设置组件的宽高。

  • 与声明式开发范式中的layoutWeight属性类似，类Web开发范式提供了flex-weight样式用于配置互为兄弟关系的组件在父容器主轴方向的布局权重。

示例：

简单的播放控制栏，其中“上一首”、“播放/暂停”、“下一首”的layoutWeight属性都设置为1，因此它们按照“1:1:1”的比例均分父容器主轴方向的空间。

将三个按钮的.layoutWeight(1)分别替换为.width(‘33%’)、.width(‘34%’)、.width(‘33%’)，也可以实现与当前同样的显示效果。

@Entry
@Component
struct ProportionCapabilitySample {@State rate: number = 0.5
​// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: 100, min: 25, max: 50, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').height(50).onChange((value: number) => {this.rate = value / 100}).position({ x: '20%', y: '80%' })}
​build() {Column() {Column() {Row() {Column() {Image($r("app.media.down")).width(48).height(48)}.height(96).layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
​Column() {Image($r("app.media.pause")).width(48).height(48)}.height(96).layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重.backgroundColor('#66F1CCB8').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
​Column() {Image($r("app.media.next")).width(48).height(48)}.height(96).layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}.width(this.rate * 100 + '%').height(96).borderRadius(16).backgroundColor('#FFFFFF')}
​this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

4. 缩放能力

缩放能力是指子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。

缩放能力通过使用百分比布局配合固定宽高比（aspectRatio属性）实现当容器尺寸发生变化时，内容自适应调整。

说明： 类Web开发范式同样提供了aspect-ratio样式固定比例，用于固定组件的宽高比。

示例：

为方便查看效果，示例中特意给Column组件加了边框。可以看到Column组件随着其Flex父组件尺寸变化而缩放的过程中，始终保持预设的宽高比，其中的图片也始终正常显示。

@Entry
@Component
struct ScaleCapabilitySample {@State sliderWidth: number = 400@State sliderHeight: number = 400
​// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: this.sliderWidth, min: 100, max: 400, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').height(50).onChange((value: number) => {this.sliderWidth = value;}).position({ x: '20%', y: '80%' })Slider({ value: this.sliderHeight, min: 100, max: 400, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').height(50).onChange((value: number) => {this.sliderHeight = value}).position({ x: '20%', y: '87%' })}
​build() {Column() {Column() {Column() {Image($r("app.media.illustrator")).width('100%').height('100%')}.aspectRatio(1)                           // 固定宽高比.border({ width: 2, color: "#66F1CCB8"})  // 边框，仅用于展示效果}.backgroundColor("#FFFFFF").height(this.sliderHeight).width(this.sliderWidth).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
​this.slider()}.width('100%').height('100%').backgroundColor("#F1F3F5").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

5. 延伸能力

延伸能力是指容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。它可以根据显示区域的尺寸，显示不同数量的元素。

延伸能力通常使用带有滚动功能的组件来实现：

  • 通过List组件实现。

  • 通过Scroll组件配合Row组件或Column组件实现。

  • 通过Grid组件，只设置行或只设置列也可以实现滚动，也能实现延伸。

说明：

  • List、Row或Column组件中子节点的在页面显示时就已经全部完成了布局计算及渲染，只不过受限于父容器尺寸，用户只能看到一部分。随着父容器尺寸增大，用户可以看到的子节点数目也相应的增加。用户还可以通过手指滑动触发列表滑动，查看被隐藏的子节点。

  • 类Web开发范式同样可以使用list组件实现延伸能力。

  • 类Web开发范式没有提供scroll组件，但可以将div组件的overflow样式设置为scroll（即div组件主轴方向上子元素的尺寸超过div组件本身的尺寸时进行滚动显示）来模拟scroll组件的行为。

示例：

当父容器的尺寸发生改变时，页面中显示的图标数量随之发生改变。

分别通过List组件实现及通过Scroll组件配合Row组件实现。

（1）通过List组件实现。

@Entry
@Component
struct ExtensionCapabilitySample1 {@State rate: number = 0.60readonly appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]
​// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').height(50).onChange((value: number) => {this.rate = value / 100}).position({ x: '20%', y: '80%' })}
​build() {Column() {Row({ space: 10 }) {// 通过List组件实现隐藏能力List({ space: 10 }) {ForEach(this.appList, (item:number) => {ListItem() {Column() {Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 })Text('App name').width(64).height(30).lineHeight(15).fontSize(12).textAlign(TextAlign.Center).margin({ top: 8 }).padding({ bottom: 15 })}.width(80).height(102)}.width(80).height(102)})}.padding({ top: 16, left: 10 }).listDirection(Axis.Horizontal).width('100%').height(118).borderRadius(16).backgroundColor(Color.White)}.width(this.rate * 100 + '%')
​this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

（2）通过Scroll组件配合Row组件实现。

@Entry
@Component
struct ExtensionCapabilitySample2 {private scroller: Scroller = new Scroller()@State rate: number = 0.60@State appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]
​// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').height(50).onChange((value: number) => {this.rate = value / 100;}).position({ x: '20%', y: '80%' })}
​build() {Column() {// 通过Scroll和Row组件实现隐藏能力Scroll(this.scroller) {Row({ space: 10 }) {ForEach(this.appList, () => {Column() {Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 })Text('App name').width(64).height(30).lineHeight(15).fontSize(12).textAlign(TextAlign.Center).margin({ top: 8 }).padding({ bottom: 15 })
​
​}.width(80).height(102)})}.padding({ top: 16, left: 10 }).height(118).borderRadius(16).backgroundColor(Color.White)}.scrollable(ScrollDirection.Horizontal).width(this.rate * 100 + '%')
​this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

6. 隐藏能力

隐藏能力是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。它是一种比较高级的布局方式，常用于分辨率变化较大，且不同分辨率下显示内容有所差异的场景。主要思想是通过增加或减少显示内容，来保持最佳的显示效果。

隐藏能力通过设置布局优先级（displayPriority属性）来控制显隐，当布局主轴方向剩余尺寸不足以满足全部元素时，按照布局优先级大小，从小到大依次隐藏，直到容器能够完整显示剩余元素。具有相同布局优先级的元素将同时显示或者隐藏。

说明： 类Web开发范式同样支持display-index样式，用于设置布局优先级。

示例：

父容器尺寸发生变化时，其子元素按照预设的优先级显示或隐藏。

@Entry
@Component
struct HiddenCapabilitySample {@State rate: number = 0.45
​// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: this.rate * 100, min: 10, max: 45, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').height(50).onChange((value: number) => {this.rate = value / 100}).position({ x: '20%', y: '80%' })}
​build() {Column() {Row() {Image($r("app.media.favorite")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(1)  // 布局优先级
​Image($r("app.media.down")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(2)  // 布局优先级
​Image($r("app.media.pause")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(3)  // 布局优先级
​Image($r("app.media.next")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(2)  // 布局优先级
​Image($r("app.media.list")).width(48).height(48).objectFit(ImageFit.Contain).margin({ left: 12, right: 12 }).displayPriority(1)  // 布局优先级}.width(this.rate * 100 + '%').height(96).borderRadius(16).backgroundColor('#FFFFFF').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)
​this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

7. 折行能力

折行能力是指容器组件尺寸发生变化，当布局方向尺寸不足以显示完整内容时自动换行。它常用于横竖屏适配或默认设备向平板切换的场景。

折行能力通过使用 Flex折行布局 （将wrap属性设置为FlexWrap.Wrap）实现，当横向布局尺寸不足以完整显示内容元素时，通过折行的方式，将元素显示在下方。

说明： 类Web开发范式通过将div组件的flex-warp样式设置为wrap来使用折行能力。

示例：

父容器中的图片尺寸固定，当父容器尺寸发生变化，其中的内容做自适应换行。

 

@Entry
@Component
struct WrapCapabilitySample {@State rate: number = 0.7readonly imageList: Resource [] = [$r('app.media.flexWrap1'),$r('app.media.flexWrap2'),$r('app.media.flexWrap3'),$r('app.media.flexWrap4'),$r('app.media.flexWrap5'),$r('app.media.flexWrap6')]// 底部滑块，可以通过拖拽滑块改变容器尺寸@Builder slider() {Slider({ value: this.rate * 100, min: 50, max: 70, style: SliderStyle.OutSet }).blockColor(Color.White).width('60%').onChange((value: number) => {this.rate = value / 100}).position({ x: '20%', y: '87%' })}build() {Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column }) {Column() {// 通过Flex组件warp参数实现自适应折行Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center,justifyContent: FlexAlign.Center,wrap: FlexWrap.Wrap}) {ForEach(this.imageList, (item:Resource) => {Image(item).width(183).height(138).padding(10)})}.backgroundColor('#FFFFFF').padding(20).width(this.rate * 100 + '%').borderRadius(16)}.width('100%')this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5')}
}

以上就是自适应布局的全部技巧，熟练掌握便可以应付大多数自适应布局场景了。

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

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

相关文章

Docker入门教程

Docker入门教程

文章目录 前言一、什么是Docker&#xff1f;二、为什么选择Docker三、Docker的基本组成四、Docker的安装五、Docker的常用命令六、DockerFile什么是DockerFile&#xff1f; 六、Docker volume什么是Docker volume&#xff1f;常用命令 总结 前言 随着云计算和微服务架构的兴起…
阅读更多...
wireshark 标记自己想要的数据包

wireshark 标记自己想要的数据包

1:点击视图 2:点击视图-着色规则 点击新增一行,双击名称-进行编辑 过滤器规则-编辑自己想要看到的 点击前景-选择凸出显示颜色 点击背景--选择凸出显示颜色 点击确定按钮
阅读更多...
苹果手机微信如何直接打印文件

苹果手机微信如何直接打印文件

在快节奏的工作和生活中&#xff0c;打印文件的需求无处不在。但你是否曾经遇到过这样的困扰&#xff1a;打印店价格高昂&#xff0c;让你望而却步&#xff1f;今天&#xff0c;我要给大家介绍一款神奇的微信小程序——琢贝云打印&#xff0c;让你的苹果手机微信直接变身移动打…
阅读更多...
45-1 waf绕过 - 文件上传绕过WAF方法

45-1 waf绕过 - 文件上传绕过WAF方法

环境准备： 43-5 waf绕过 - 安全狗简介及安装-CSDN博客然后安装dvwa靶场：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客打开dvwa靶场，先将靶场的安全等级调低，然后切换到文件上传 一、符号变异 在PHP中，由于其弱类型特性，有时候仅有一…
阅读更多...
计算机网络 —— 网络层（子网掩码和子网划分）

计算机网络 —— 网络层（子网掩码和子网划分）

计算机网络 —— 网络层&#xff08;子网掩码和子网划分&#xff09; 网络地址转换NAT子网掩码和子网划分举个例子第一步&#xff1a;看类型第二步&#xff1a;从主机号开始比对第三步&#xff1a;去头去尾 我们今天来看子网掩码和子网划分&#xff1a; 网络地址转换NAT 网络…
阅读更多...
DDei在线设计器-DDeiCore-布局插件

DDei在线设计器-DDeiCore-布局插件

DDei-Core-布局 如需了解详细的API教程以及参数说明&#xff0c;请参考DDei文档 标准布局 经典的框架结构布局&#xff0c;包含了顶部菜单栏、控件工具项、画布、属性面板和底部工具栏等功能面板&#xff0c;通过插件配置可以调整每个部分的顺序和内容。 效果截图 使用方式…
阅读更多...
vue油色谱画 大卫三角形|大卫五边形|PD图

vue油色谱画 大卫三角形|大卫五边形|PD图

大卫三角形 大卫五边形 PD图
阅读更多...
贝锐蒲公英异地组网：降低建筑工地远程视频监控成本、简化运维

贝锐蒲公英异地组网：降低建筑工地远程视频监控成本、简化运维

中联建设集团股份有限公司是一家建筑行业的施工单位&#xff0c;专注于建筑施工&#xff0c;业务涉及市政公用工程施工总承包、水利水电工程施工总承包、公路工程施工总承包、城市园林绿化专业承包等&#xff0c;在全国各地开展有多个建筑项目&#xff0c;并且项目时间周期可能…
阅读更多...
基于拓扑漏洞分析的网络安全态势感知模型

基于拓扑漏洞分析的网络安全态势感知模型

漏洞态势分析是指通过获取网络系统中的漏洞信息、拓扑信息、攻击信息等&#xff0c;分析网络资产可能遭受的安全威胁以及预测攻击者利用漏洞可能发动的攻击&#xff0c;构建拓扑漏洞图&#xff0c;展示网络中可能存在的薄弱环节&#xff0c;以此来评估网络安全状态。 在网络安…
阅读更多...
4.通用编程概念

4.通用编程概念

目录 一、变量与常量1.1 变量1.2 常量 二、遮蔽三、数据类型3.1 标量类型1. 整型2. 浮点型3. 布尔类型4.字符类型 3.2 复合类型1. 元组2. 数组 四、函数五、语句和表达式六、函数的返回值 一、变量与常量 1.1 变量 在Rust中默认的变量是不可变的&#xff0c;如果修改其值会导致…
阅读更多...
Python 如何判断一组数呈上升还是下降趋势

Python 如何判断一组数呈上升还是下降趋势

在数据分析和统计处理中&#xff0c;我们经常需要判断一组数的趋势是上升还是下降。这在金融市场分析、销售数据监控以及科学研究中都十分常见。本文将介绍如何使用Python来判断一组数的趋势&#xff0c;并结合实际案例进行详细阐述。 一、基本方法 判断一组数的趋势主要有以…
阅读更多...
Kafka监控系统efak的安装

Kafka监控系统efak的安装

下载地址Kafka Eaglehttp://download.kafka-eagle.org/下载地址连接不稳定&#xff0c;可以多次尝试直到成功连接下载 1.解压安装包并重命名 tar -zxvf kafka-eagle-bin-3.0.1.tar.gz 查看到解压后包含一个安装包&#xff0c;再解压 tar -zxvf efak-web-3.0.1-bin.tar.gz 移…
阅读更多...
AI-WEB-1 vulnhub靶场

AI-WEB-1 vulnhub靶场

AI-WEB-1 端口扫描 仅开放80端口 访问80端口 啥也没有 目录扫描 查看robots.txt 发现两个新目录 Disallow: /m3diNf0/ Disallow: /se3reTdir777/uploads/全都无权限访问 加入路径后再次扫描目录 发现/m3diNf0/目录下存在info.php&#xff0c;/se3reTdir777/目录下存在ind…
阅读更多...
ChatGPT3.5和ChatGPT4.0、ChatGPT4o对比

ChatGPT3.5和ChatGPT4.0、ChatGPT4o对比

一、ChatGPT3.5、ChatGPT4.0、ChatGPT4o对比 目前ChatGPT有三个主要版本&#xff0c;分别是ChatGPT3.5、ChatGPT4.0、ChatGPT4o&#xff0c;这三个版本之间有什么差异呢&#xff1f; 对比项ChatGPT3.5ChatGPT4.0ChatGPT4o参数数量1750亿约1万亿未公开输入文本文本、图片文本、…
阅读更多...
【栈】736. Lisp 语法解析

【栈】736. Lisp 语法解析

本文涉及知识点 栈 LeetCode736. Lisp 语法解析 给你一个类似 Lisp 语句的字符串表达式 expression&#xff0c;求出其计算结果。 表达式语法如下所示: 表达式可以为整数&#xff0c;let 表达式&#xff0c;add 表达式&#xff0c;mult 表达式&#xff0c;或赋值的变量。表达…
阅读更多...
【计算视觉】学习计算机视觉你不得不膜拜的CVPR大神：何凯明

【计算视觉】学习计算机视觉你不得不膜拜的CVPR大神：何凯明

目录 第一章&#xff1a;CVPR——计算机视觉的终极擂台 第二章&#xff1a;何凯明——计算机视觉领域的耀眼星辰 第三章&#xff1a;高引用论文——计算机视觉研究的璀璨星辰 第四章&#xff1a;何凯明的CVPR论文——深度学习的探索之旅 第五章&#xff1a;结语——向何凯…
阅读更多...
【学术小白成长之路】01三方演化博弈（基于复制动态方程） -基础概念与模型构建

【学术小白成长之路】01三方演化博弈（基于复制动态方程） -基础概念与模型构建

1.演化博弈基础知识 经典博弈论起源于1944年Von Neumann和Morgenstern合著的《博弈论与经济学行为》&#xff0c;是研究理性决策者之间竞争和合作关系的数学方法。 博弈论主要研究完全理性的博弈个体为实现利益最大化而做的策略选择&#xff0c;在过去几十年取得了极大发展&am…
阅读更多...
网页音频提取在线工具有哪些 网页音频提取在线工具下载

网页音频提取在线工具有哪些 网页音频提取在线工具下载

别再到处去借会员账号啦。教你一招&#xff0c;无视版权和地区限制&#xff0c;直接下载网页中的音频文件。没有复杂的操作步骤&#xff0c;也不用学习任何代码。只要是网页中播放的音频文件&#xff0c;都可以把它下载到本地保存。 一、网页音频提取在线工具有哪些 市面上的…
阅读更多...
ipables防火墙

ipables防火墙

一、Linux防火墙基础 Linux 的防火墙体系主要工作在网络层&#xff0c;针对 TCP/IP 数据包实施过滤和限制&#xff0c;属于典 型的包过滤防火墙&#xff08;或称为网络层防火墙&#xff09;。Linux 系统的防火墙体系基于内核编码实现&#xff0c; 具有非常稳定的性能和高效率&…
阅读更多...
Day51 动态规划part10+Day52 动态规划part11

Day51 动态规划part10+Day52 动态规划part11

LC121买卖股票的最佳时机&#xff08;未掌握&#xff09; 暴力&#xff1a;双层循环寻找最优间距&#xff0c;每一次都确定一个起点&#xff0c;遍历剩余节点当作终点 贪心&#xff1a;取最左最小值&#xff0c;不断遍历那么得到的差值最最大值就是最大利润。 动态规划 dp数组…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023