【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇(下)

news2024/11/12 10:49:29

系列文章目录

【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器(上)
【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器(下)
【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇(上)
【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇(下)


文章目录

  • 系列文章目录
  • 前言
  • 一、常见布局详细使用
    • (4)相对布局(RelativeContainer)
      • 1、基本概念:
      • 2、语法提炼:
      • 3、 对齐方式
        • 水平方向:
        • 垂直方向
      • 4、 使用示例
        • 示例1:
        • 示例2:
        • 示例3:
        • 示例4:
        • 示例5:
    • (5)相对布局2(offset)
      • 示例
      • 示例1:
      • 示例2:
    • (6)绝对布局(position)
      • 示例1:
      • 示例2:
      • 示例3:
      • 示例4:
      • 示例5:
  • 二、布局中的渲染控制
    • 1. if/else
    • 2. ForEach
      • 示例1:
      • 示例2:
  • 三、项目开发过程中布局像素单位的选择
    • 1、像素单位介绍
      • px
      • vp
      • fp
      • lpx
    • 2、像素单位之间的转换
    • 3、实际开发单位的选择
      • lpx基准宽(designWidth)设置:
  • 四、结束


前言

HarmonyOS NEXT(鸿蒙应用)开发快速入门教程之布局篇(下),基于HarmonyOS NEXT Beta1版本(api 12)讲解。

本文将从前端开发者角度来学习鸿蒙的布局语法,通过类比鸿蒙布局和web css布局相似之处,帮助大家快速掌握鸿蒙布局开发。


一、常见布局详细使用

(4)相对布局(RelativeContainer)

此相对布局非css里面的相对布局而是安卓里面的相对布局,对于web开发人员来说比较新的一种布局方式,而对于安卓开发来说就非常熟悉,css相对布局在鸿蒙里面也有类似用法后续会讲到。

RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系,适用于界面复杂场景的情况,对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。

通俗介绍说就是子元素放置位置既可以设置相对父容器,也可以设置相对兄弟组件,相对父元素就可以看做在一个密闭长方形空间你想把东西放置它的上下左右某个对齐方向上,相对兄弟组件可以看成两个盒子,让盒子上面对齐排列或者盒子上和另一个盒子下对齐,左对齐或者左与右对齐确定子元素位置。所以这边相对的是其他组件而css的相对的是自己,因此必须设置相对的元素,这个元素称为锚点。

1、基本概念:

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

2、语法提炼:

RelativeContainer() {
  子组件().alignRules({
     方向(left或right或top或bottom):{anchor:锚点ID,align:对齐枚举值},
     方向(left或right或top或bottom):{anchor:锚点ID,align:对齐枚举值},
     ....
     
  })
}

一般设置2个方向就能确定位置了,比如left+top,如果子组件未设置高度或宽度的,也可以通过设置3个以上方向让子组件拉伸填满父组件宽度或高度。

为了明确定义锚点,必须为RelativeContainer及其子元素设置ID,RelativeContainer不设置默认id为“ __ container __ ”,其余子元素的ID通过id属性设置。不设置id的组件能显示,但是不能被其他子组件作为锚点

3、 对齐方式

align值对应枚举值

水平方向:

HorizontalAlign.Start 左
HorizontalAlign.Center 中
align:HorizontalAlign.End 右

垂直方向

VerticalAlign.Top 上
VerticalAlign.Center 中
VerticalAlign.Bottom 下

4、 使用示例

示例1:
@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Button('按钮').alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom } })
    }.width('100%')
    .height('100%')
  }
}


说明:按钮水平方向基于父容器左边对齐,垂直方向基于父容器底部对齐

运行效果:
在这里插入图片描述

示例2:
@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Button('按钮').alignRules({
        right: { anchor: '__container__', align: HorizontalAlign.Center },
        top: { anchor: '__container__', align: VerticalAlign.Center } })
        .width(100).height(150)
    }.width('100%')
    .height('100%')
  }
}



说明:按钮的右边与父容器水平方向中间对齐,顶部与父容器纵向中间对齐

运行效果:
在这里插入图片描述

示例3:
@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Column() {
        Text('矩形')
      }
      .width(100)
      .height(50)
      .backgroundColor('#ff22f2')
      .margin({
        top: 80,
        left: 100
      })
      .id('rect')

      Button('按钮').alignRules({
        left: { anchor: 'rect', align: HorizontalAlign.End },
        top: { anchor: 'rect', align: VerticalAlign.Bottom }
      })
        .width(100).height(150)
    }.width('100%')
    .height('100%')
  }
}


说明:按钮左边与矩形右边对齐,按钮顶部与按钮底部对齐

运行效果:
在这里插入图片描述

示例4:
@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Column() {
        Text('矩形')
      }
      .width(100)
      .height(50)
      .backgroundColor('#ff22f2')
      .margin({
        top: 80,
        left: 100
      })
      .id('rect')

      Button('按钮').alignRules({
        left: { anchor: 'rect', align: HorizontalAlign.End },
        top: { anchor: 'rect', align: VerticalAlign.Bottom }
      }).id('button').width(100).height(150)

      Button('按钮2').alignRules({
        right: { anchor: 'button', align: HorizontalAlign.Start },
        top: { anchor: 'button', align: VerticalAlign.Bottom }
      }).width(100).height(150)
    }.width('100%')
    .height('100%')
  }
}


说明:
按钮1左边与矩形右边对齐,按钮1顶部与按钮底部对齐
按钮2右边与按钮1左边对齐,按钮2顶部与按钮1底部对齐

运行效果:
在这里插入图片描述

示例5:
@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Button('按钮').alignRules({
        right: { anchor: '__container__', align: HorizontalAlign.End },
        top: { anchor: '__container__', align: VerticalAlign.Top },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
      })

    }
  }
}

说明:通过设置按钮顶部贴父容器顶部,底部贴父容器底部,按钮高度自动填满父元素

运行效果:
在这里插入图片描述

(5)相对布局2(offset)

通用属性offset的作用跟css相对布局是一样的,相对于自身的位置进行偏移,不影响父容器布局。

基本语法:

组件.offset({
         x:10,
         y:10
       })

组件.offset({
         x:-10,
         y:-10
       })
组件.offset({
         x:'10px',
         y:'10vp'
       })
       
组件.offset({
         x:"20%",
         y:10
       })

说明:
1、x表示水平方向偏移量,y表示纵向方法偏移量,值单位默认vp,也可以字符串自带单位。
2、x为负值表示向左偏移,正值向右偏移,同理y为负值表示向上偏移,正值向下偏移。
3、值也支持%字符串,百分比相对的是父容器的宽或高,例如x:50%,则组件向右偏移父容器宽度的50%

示例

按钮初始位置在屏幕左上角

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮')
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

在这里插入图片描述

示例1:

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').offset({
         x:100,
         y:100
       })
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}


运行效果:

在这里插入图片描述

示例2:

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').offset({
         x:'50%',
         y:0
       })
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}


运行效果:

在这里插入图片描述

(6)绝对布局(position)

通用属性position的作用跟css绝对布局是一样的,子组件相对父容器确定位置,当父容器为Row/Column/Flex时,设置position的子组件不占位,不影响其他兄弟子组件正常布局。

基本语法:

组件.position({
          x:10,
          y:10
       })

组件.position({
          x:-10,
         y:-10
       })

组件.position({
          x:"50%",
         y:"10px"
       })

组件.position({
          left:10,
          top:10
       })
组件.position({
          right:10,
          bottom:10
       })

说明:
1、入参类型既支持Position(x\y)类型也支持Edges(top\bottom\left\right)类型
2、和offset一样值支持字符串单位、百分比、数字类型,默认单位vp,支持正负值。
3、Edges(top\bottom\left\right)类型用法跟css基本一致,top相对父容器顶部距离,bottom相对父容器底部距离,left相对父容器左边距离,right相对父容器右边距离,通过边距来确定组件相对于父组件的位置。只需设置2个方向就能确定位置,比如top+left或者bottom+right,同时设置top和bottom,仅top生效;同时设置left和right,仅left生效
4、Position(x\y)类型的x\y实际等同于Edges left\top,x=left,y=top
5、与css不同的是鸿蒙的绝对布局相对父容器起始位置需要扣去padding部分,相当于ie盒子模型内容部分。

示例1:

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').position({
         x:'0',
         y:'500px'
       })
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}


运行效果:

在这里插入图片描述

示例2:

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').position({
         left:0,
        bottom:-25
       }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}


运行效果:
在这里插入图片描述

说明:按钮底部和父容器底部相距-25vp,也即按钮向下平移了25vp等于按钮自身高度一半

示例3:

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').position({
         right:0,
        bottom:0
       }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}


运行效果:
在这里插入图片描述

说明:按钮和父容器右边和底部贴合,距离为0,所以按钮位置在父容器右下角

示例4:

子组件位于父组件水平垂直居中通用方法:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('按钮').position({
        left: '50%',
        top: '50%'
      }).translate({
        x: '-50%',
        y: '-50%'
      }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}


运行效果:
在这里插入图片描述

说明:position+translate可以实现任意子组件水平垂直居中,position分别设置了50%此时子组件距离父组件上边和左边都为父组件宽高一半距离,此时子组件的左上角点刚好在父组件正中心点。想要让子组件居中只需让子组件的中心点和父组件中心重叠,把子组件向左和向上平移自身一半宽高即可,可以用通用属性translate进行平移

.translate({
        x: '-50%',
        y: '-50%'
      }

此处百分比相对组件本身宽高,负值表示往上或往左平移

示例5:

父容器带padding情况

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('按钮').position({
        top:0,
        left:0
      }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).padding(50)
  }
}

运行效果:
在这里插入图片描述

说明:从运行效果可以看出相对父容器起始位置需要扣除父容器的padding部分


二、布局中的渲染控制

在vue中可以使用v-if,v-else条件语句控制子组件是否渲染,也可以通过v-for循环渲染多个子组件。鸿蒙也有类似用法分别为if/else和ForEach

1. if/else

布局渲染条件控制语句

示例:

@Entry
@Component
struct Index {
  @State type:number=0
  build() {
    Column() {
        //显示文本
       if(this.type==0){
         Text('文本')
       }
       //显示按钮
       else if(this.type==1){
         Button('按钮')
       }
       //显示文本输入框
       else{
         TextInput({placeholder:'文本输入框'})
       }

       Button('改变类型').onClick(()=>{
          this.type=++this.type%3
       }).margin({top:100})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

运行效果

请添加图片描述

说明:通过改变状态变量type动态控制显示的子组件,

需要注意if else内部只能写入子组件不能写入arkTs语法,比如打印信息console.log()就会报错。

2. ForEach

布局循环渲染控制语句
语法:

ForEach(list:Array<ESObject>,fn:(item:ESObject,index:number)=>void,fn:(item:ESObject,index:number)=>string)
其中:item为数组当前元素值,index为循环的索引

ForEach有三个入参,第一个入参是数据源数组,第二个入参是个函数,内部添加要循环渲染的子组件,第三个参数是函数返回唯一标识key,第三个入参类似vue v-for 的key作用为了避免重复渲染导致的额外开销提高性能,所以返回的key必须唯一值,不然会异常

示例1:

@Entry
@Component
struct Index {
  @State list: number[] = [1, 2, 3, 4, 5, 6]

  build() {
    Column() {
      ForEach(this.list, (item: number, index: number) => {
      //需要循环渲染的子组件
        Row() {
          Text(`内容为${item},第${index}`)
        }.padding(15).justifyContent(FlexAlign.Start).width('100%')
        //
      }, (item: number, index: number) => index + '')
    }.width('100%').height('100%')
  }
}

运行结果:
在这里插入图片描述

示例2:

List和ListItem系统组件(列表)使用

@Entry
@Component
struct Index {
  @State list: number[] = [1, 2, 3, 4, 5, 6]

  build() {
    List() {
      ForEach(this.list, (item: number, index: number) => {
        ListItem() {
           Text(`${index}`)
        }.height(60).width('100%').border({
          width:1,
          color:"#f2f2f2"
        })
      }, (item: number, index: number) => index + '')
    }
  }
}


运行结果:

在这里插入图片描述

ps:如果列表数据非常多加载卡顿也可以使用懒加载LazyForEach,请看官网文档LazyForEach:数据懒加载这里不再介绍。


三、项目开发过程中布局像素单位的选择

1、像素单位介绍

鸿蒙布局像素单位支持px、vp、lpx、fp4种单位,其中fp主要用来设置字体大小,数值不写单位默认是vp

px

屏幕物理像素单位。

vp

虚拟像素单位类似安卓里面的dp,VP是根据屏幕的‌PPI(每英寸像素点数)进行换算的。具体换算公式为:vp = (px * 160) / PPI,在480PPI手机上1vp=3px,简而言之,vp是屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素。

fp

字体像素,与vp类似适用屏幕密度变化,区别在于fp会随系统字体大小设置变化。即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体,字体的实际显示大小就会在 vp 的基础上乘以 scale 系数,即 1 fp = 1 vp * scale

lpx

视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过designWidth配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。

lpx类似css里面的rem或者小程序里面的rpx单位,以屏幕宽度为基准一种比值逻辑单位

2、像素单位之间的转换

鸿蒙sdk已自带单位换算方法,直接调用即可,如下:

在这里插入图片描述
示例:

    //vp转px单位
    vp2px(20)
    //px转lpx
    px2lpx(20)
    //px转vp
    px2vp(20)
    //vp转lpx,没有直接转的函数,所以需要先把vp转px,在把px转lpx
    px2lpx(vp2px(20))

3、实际开发单位的选择

实际开发中我们需要适配所有设备, 选择某个单位使得布局在所有设备显示比例一样。从上面介绍看,vp和lpx都能满足我们的需求,尽管vp是默认单位也是官方推荐使用的单位,但在实际开发中我们拿到设计稿尺寸跟vp换算复杂无法直接计算出来,在1440屏幕宽度的设备上1vp大约=3px,假如从设计稿读取尺寸为285px,换算为vp=285/3,每个地方都要这样心算就比较费劲了。当然你也可以选择用px2vp(285),但是每个地方都这样写代码显得囊肿。所以推荐使用lpx作为开发单位。如果你是web开发出身,你完全可以把lpx当做rem单位理解,鸿蒙的lpx支持我们自定义基准宽(designWidth),所以我们能轻松通过自定义designWidth值使得设计稿1px=1lpx。这样就不需要复杂换算,设计稿读取值多少就写多少。

lpx基准宽(designWidth)设置:

路径: entry/src/main/resources/base/profile/main_pages.json,添加:

"window": {
    "designWidth": 750
  }

在这里插入图片描述

拿到的设计稿宽多少,designWidth值就设置多少,比如设计稿是1080x1920,designWidth设置为1080。
这样设置完毕1px=1lpx

验证:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('750lpx').width('750lpx').height('100lpx').backgroundColor(Color.Red)
      Text('730lpx').width('730lpx').height('100lpx').backgroundColor(Color.Yellow)
      Text('375lpx').width('375lpx').height('100lpx').backgroundColor(Color.Blue)
    }.alignItems(HorizontalAlign.Start)
  }
}

运行效果:
在这里插入图片描述
从运行效果可以看出当宽设置为750lpx刚好铺满屏幕,730lpx有一点间隙,375lpx占屏幕一半,符合预期效果,验证成功。

四、结束

结束前还是顺便提下鸿蒙布局里有个很常用的通用属性跟css命名长得最不一样,可能很多人一开始都找不到。

css中有个:overflow: hidden 表示子元素超出父元素范围的部分会被隐藏

对应的鸿蒙写法为:clip(true)

示例

未加clip(true)效果

@Entry
@Component
struct Index {
  build() {
    Stack() {
      Column() {
        Button('按钮').width(350).height(100)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Red)
      .justifyContent(FlexAlign.Center)
     
    }.height('100%').width('100%')
  }
}

在这里插入图片描述

加clip(true)效果

@Entry
@Component
struct Index {
  build() {
    Stack() {
      Column() {
        Button('按钮').width(350).height(100)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Red)
      .justifyContent(FlexAlign.Center)
      .clip(true)
    }.height('100%').width('100%')
  }
}

在这里插入图片描述

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

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

相关文章

设计模式-七个基本原则之一-单一职责原则 + SpringBoot案例

单一职责原理:(SRP) 面向对象七个基本原则之一 清晰的职责&#xff1a;每个类应该有一个明确的职责&#xff0c;避免将多个责任混合在一起。降低耦合&#xff1a;通过将不同的职责分开&#xff0c;可以降低类之间的耦合度&#xff0c;提高系统的灵活性。易于维护&#xff1a;当…

【Linux】进程信号全攻略(一)

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 一&#xff1a;&#x1f525; 信号的概念 二&#xff1a;&#x1f525; 信号产生的方式 &#x1f98b; 使用键盘&#x1f98b; 系统调用函数&#x1f98b; 软件条件&#x1f98b; 进程异…

selenium+chromedriver下载与安装

安装selenium 使用pip安装selenium&#xff1a; pip install selenium安装成功&#xff1a; 安装WebDriver 根据你使用的浏览器下载相应的 WebDriver。 Chrome&#xff1a;下载地址Firefox&#xff1a;下载地址Edge&#xff1a;下载地址Safari&#xff1a;下载地址 1、c…

前端环境配置

对于换公司的小伙伴来讲&#xff0c;重新安装环境&#xff0c;百度或许稍微有点麻烦&#xff0c;本文章让你无脑式直接操作&#xff0c;保证环境畅通无阻。 1.安装nvm-setup 该插件是一款管理nodeJs的包&#xff0c;无需你单独下载nodeJs去安装&#xff0c;只需要下载安装此…

python(自用查看版)

目录 1.注意事项 1.1 python的除法不是整除&#xff0c;得到的是浮点数 1.2算术符号基于数学的算术优先级。具体可自行查看。 1.3注释 1.4缩进 1.5换行 1.6常见关键字 1.7续行符 1.8报错 1.9赋值 1.10比较运算符 2.常量和表达式 3.变量 4.数据类型 4.1整型int …

基于Prometheus的client_golang库实现应用的自定义可观测监控

文章目录 1. 安装client_golang库2. 编写可观测监控代码3. 运行效果4. jar、graalvm、golang编译运行版本对比 前文使用javagraalvm实现原生应用可观测监控&#xff1a; prometheus client_java实现进程的CPU、内存、IO、流量的可观测&#xff0c;但是部分java依赖包使用了复杂…

Docker网络概述

1. Docker 网络概述 1.1 网络组件 Docker网络的核心组件包括网络驱动程序、网络、容器以及IP地址管理&#xff08;IPAM&#xff09;。这些组件共同工作&#xff0c;为容器提供网络连接和通信能力。 网络驱动程序&#xff1a;Docker支持多种网络驱动程序&#xff0c;每种驱动程…

新160个crackme - 094-TheBigMan-crackme6

运行分析 需破解Name和Serial PE分析 LCC win32程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida搜索字符串&#xff0c;进入关键函数 ida动调&#xff0c;发现关键判断函数func_1 进入后&#xff0c;发现Name长度需满足一定要求&#xff0c;且func_2返回值不能…

大数据-214 数据挖掘 机器学习理论 - KMeans Python 实现 算法验证 sklearn n_clusters labels

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

【Django】视图函数

【Django】视图函数 视图函数的本质是Python中的函数&#xff0c;视图函数负责处理用户的请求并返回响应&#xff0c;该响应可以是网页的HTML内容、重定向、404错误、XML文档、图像或者任何东西&#xff0c;一般在应用中的views.py编写&#xff0c;示例代码如下&#xff1a; …

kafka+zookeeper的搭建

kafka从2.8版本开始&#xff0c;就可以不用配置zookeeper了&#xff0c;但是也可以继续配置。我目前使用的kafka版本是kafka_2.12-3.0.0.tgz&#xff0c;其中前面的2.12表示是使用该版本的scala语言进行编写的&#xff0c;而后面的3.00才是kafka当前的版本。 通过百度网盘分享…

了解bootstrap改造asp.net core MVC的样式模板

我们都知道&#xff0c;在使用默认的asp.net core MVC模板建立项目的时候&#xff0c;里面的样式是已经事先被写好了的。一般来说都在css目录下的site.css和bootstrap.css及下面的bootstrap.min.css中。我们打开bootstrap这些样式文件&#xff0c;里面有大量的样式类的定义&…

HTMLCSS:旋转的动态卡片

效果演示 这段代码创建了一个具有动态背景和渐变效果的卡片。卡片背景有一个无限循环的旋转动画&#xff0c;增加了视觉吸引力。这种效果可以用于展示个人信息、项目介绍或其他需要吸引用户注意的内容。 HTML <div class"card"><h3>前端Hardy</h3&…

深入Pillow:处理图像下载中的意外挑战

在当今数字化时代&#xff0c;获取和处理图像数据已经成为了许多应用程序的核心功能。从社交媒体到电子商务&#xff0c;图像的获取和处理对于用户体验至关重要。下载图片不仅能够丰富我们的内容&#xff0c;还能够通过分析图像数据为我们的应用提供更多价值。然而&#xff0c;…

管理 Elasticsearch 变得更容易了,非常容易!

作者&#xff1a;来自 Elastic Ken Exner Elasticsearch 用户&#xff0c;我们听到了你的心声。管理 Elasticsearch 有时会变得很复杂&#xff0c;面临的挑战包括性能调整、问题检测和资源优化。我们一直致力于简化你的体验。今天&#xff0c;我们宣布了自收购 Opster 以来的一…

Linux挖矿病毒(kswapd0进程使cpu爆满)

一、摘要 事情起因:有台测试服务器很久没用了&#xff0c;突然监控到CPU飙到了95以上&#xff0c;并且阿里云服务器厂商还发送了通知消息&#xff0c;【阿里云】尊敬的xxh: 经检测您的阿里云服务&#xff08;ECS实例&#xff09;i-xxx存在挖矿活动。因此很明确服务器中挖矿病毒…

【go从零单排】迭代器(Iterators)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;迭代器的实现通常不是通过语言内置的迭代器类型&#x…

(混乱版)数据冒险-ld,sub和and

第一张图没有数据转发 从这张图来看&#xff0c;如果没有数据转发机制&#xff0c;流水线的执行会出现更多的停顿。这种情况下&#xff0c;数据依赖只能通过**插入停顿周期&#xff08;stalls&#xff09;**来解决。具体分析如下&#xff1a; 指令序列 ld r1, 0(r2)&#xf…

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代&#xff0c;抖音电商以其独特的魅力&#xff0c;成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中&#xff0c;成都睿明智科技有限公司犹如一艘稳健的航船&#xff0c;引领着无数企业驶向成功的彼岸。今天&#xff0c;就让我们一起揭开成…

ssm071北京集联软件科技有限公司信息管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;北京集联软件科技有限公司信息管理系统 \ 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本信息…