【HarmonyOS4.0】第十篇-ArkUI布局容器组件(二)

三、层叠布局容器(Stack)

堆叠容器组件 Stack的布局方式是把子组件按照设置的对齐方式顺序依次堆叠,后一个子组件覆盖在前一个子组件上边。

注意:Stack 组件层叠式布局,尺寸较小的布局会有被遮挡的风险,

3.1.接口

堆叠容器组件 Stack接口如下:

Stack(value?: { alignContent?: Alignment })

3.2.参数

参数只有一个如下:

参数名参数类型必填参数描述
alignContentAlignment设置子组件在容器内的对齐方式。默认值:Alignment.Center

参数alignContent,参数类型为Alignment枚举有9个参数值如下:

名称描述
TopStart子组件在 Stack 内靠左上角对齐
Top设置子组件在 Stack 内靠顶部水平居中对齐
TopEnd设置子组件在 Stack 内部靠右上角对齐
Start子组件靠 Stack 左边侧竖直居中对齐
Center设置子组件居中对齐
End设置子组件靠右竖直居中对齐
BottomStart设置子组件左下角对齐
Bottom设置子组件底部水平居中对齐
BottomEnd设置子组件右下角对齐

1)TopStart:子组件在 Stack 内靠左上角对齐,简单样例如下所示:

@Entry
@Component
struct StackExample {
  build() {
    //TopStart:子组件在 Stack 内靠左上角对齐,
    Stack({alignContent:Alignment.TopStart}){
      Text("test1")
        .width(200)                     //宽
        .height(180)                    //高
        .textAlign(TextAlign.End)
        .backgroundColor(Color.Orange)  //设置背景

      Text("test2")
        .width(130)                     //宽
        .height(100)                    //高
        .textAlign(TextAlign.End)
        .backgroundColor(Color.White)  //设置背景

      Text("test3")
        .width(65)                     //宽
        .height(55)                    //高
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)  //设置背景
    }
    .width("100%")
    .height(200)
    .backgroundColor(Color.Pink)
  }
}

预览效果如下:

img

2)Top:设置子组件在 Stack 内靠顶部水平居中对齐,如下图所示:

img

3)TopEnd:设置子组件在 Stack 内部靠右上角对齐,如下所示:

img

4)Start:子组件靠 Stack 左边侧竖直居中对齐,如下所示:

img

5)Center(默认值):设置子组件居中对齐,如下所示:

img

6)End:设置子组件靠右竖直居中对齐,如下所示:

img

7)BottomStart:设置子组件左下角对齐,如下所示:

img

8)Bottom:设置子组件底部水平居中对齐,如下所示:

img

9)BottomEnd:设置子组件右下角对齐,如下所示:

img

3.3.属性

除支持通用属性外,还支持以下属性:

参数名参数类型参数描述
alignContentAlignment设置所有子组件在容器内的对齐方式。默认值:Alignment.Center从API version 9开始,该接口支持在ArkTS卡片中使用。说明:该属性与通用属性align同时设置时,后设置的属性生效。

alignContent:设置子组件的对齐方式,通过另一种方式设置而已, Alignment 的讲解同上,就没有在说明。

四、List容器

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。

说明

  • 列表项ListItem是listItem的子项
  • 列表项(ListItem)数量过多超出屏幕后,会自动提供滚动功能
  • 列表项(ListItem)既可以纵向排列,也可以横向排列
  • 注意list是容器,ListItem不是容器, ListItem中只能包含一个根组件,可以在里面先写一个跟组件,例如row容器,在编写内容

4.1.接口

接口说明:

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

参数:

参数名参数类型必填参数描述
spacenumber | string子组件主轴方向的间隔。默认值:0说明:设置为除-1外其他负数或百分比时,按默认值显示。space参数值小于List分割线宽度时,子组件主轴方向的间隔取分割线宽度。
initialIndexnumber设置当前List初次加载时视口起始位置显示的item的索引值。默认值:0说明:设置为除-1外其他负数或超过了当前List最后一个item的索引值时视为无效取值,无效取值按默认值显示。
scrollerScroller可滚动组件的控制器。用于与可滚动组件进行绑定。说明:不允许和其他滚动类组件绑定同一个滚动控制对象。

4.2.属性

除支持通用属性外,还支持以下属性:

名称参数类型描述
listDirectionAxis设置List组件排列方向。默认值:Axis.Vertical从API version 9开始,该接口支持在ArkTS卡片中使用。
divider{strokeWidth: Length,color?:ResourceColor,startMargin?: Length,endMargin?: Length} | null设置ListItem分割线样式,默认无分割线。- strokeWidth: 分割线的线宽。- color: 分割线的颜色。- startMargin: 分割线与列表侧边起始端的距离。- endMargin: 分割线与列表侧边结束端的距离。从API version 9开始,该接口支持在ArkTS卡片中使用。endMargin +startMargin 不能超过列宽度。startMargin和endMargin不支持设置百分比。List的分割线画在主轴方向两个子组件之间,第一个子组件上方和最后一个子组件下方不会绘制分割线。多列模式下,ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算,其他情况从List交叉轴方向起始边开始计算。
scrollBarBarState设置滚动条状态。默认值:BarState.Off从API version 9开始,该接口支持在ArkTS卡片中使用。
cachedCountnumber设置列表中ListItem/ListItemGroup的预加载数量,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考减少应用白块说明。默认值:1从API version 9开始,该接口支持在ArkTS卡片中使用。说明:单列模式下,会在List显示的ListItem前后各缓存cachedCount个ListItem。多列模式下, 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。
editMode(deprecated)boolean声明当前List组件是否处于可编辑模式。可参考示例3实现删除选中的list项。从API version9开始废弃。默认值:false
edgeEffectEdgeEffect设置组件的滑动效果。默认值:EdgeEffect.Spring从API version 9开始,该接口支持在ArkTS卡片中使用。
chainAnimationboolean设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。默认值:false- false:不启用链式联动。- true:启用链式联动。从API version 9开始,该接口支持在ArkTS卡片中使用。
multiSelectable8+boolean是否开启鼠标框选。默认值:false- false:关闭框选。- true:开启框选。从API version 9开始,该接口支持在ArkTS卡片中使用。
lanes9+number | LengthConstrain以列模式为例(listDirection为Axis.Vertical):lanes用于决定List组件在交叉轴方向按几列布局。默认值:1规则如下:- lanes为指定的数量时,根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。- lanes设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的交叉轴尺寸符合最小限制。- lanes设置了{minLength,maxLength},如果父组件交叉轴方向尺寸约束为无穷大时,固定按一列排列,列宽度按显示区域内最大的ListItem计算。- ListItemGroup在多列模式下也是独占一行,ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。- lanes设置了{minLength,maxLength}时,计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。该接口支持在ArkTS卡片中使用。
alignListItem9+ListItemAlignList交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时,ListItem在List交叉轴方向的布局方式,默认为首部对齐。默认值:ListItemAlign.Start该接口支持在ArkTS卡片中使用。
sticky9+StickyStyle配合ListItemGroup组件使用,设置ListItemGroup中header和footer是否要吸顶或吸底。默认值:StickyStyle.None该接口支持在ArkTS卡片中使用。说明:sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。

ListItemAlign9+枚举说明:

名称描述
StartListItem在List中,交叉轴方向首部对齐。
CenterListItem在List中,交叉轴方向居中对齐。
EndListItem在List中,交叉轴方向尾部对齐。

StickyStyle9+枚举说明:

名称描述
NoneListItemGroup的header不吸顶,footer不吸底。
HeaderListItemGroup的header吸顶,footer不吸底。
FooterListItemGroup的footer吸底,header不吸顶。

说明

  • List组件通用属性clip的默认值为true。

4.3.事件

名称功能描述
onItemDelete(deprecated)(event: (index: number) => boolean)当List组件在编辑模式时,点击ListItem右边出现的删除按钮时触发。从API version9开始废弃。- index: 被删除的列表项的索引值。
onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void)列表滑动时触发。- scrollOffset: 每帧滚动的偏移量,List的内容向上滚动时偏移量为正,向下滚动时偏移量为负。- scrollState: 当前滑动状态。使用控制器调用ScrollEdge和ScrollToIndex时不会触发,其余情况有滚动就会触发该事件。从API version 9开始,该接口支持在ArkTS卡片中使用。
onScrollIndex(event: (start: number, end: number) => void)列表滑动时触发。计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。- start: 滑动起始位置索引值。- end: 滑动结束位置索引值。触发该事件的条件:列表初始化时会触发一次,List显示区域内第一个子组件的索引值或后一个子组件的索引值有变化时会触发。List的边缘效果为弹簧效果时,在List划动到边缘继续划动和松手回弹过程不会触发onScrollIndex事件。从API version 9开始,该接口支持在ArkTS卡片中使用。
onReachStart(event: () => void)列表到达起始位置时触发。从API version 9开始,该接口支持在ArkTS卡片中使用。说明:List初始化时如果initialIndex为0会触发一次,List滚动到起始位置时触发一次。List边缘效果为弹簧效果时,划动经过起始位置时触发一次,回弹回起始位置时再触发一次。
onReachEnd(event: () => void)列表到底末尾位置时触发。从API version 9开始,该接口支持在ArkTS卡片中使用。说明:List边缘效果为弹簧效果时,划动经过末尾位置时触发一次,回弹回末尾位置时再触发一次。
onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain })列表开始滑动时触发,事件参数传入即将发生的滑动量,事件处理函数中可根据应用场景计算实际需要的滑动量并作为事件处理函数的返回值返回,列表将按照返回值的实际滑动量进行滑动。- offset:即将发生的滑动量,单位vp。- state:当前滑动状态。- offsetRemain:实际滑动量,单位vp。触发该事件的条件:手指拖动List、List惯性划动时每帧开始时触发;List超出边缘回弹、使用滚动控制器的滚动不会触发。该接口支持在ArkTS卡片中使用。说明:当listDirection的值为Axis.Vertical时,返回垂直方向滑动量,当listDirection的值为Axis.Horizontal时,返回水平方向滑动量。
onScrollStart9+(event: () => void)列表滑动开始时触发。手指拖动列表或列表的滚动条触发的滑动开始时,会触发该事件。使用Scroller滑动控制器触发的带动画的滑动,动画开始时会触发该事件。该接口支持在ArkTS卡片中使用。
onScrollStop(event: () => void)列表滑动停止时触发。手拖动列表或列表的滚动条触发的滑动,手离开屏幕并且滑动停止时会触发该事件;使用Scroller滑动控制器触发的带动画的滑动,动画停止会触发该事件。从API version 9开始,该接口支持在ArkTS卡片中使用。
onItemMove(event: (from: number, to: number) => boolean)列表元素发生移动时触发。- from: 移动前索引值。- to: 移动后索引值。
onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) | void)开始拖拽列表元素时触发。- itemIndex: 被拖拽列表元素索引值。
onItemDragEnter(event: (event: ItemDragInfo) => void)拖拽进入列表元素范围内时触发。
onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void)拖拽在列表元素范围内移动时触发。- itemIndex: 拖拽起始位置。- insertIndex: 拖拽插入位置。
onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void)拖拽离开列表元素时触发。- itemIndex: 拖拽离开的列表元素索引值。
onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void)绑定该事件的列表元素可作为拖拽释放目标,当在列表元素内停止拖拽时触发。- itemIndex: 拖拽起始位置。- insertIndex: 拖拽插入位置。- isSuccess: 是否成功释放。说明:跨List拖拽时,当拖拽释放的位置绑定了onItemDrop时会返回true,否则为false。List内部拖拽时,isSuccess为onItemMove事件的返回值。

ScrollState枚举说明:

名称描述
Idle未滑动状态。
Scroll手指拖动状态。
Fling惯性滑动状态。

说明:

要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件:

  • editMode属性设置为true。
  • 绑定onItemDelete事件,且事件回调返回true。
  • ListItem的editable属性设置为true。

实现ListItem拖拽,需满足以下条件:

  • editMode属性设置为true。
  • 绑定onDragStart事件,且事件回调中返回浮动UI布局。

4.4.案例

4.4.1.示例一:

@Entry
@Component
struct ListItemExample {
  private arr1:number[] = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20]
  build() {
    Column(){
      List({space:20, initialIndex:0}){ //initialIndex设置当前List初次加载时视口起始位置显示的item的索引值。默认值:0

        ForEach(this.arr1, (item)=>{
          ListItem(){
            Text('' + item)
              .width("100%") //宽
              .height(100)  //高
              .fontSize(16) //字体大小
              .textAlign(TextAlign.Center) //居中显示
              .borderRadius(10) //设置圆角半径
              .backgroundColor("#A9A9A9") //设置背景颜色
          }
          // 结束ForEach循环,并且指定item作为每个列表项的标识符。
        },item => item)
      }
      .listDirection(Axis.Vertical) //排列方向 Vertical垂直方向
      /**
       * 设置ListItem分割线样式,默认无分割线。
       * - strokeWidth: 分割线的线宽。
       * - color: 分割线的颜色。
       * - startMargin: 分割线与列表侧边起始端的距离。
       * - endMargin: 分割线与列表侧边结束端的距离。
       */
      .divider({strokeWidth:2, color: "#8FBC8F", startMargin:20, endMargin:20})
      .edgeEffect(EdgeEffect.Spring) //滑动到边缘无效果,默认值:EdgeEffect.Spring
      /**
       * 列表滑动时触发。
       * - start: 滑动起始位置索引值。
       * - end: 滑动结束位置索引值。
       */
      .onScrollIndex((start: number,end:number) => {
        console.info(`start: ${start}`)
        console.info(`end: ${end}`)
      })
      .width("90%")
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#808080")
    .padding({top:10})
  }
}

预览效果如下:

img

4.4.2.示例二

@Entry
@Component
struct ListLanesExample  {
  @State arr1:number[] = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20,21]

  build() {
    Column(){
      List({space:20}){
        ForEach(this.arr1, (item)=>{
          ListItem(){
            Text("hi:"+item)
              .width("100%") //宽
              .height(100)  //高
              .fontSize(16) //字体大小
              .textAlign(TextAlign.Center) //居中显示
              .borderRadius(10) //设置圆角半径
              .backgroundColor("#A9A9A9") //设置背景颜色
          }
          .border({width:2, color: "#3CB371"})
          //结束ForEach循环,并且指定item作为每个列表项的标识符。可以不写
        },item=>item)
      }
      .height(360) //高
      .width("100%") //宽
      .border({width: 2, color: "#2F4F4F"}) //框线颜色和宽度

      /*
      * 设置了最小交叉轴长度为40vp,最大交叉轴长度为80vp,然后由于List没有设置listDirection,所以List的交叉轴方向为水平方向,
      * 如果列表的交叉轴方向上的大小 小于最小交叉轴长度的两倍,那么只能展示一列。
      * 如果将列表的交叉轴上的大小改成大于最小交叉轴长度的两倍,列数就会改变()。
      */
      .lanes({minLength:40, maxLength:80})

      //一种是直接传一个number,比如上面的列表我想让它交叉轴方向上展示三个子项
      //.lanes(6)

      /**
       *
       * List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时,ListItem在List交叉轴方向的布局方式,默认为首部对齐。
       * 默认值:ListItemAlign.Start
       */
      .alignListItem(ListItemAlign.Start)

    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

预览效果如下:

img

4.4.3.示例三

@Entry
@Component
struct ListExample02 {
  @State arr1:number[] = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20]
  @State editFlag:boolean = false

  build() {
    //采用层叠布局(创建column容器、然后创建button按钮堆叠在column容器上面), TopStart子组件在 Stack 内靠左上角对齐
    Stack({alignContent:Alignment.TopStart}){
      //创建column容器
      Column(){
        List({space:20, initialIndex:0}){
          ForEach(this.arr1, (item, index:number)=>{
            ListItem(){
              //弹性布局(水平排列),也可以采用row容器
              Flex({direction:FlexDirection.Row}){
                Text(""+item)
                  .width("100%")
                  .height(80)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10)
                  .backgroundColor("#F9F9FA")
                  .flexShrink(1)

                if(this.editFlag){
                  //如果editFlag为true则显示按钮
                  Button(){
                    Text("delete").fontSize(16).borderRadius(5)
                  }
                  .width("30%")
                  .height(40)
                  .onClick(()=>{
                    //输出打印到控制太
                    console.info("删除元素:"+this.arr1[index])
                    //删除元素
                    this.arr1.splice(index,1)
                    //输出剩余元素
                    console.info(JSON.stringify(this.arr1))
                    //修改值为false
                    this.editFlag = false
                    //是否启用按钮按下时的切换效果。当状态设置为 false 时,切换效果无效。
                  }).stateEffect(true)
                }
              }
            }
          })
        }.width("90%")
      }.width("100%")


      //创建button按钮
      Button("edit list").onClick(()=>{
        //点击修改修改值为true
        this.editFlag = true
      }).margin({top:5, left:20})
    }
    .size({height:"100%", width:"100%"})
    .backgroundColor("#E1E1E1")
    .padding({top:10})
  }
}

预览效果如下:

img

4.4.4.示例四

章节一中的内容,商品如果比较多的时候无法下拉选择的,只能展示一行,这里采用List容器来解决这个问题,如下:

class Item{
  //定位属性
  name: string
  image: any
  price: number

  constructor(name: string, image: any, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}

@Entry
@Component
struct ListExample {
  private items:Array<Item> = [
    new Item("HUAWEI Mate 60 Pro",$r("app.media.mate60"),  7999.00),
    new Item("HUAWEI MatePad Pro",$r("app.media.MatePadPro"),4299.00),
    new Item("HUAWEI WATCH GT 4", $r("app.media.WATCHGT4"), 1538.00),
    new Item("HUAWEI FreeBuds Pro 3", $r("app.media.FreeBudsPro3"), 1499.00),
    new Item("HUAWEI MateBook 14s", $r("app.media.MateBook14s"), 5299.00),
    new Item("HUAWEI FreeBuds Pro 3", $r("app.media.FreeBudsPro3"), 1499.00),
    new Item("HUAWEI MateBook 14s", $r("app.media.MateBook14s"), 5299.00),
    new Item("HUAWEI Mate 60",$r("app.media.mate60"),  5999.00),
    new Item("HUAWEI MatePad2 Pro",$r("app.media.MatePadPro"),4599.00),
    new Item("HUAWEI WATCH GT 5", $r("app.media.WATCHGT4"), 1638.00),
    new Item("HUAWEI FreeBuds Pro 4", $r("app.media.FreeBudsPro3"), 1699.00),
  ]
  build() {
    Column({space:8}){
      Row(){
        Text("商品列表")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .padding(20)

      List({space:10}){
        ForEach(this.items,(item: Item)=>{
          ListItem(){
            Row({space:10}){
              Image(item.image).width(100)
              Column({space:4}){
                Text(item.name).fontSize(15).fontWeight(FontWeight.Bold)
                Text(`原价:¥ ${item.price}`).fontColor("#F36").fontSize(18)
              }
              .height("100%")
              .alignItems(HorizontalAlign.Start)
            }
            .width("90%")  //设置宽度
            .height(120)    //设置高度
            .justifyContent(FlexAlign.SpaceBetween) //设置主轴方向主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。
            .backgroundColor("#FFFFFF") //设置背景为白色
            .borderRadius(10) //这是圆角班级
            .padding(20) //内边距
          }
        })
      }
        .alignListItem(ListItemAlign.Center) //ListItem在List交叉轴方向的布局方式,默认为首部对齐。这里改为居中对齐
        .height("100%")
        .width("100%")

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#D3D3D3")
  }
}

预览效果如下:

img

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JS常用插件 Swiper插件 实现轮播图

Swiper介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架 中文官网地址: https://www.swiper.com.cn/ 点击查看Swiper演示&#xff0c;里面的功能和样式十分丰富&#xff0c;根据自己的需求选择 中文教程中详细介绍了如何使用Swiper API文档中介绍了各个模块以及参…

计算机导论05-计算机网络

文章目录 计算机网络基础计算机网络概述计算机网络的概念计算机网络的功能计算机网络的组成 计算机网络的发展计算机网络的类型 网络体系结构网络互联模型OSI/RM结构与功能TCP/IP结构模型TCP/IP与OSI/RM的比较 网络地址与分配IP地址构成子网的划分IPv6 传输介质与网络设备网络传…

电脑桌面便签在哪设置?备忘录软件哪个好?

好记性不如烂笔头&#xff01;相信很多打工族在电脑面前办公的时候&#xff0c;都需要随时记录工作中的事项&#xff0c;有的用TXT记录&#xff0c;有的手写笔记&#xff0c;还有一些用电脑桌面便签类软件。而当我们待办事项繁多的时候&#xff0c;手写或文本记录并不能有效帮我…

图解python | 字符串及操作

1.Python元组 Python的元组与列表类似&#xff0c;不同之处在于元组的元素不能修改。 元组使用小括号&#xff0c;列表使用方括号。 元组创建很简单&#xff0c;只需要在括号中添加元素&#xff0c;并使用逗号隔开即可。 tup1 (ByteDance, ShowMeAI, 1997, 2022) tup2 (1…

老师假期有工资么

老师在享受假期的时候&#xff0c;很多人都会好奇&#xff1a;教师寒暑假会有工资吗&#xff1f; 老师也是劳动者&#xff0c;享有法律规定的各种权益。其中之一就是在规定的工作时间内获得报酬。既然老师在正常工作日上班有工资&#xff0c;那么在假期呢&#xff1f; 实际上…

数字化时代,VR全景展示如何让用户一窥全貌?

数字化时代&#xff0c;VR全景展示为各行各业提供了无限的可能性。随着VR全景技术的逐步普及&#xff0c;VR全景展示以其独特的呈现方式和新颖十足的交互体验&#xff0c;正在不断改变着人们对于展示宣传的理解。 传统的展示方式&#xff0c;通常需要将产品、图文、品牌等元素集…

【计算机组成与体系结构Ⅱ】指令调度与分支延迟(实验)

实验4&#xff1a;指令调度与分支延迟 一、实验目的 1. 加深对指令调度技术的理解。 2. 加深对分支延迟技术的理解。 3. 熟练采用指令调度技术解决流水线中的数据冲突的方法。 4. 进一步理解指令调度技术对CPU性能的改进。 5. 进一步理解延迟分支技术对CPU性能的改进。 二…

企业组网搭建有哪些?

在当今全球化的商业环境中&#xff0c;集团公司必须建立起一个无缝连接的网络&#xff0c;以确保高效的信息传输和资源共享。为实现这一目标&#xff0c;选择可靠而安全的网络组网方案至关重要。本文将介绍几种主要的集团公司网络组网方案&#xff0c;以帮助企业根据其具体需求…

人人都在用的PDF软件,也要接入ChatGPT了

随着人工智能技术的不断进步和发展&#xff0c;Chatbot技术的应用已经逐渐从娱乐和社交领域扩展到了更多的实际场景中。在办公软件领域&#xff0c;聊天机器人已经成为了提升工作效率、减少人力投入的重要工具&#xff0c;多家头部企业都在探讨将AI接入到软件及应用中的使用方案…

深入解析阻塞队列BlockingQueue及源码(超详细)

一、基础概念 1.1 BlockingQueue BlockingQueue 是 java.util.concurrent 包提供的用于解决并发生产者 - 消费者问题的最有用的类。 1.1.1 队列类型&#xff1a; 无限队列 &#xff08;unbounded queue &#xff09; - 几乎可以无限增长 有限队列 &#xff08; bounded qu…

python基础语法看一篇就够了,全网最全python语法笔记汇总

前言 Python 是一种代表简单思想的语言&#xff0c;其语法相对简单&#xff0c;很容易上手。不过&#xff0c;如果就此小视 Python 语法的精妙和深邃&#xff0c;那就大错特错了。 如能在实战中融会贯通、灵活使用&#xff0c;必将使代码更为精炼、高效&#xff0c;同时也会极…

Plane Geometry (Junior High School)

初中平面几何&#xff0c; ACBD, ∠CAD60&#xff0c;∠C40&#xff0c;求∠B Vertical Calculation-CSDN博客 Rectangular Area-CSDN博客

Rectangular Area

长方形ABCD&#xff0c; 点E 点F 在边AB上&#xff0c;点A&#xff0c; 点B&#xff0c; 点E&#xff0c; 点F不重合&#xff0c;连接DE&#xff0c;连接CF&#xff0c;相较于点O&#xff0c;已知S△EOF 4&#xff0c; S△COB 16&#xff0c;求S □ABCD &#xff1f; Plane …

YOLO (1) abaconda 安装 cuda、版本确定、pytorch 安装

一、简述 年底了&#xff0c;身上也没有其他项目&#xff0c;恰好乘着这个机会学一下pytorch 和YOLOv8. 1、下载abaconda https://repo.anaconda.com/archive/ 2、安装 环境变量要✔ 其他一直下一步 3、测试 (base) C:\Users\alber>conda -V conda 23.1.0(base) C…

算法通关村第十四关—数据流的中位数(黄金)

数据流中中位数的问题 LeetCode295,中位数是有序列表中间的数。如果列表长度是偶数&#xff0c;中位数则是中间两个数的平均值。 例如&#xff1a;[2,3,4]的中位数是3 [2,3]的中位数是(23)/22.5 实现 MedianFinder 类: MedianFinder() 初始化 MedianFinder 对象。void addNum(…

漏洞修复整理

一、Geoserver Apache HTTP/2拒绝服务漏洞&#xff08;CVE-2023-44487&#xff09;、Eclipse Jetty 资源管理错误漏洞(CVE-2023-26048)、Eclipse Jetty 信息泄露漏洞(CVE-2023-26049) 受影响版本&#xff1a;9.4.53以下版本 处理方式&#xff1a;原地升级 &#xff08; jdk版本…

开源ERP系统Odoo安装部署并结合内网穿透实现公网访问本地系统

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…

ESP系列入门教程(二)——之简单驱动温湿度传感器DHT11【附 ESP32 / ESP8266 通用代码】

ESP系列入门教程<二> 概要技术名词简介● ESP系列简介 硬件连接实现代码实现●Demo&#xff1a;驱动DHT11温湿度传感器●编译注意事项&#xff1a;添加DHT库 概要 最近在跟着几个大佬的教学视频做项目。陆续会更新记录一些要点&#xff0c;便于后期总结笔记的时候进行引…

鸿蒙开发OpenHarmony组件复用案例

概述 在开发应用时&#xff0c;有些场景下的自定义组件具有相同的组件布局结构&#xff0c;仅有状态变量等承载数据的差异。这样的组件缓存起来&#xff0c;需要使用到该组件时直接复用&#xff0c; 减少重复创建和渲染的时间&#xff0c;从而提高应用页面的加载速度和响应速度…

windows平台高dpi介绍

flutter在windows平台如何自定义dpi设置 系统层级的支持(windows平台对高dpi的支持) 主要有两点&#xff1a; 设置系统的缩放比例 (系统及系统自带的app会根据这个设置来进行缩放&#xff1b;自己的app需要结合自己设置的dpi awareness来实现对应的dpi支持)设置进程的dpi aw…