鸿蒙开发ArkUI -常用布局

news2024/9/25 14:40:17

线性布局(Row/Column)

间距/主轴排列方式/交叉轴对齐方式

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)')
  .justifyContent(FlexAlign.Start)

image-20231102153001893

自适应拉伸

Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。

      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: true })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')

自适应缩放

父容器尺寸确定时，可使用layoutWeight属性设置子组件和兄弟元素在主轴上的权重；或者使用百分比设置子组件和兄弟元素的宽度。

layoutWeight属性:

Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')
    }

百分比属性：

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%')
    }

自适应延伸

在线性布局中，开发者可以进行竖向或者横向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件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) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }, item => item)
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

层叠布局（Stack）

Stack组件为容器组件，其中子组件默认进行居中堆叠。

Column(){
  Stack({ }) {
    Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c')
    Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa')
    Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
  }.width('100%').height(150).margin({ top: 50 })
}
image-20231127153810963

对齐方式

Stack组件通过alignContent参数实现位置的相对移动。如图2所示，支持九种对齐方式。

image-20231127154040462

Z序控制

Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

Stack({ alignContent: Alignment.BottomStart }) {
  Column() {
    Text('Stack子元素1').fontSize(20)
  }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

  Column() {
    Text('Stack子元素2').fontSize(20)
  }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

  Column() {
    Text('Stack子元素3').fontSize(20)
  }.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
image-20231127154349417

弹性布局（Flex）

布局方向

image-20231127160121476 
Flex({ direction: FlexDirection.Row }) {
  Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
image-20231127160232981

布局换行

FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。

FlexWrap. NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。

FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。

Flex({ wrap: FlexWrap.Wrap }) {
  Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
} 
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
image-20231127160749398

主轴对齐方式

通过justifyContent参数设置在主轴方向的对齐方式。

image-20231127165109381 
Flex({ justifyContent: FlexAlign.Start }) {  
  Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('20%').height(50).backgroundColor(0xD2B48C)    
  Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding({ top: 10, bottom: 10 })
.backgroundColor(0xAFEEEE)

交叉轴对齐方式

容器组件设置交叉轴对齐

ItemAlign.Auto：使用Flex容器中默认配置。

ItemAlign.Start：交叉轴方向首部对齐。

ItemAlign.Center：交叉轴方向居中对齐。

ItemAlign.End：交叉轴方向底部对齐。

ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

ItemAlign. Baseline：交叉轴方向文本基线对齐。

Flex({ alignItems: ItemAlign.Auto }) {  
  Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.size({ width: '90%', height: 80 })
.padding(10)
.backgroundColor(0xAFEEEE)

子组件设置交叉轴对齐

子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。如下例所示：

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子组件居中
  Text('alignSelf Start').width('25%').height(80)
    .alignSelf(ItemAlign.Start)
    .backgroundColor(0xF5DEB3)
  Text('alignSelf Baseline')
    .alignSelf(ItemAlign.Baseline)
    .width('25%')
    .height(80)
    .backgroundColor(0xD2B48C)
  Text('alignSelf Baseline').width('25%').height(100)
    .backgroundColor(0xF5DEB3)
    .alignSelf(ItemAlign.Baseline)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xD2B48C)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xF5DEB3)

}.width('90%').height(220).backgroundColor(0xAFEEEE)
image-20231127171642900

内容对齐

可以通过alignContent参数设置子组件各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效，可选值有：

FlexAlign.Start：子组件各行与交叉轴起点对齐。

FlexAlign.Center：子组件各行在交叉轴方向居中对齐。

FlexAlign.End：子组件各行与交叉轴终点对齐。

FlexAlign.SpaceBetween：子组件各行与交叉轴两端对齐，各行间垂直间距平均分布。

FlexAlign.SpaceAround：子组件各行间距相等，是元素首尾行与交叉轴两端距离的两倍。

FlexAlign.SpaceEvenly: 子组件各行间距，子组件首尾行与交叉轴两端距离都相等。

Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
  Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
  Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
  Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
  Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
  Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
}
.width('90%')
.height(100)
.backgroundColor(0xAFEEEE)
image-20231127172036554

自适应拉伸

flexBasis：设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，那子项的空间为width/height的值。

flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于“瓜分”父组件的剩余空间。

flexShrink: 当父容器空间不足时，子组件的压缩比例。

Flex() {
Text('flexGrow(2)')
  .flexGrow(2) 
  .width(100)
  .height(100)
  .backgroundColor(0xF5DEB3)

Text('flexGrow(3)')
  .flexGrow(3)
  .width(100)
  .height(100)
  .backgroundColor(0xD2B48C)

Text('no flexGrow')
  .width(100) 
  .height(100)
  .backgroundColor(0xF5DEB3)
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)

场景实例

使用弹性布局，可以实现子组件沿水平方向排列，两端对齐，子组件间距平分，竖直方向上子组件居中的效果。

@Entry  
@Component
struct FlexExample {
  build() {
    Column() {
      Column({ space: 5 }) {
        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
          Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
        }
        .height(70)
        .width('90%')
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%') 
 }
}
image-20231127201410466

相对布局（RelativeContainer）

基本概念

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

设置依赖关系

锚点设置

RelativeContainer父组件为锚点，__container__代表父容器的id，ID默认为“container”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。

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

image-20231128105433233

场景实例

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF3333')
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },  //以父容器为锚点，竖直方向顶头对齐
            middle: { anchor: '__container__', align: HorizontalAlign.Center }  //以父容器为锚点，水平方向居中对齐
          })
          .id('row1')  //设置锚点为row1

        Row() {
          Image($r('app.media.icon'))
        }
        .height(100).width(100)
        .alignRules({
          top: { anchor: 'row1', align: VerticalAlign.Bottom },  //以row1组件为锚点，竖直方向低端对齐
          left: { anchor: 'row1', align: HorizontalAlign.Start }  //以row1组件为锚点，水平方向开头对齐
        })
        .id('row2')  //设置锚点为row2

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FFCC00')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Top }
          })
          .id('row3')  //设置锚点为row3

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF9966')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Top },
            left: { anchor: 'row2', align: HorizontalAlign.End },
          })
          .id('row4')  //设置锚点为row4

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF66FF')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Bottom },
            middle: { anchor: 'row2', align: HorizontalAlign.Center }
          })
          .id('row5')  //设置锚点为row5
      }
      .width(300).height(300)
      .border({ width: 2, color: '#6699FF' })
    }
    .height('100%').margin({ left: 30 })
  }
}
image-20231128105229820

轮播（Swiper）

布局与约束

Swiper作为一个容器组件，在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身的尺寸。如果开发者对Swiper组件设置了固定的尺寸，则在轮播显示过程中均以该尺寸生效；否则，在轮播过程中，会根据子组件的大小自动调整自身的尺寸。

private swiperController: SwiperController = new SwiperController();

Swiper(this.swiperController) {
  Text("0")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("1")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("2")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.loop(true)
.autoPlay(true) // 轮播
.interval(1000) // 间隔
.vertical(false) //false：设置水平方向上轮播： true：设置垂直方向轮播：
.displayCount(2) //一个页面内同时显示多个子组件：设置一个页面内显示两个子组件
.indicatorStyle({
  size: 30,
  left: 0,
  color: Color.Red
}) // 自定义导航点样式（示例：导航点直径设为30VP，左边距为0，导航点颜色设为红色）

...
this.swiperController.showNext(); // 通过controller切换到后一页
this.swiperController.showPrevious(); // 通过controller切换到前一页

创建网格（Grid/GridItem）

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。Grid的子组件必须是GridItem组件。

设置Grid行列数量与占比

Grid() {
  ...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')
image-20231128111456178

设置子组件所占行列数

GridItem() {
  Text(key)
    ...
}
.columnStart(1)
.columnEnd(2)
.rowStart(5)
.rowEnd(6)

设置主轴方向

若没有设置行列数量与占比，可以通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

  1. layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效，此时元素在layoutDirection方向上排列。

  2. 仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。

  3. 仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。

Grid() {
  ...
}
.maxCount(3)
.layoutDirection(GridDirection.Row)
image-20231128111855829

设置行列间距

Grid() {
  ...
}
.columnsGap(10)
.rowsGap(15)

构建可滚动的网格布局

在设置Grid的行列数量与占比时，如果仅设置行、列数量与占比中的一个，即仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。

@Component
struct Shopping {
  @State services: Array<string> = ['直播', '进口', ...]
  ...

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.services, (service: string, index) => {
          GridItem() {
            ...
          }
          .width('25%')
        }, service => service)
      }
      .rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性，当内容超出Grid区域时，可水平滚动。
      .rowsGap(15)
      ...
    }
    ...
  }
}

控制滚动位置

Column({ space: 5 }) {
  Grid(this.scroller) {
    ...
  }
  .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
  ...
 
 Row({space: 20}) {
   Button('上一页')
     .onClick(() => {
       this.scroller.scrollPage({
         next: false
       })
     })

   Button('下一页')
     .onClick(() => {
       this.scroller.scrollPage({
         next: true
       })
     })
 }
}
...

性能优化

适用于数据量较小的布局场景，当构建具有大量网格项的可滚动网格布局时，推荐使用数据懒加载方式实现按需迭代加载数据，从而提升列表性能。

当使用懒加载方式渲染网格时，为了更好的滚动体验，减少滑动时出现白块，Grid组件中也可通过cachedCount属性设置GridItem的预加载数量，只在懒加载LazyForEach中生效。

设置预加载数量后，会在Grid显示区域前后各缓存cachedCount*列数个GridItem，超出显示和缓存范围的GridItem会被释放。

Grid() {
  LazyForEach(this.dataSource, item => {
    GridItem() {
      ...
    }
  })
}
.cachedCount(3)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【图像分割】【深度学习】PFNet官方Pytorch代码-PFNet网络损失函数模块解析

【图像分割】【深度学习】PFNet官方Pytorch代码-PFNet网络损失函数模块解析

【图像分割】【深度学习】PFNet官方Pytorch代码-PFNet网络损失函数模块解析 文章目录 【图像分割】【深度学习】PFNet官方Pytorch代码-PFNet网络损失函数模块解析前言PM定位模块损失函数FM聚焦模块损失函数总结 前言 在详细解析PFNet代码之前&#xff0c;首要任务是成功运行PF…
阅读更多...
面试篇spark（spark core，spark sql，spark 优化）

面试篇spark（spark core，spark sql，spark 优化）

一&#xff1a;为什么学习spark&#xff1f; 相比较map-reduce框架&#xff0c;spark的框架执行效率更加高效。 mapreduce的执行框架示意图。 spark执行框架示意图 spark的执行中间结果是存储在内存当中的&#xff0c;而hdfs的执行中间结果是存储在hdfs中的。所以在运算的时…
阅读更多...
深入理解强化学习——马尔可夫决策过程：贝尔曼期望方程-[举例与代码实现]

深入理解强化学习——马尔可夫决策过程：贝尔曼期望方程-[举例与代码实现]

分类目录&#xff1a;《深入理解强化学习》总目录 在文章《深入理解强化学习——马尔可夫决策过程&#xff1a;贝尔曼期望方程-[基础知识]》中我们讲到了贝尔曼期望方程&#xff0c;本文就举一个贝尔曼期望方程的具体例子&#xff0c;并给出相应代码实现。 下图是一个马尔可夫…
阅读更多...
Harmony OS4开发入门

Harmony OS4开发入门

代码地址&#xff1a; https://gitee.com/BruceLeeAdmin/harmonyos/tree/master 项目目录介绍 ArkTS介绍 简单案例&#xff1a; State times: number 0/*数据类型&#xff1a;stringnumberany: 不确定类型&#xff0c;可以是任意类型*/State msg: string "hello"…
阅读更多...
正点原子linux应用编程——提高篇1

正点原子linux应用编程——提高篇1

在之前的入门篇学习中&#xff0c;都是直接在Ubuntu中进行验证的&#xff0c;对于嵌入式Linux系统来说&#xff0c;也是可以直接移植的&#xff0c;只需要使用嵌入式硬件平台对应的交叉编译工具编译应用程序即可运行。 在嵌入式Linux系统中&#xff0c;编写的应用程序通常需要…
阅读更多...
uniapp使用vue3和ts开发小程序获取用户城市定位

uniapp使用vue3和ts开发小程序获取用户城市定位

这个组件的功能&#xff1a;可以重新定位获取到用户的具体位置&#xff0c;这个是通过getLocation这个api和高德地图的api获取到的&#xff0c;getLocation这个api需要在微信公众平台后台>开发管理> 接口管理里面申请才能使用的&#xff0c;不然无法使用哦&#xff0c;这…
阅读更多...
数学老师怎么和家长沟通

数学老师怎么和家长沟通

作为一名数学老师&#xff0c;与家长建立良好的沟通关系是非常重要的。以下是我个人认为可以帮助与家长有效沟通的建议&#xff1a; 建立良好的第一印象 第一次与家长接触时&#xff0c;要尽可能展现出你的专业素养和热情。在交流中&#xff0c;要表达出你对孩子的关心和重视&…
阅读更多...
Android 编译的配置文件：android.mk 和android.bp

Android 编译的配置文件：android.mk 和android.bp

Android.bp文件首先是Android系统的一种编译配置文件&#xff0c;是用来代替原来的Android.mk文件的。在Android7.0以前&#xff0c;Android都是使用make来组织各模块的编译&#xff0c;对应的编译配置文件就是Android.mk。在Android7.0开始&#xff0c;Google引入了ninja和kat…
阅读更多...
接口文档自动生成工具：详细教程和实用技巧

接口文档自动生成工具：详细教程和实用技巧

本篇文章详细教你如何使用 Apifox 的 IDEA 插件实现自动生成接口代码。好处简单总结有以下几点&#xff1a; 自动生成接口文档&#xff1a; 不用手写&#xff0c;一键点击就可以自动 生成文档&#xff0c;当有更新时&#xff0c;点击一下就可以自动同步接口文档&#xff1b;代…
阅读更多...
小程序静默授权获取unionid

小程序静默授权获取unionid

文章目录 导文文章重点 导文 小程序静默授权获取unionid 文章重点 用wx.login(Object object)放到app.js里面 wx.login({success (res) {console.log(123);if (res.code) {//发起网络请求// wx.request({// url: https://example.com/onLogin,// data: {// code: res.…
阅读更多...
ERRO报错

ERRO报错

无法下载nginx 如下解决&#xff1a; 查看是否有epel 源 安装epel源 安装第三方 yum -y install epel-release.noarch NGINX端口被占用 解决&#xff1a; 编译安装的NGINX配置文件在/usr/local/ngin/conf 修改端口
阅读更多...
AI - Navmesh 寻路

AI - Navmesh 寻路

用cocos2dx引擎简单实现了一下navmesh的多边形划分&#xff0c;然后基于划分多边形的a*寻路。以及路径拐点优化算法 用cocos主要是方便使用一些渲染接口和定时器。重点是实现的原理。 首先画了一个带有孔洞的多边形 //多边形的顶点数据Vec2(100, 100),Vec2(300, 200),Vec2(50…
阅读更多...
程序员的软件开发帮手，低代码当仁不让

程序员的软件开发帮手，低代码当仁不让

目录 一、低代码是什么&#xff1f; 二、低代码的能力表现 1.提供可视化开发 2.预构建的组件和模板 3.集成的开发和测试工具 4.跨平台兼容性 5.可伸缩性和可扩展性&#xff1a; 跟随互联网信息技术快速发展的脚步&#xff0c;各行各业都在积极拥抱数字化转型。在这个过程中&…
阅读更多...
详解STL库—map和set

详解STL库—map和set

目录 一、关联式容器 二、键值对 SGI-STL中关于键值对的定义&#xff1a; 三、set 3.1 set的介绍 3.2 set的使用 1.set的模板参数列表​编辑 2. set的构造 3. set的迭代器 4. set的容量 5. set修改操作 6. set的使用举例 四、map 4.1map的介绍 4.2 map的使用 1…
阅读更多...
国产操作系统-银河麒麟V10

国产操作系统-银河麒麟V10

一、介绍 银河麒麟操作系统隶属于麒麟软件&#xff0c;麒麟软件是专业从事国产操作系统研发和产业化的企业&#xff0c;面向通用和专用领域打造安全创新的国产操作系统产品和相应解决方案&#xff0c;旗下拥有银河麒麟、中标麒麟、星光麒麟三大产品品牌。 麒麟软件官方网站地…
阅读更多...
【攻防世界-misc】glance-50

【攻防世界-misc】glance-50

1.得到一个动图 2.使用GIF动态图片分解&#xff0c;多帧动态图分解成多张静态图片_图片工具网页版&#xff0c;将图片定格组合&#xff0c; 由此得到flag值&#xff0c;拼写提交。
阅读更多...
卡码网语言基础课 | 15. 链表的基础操作Ⅲ

卡码网语言基础课 | 15. 链表的基础操作Ⅲ

目录 一、 插入链表的过程 二、 删除链表的过程 三、 打印链表 3.1 判断节点是否处于链尾 3.2 打印链表 3.3 循环体结束&#xff0c;遍历打印 题目&#xff1a; 请编写一个程序&#xff0c;实现以下链表操作&#xff1a;构建一个单向链表&#xff0c;链表中包含一组整数…
阅读更多...
c++没有返回值的返回值

c++没有返回值的返回值

上面的函数search没有返回值,因为a不等于1,但是输出的时候会输出6.这恰巧是x的值,如果我们希望a不等于1时返回x,那么这种结果反而是正确的.有时候这种错误的代码可能产生正确的结果反而会加大debug难度 int search(int n) { 00007FF66DB723E0 mov dword ptr [rsp8],e…
阅读更多...
【Linux系统编程】进程概念详解（什么是进程？如何查看进程？）

【Linux系统编程】进程概念详解（什么是进程？如何查看进程？）

目录 一、前言 二、 什么是进程&#xff1f; &#x1f4a6;引出进程 &#x1f4a6;进程的基本概念 &#x1f4a6;理解进程 ⭐描述进程--PCB&#xff08;进程控制块&#xff09; ⭐组织进程 三、查看进程 &#x1f4a6; 通过 ps 命令查看进程 &#x1f4a6; 通过 l…
阅读更多...
事件代理？

事件代理？

1.什么是事件代理&#xff1f; 事件代理也叫事件委托&#xff0c;只指定一个事件处理程序&#xff0c;就可以管理某一类型得事件。 可以简单理解为&#xff0c;事件代理就是将本应该绑定子元素事件绑定给父元素代理。它的优点就是&#xff1a;减少事件得执行&#xff0c;减少浏…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023