学习鸿蒙基础（9）

news2024/11/29 21:32:22

目录

一、鸿蒙国际化配置

二、鸿蒙常用组件介绍

三、鸿蒙像素单位介绍

 四、鸿蒙布局介绍

1、Row与Column线性布局

2、层叠布局-Stack

3、弹性布局

4、栅格布局

 5、网格布局

一、鸿蒙国际化配置

base目录下为默认的string。en_US对应美国的。zh_CN对应中国的。新增一个string以后。这3个文件夹下必须都有相同的key和value。

二、鸿蒙常用组件介绍
@Entry
@Component
//简单的常用组件集合
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text($r("app.string.PassWord_label"))
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .backgroundColor($r("app.color.Color_Blue"))
        Text("1111111111111111111111111").fontSize(35)
          .width(200).maxLines(1).textOverflow({
            overflow:TextOverflow.Ellipsis
        }).backgroundColor(Color.Yellow)

        Button(){
          Row(){
            LoadingProgress().width(50).height(50).color(Color.White)
            Text("登录").fontColor(Color.White)
          }.width(100)
        }

        TextInput({
          placeholder:"请输入"
        }).fontSize(18).type(InputType.Password)

        Divider()
        TextArea({
          placeholder:"多行文本"
        }).height(100).placeholderColor(Color.Brown)//多行文本
        Row(){
          CheckboxGroup({
            group:"list"
          }).onChange(v=>{
            console.log("11",JSON.stringify(v))
          })
          Row(){
            Checkbox({group:"list",name:"测试"})
            Text("测试")
          }
          Row(){
            Checkbox({group:"list",name:'跑步'})
            Text("跑步")
          }
        }


        Row(){
          Row(){
            Radio({
              group:'11',value:'语文'
            }).onChange(v=>{
             v&& console.log("语文")
            })
            Text("语文")
          }

          Row(){
            Radio({
              group:'11',value:'数学'
            }).onChange(v=>{
              v&& console.log("数学")
            })
            Text("数学")
          }
          Row(){
            Radio({
              group:'11',value:'英语'
            }).onChange(v=>{
              v&& console.log("英语")
            })
            Text("英语")
          }
        }

        // 开关
        Toggle({
          type:ToggleType.Switch,
          isOn:false
        }).colorBlend(Color.Red).borderColor(Color.Blue)
      // 开关
        Toggle({
          type:ToggleType.Checkbox,
          isOn:false
        }).colorBlend(Color.Red).borderColor(Color.Blue)

        // 开关
        Toggle({
          type:ToggleType.Button,
          isOn:true
        }){
          Text("测试")
        }
// ------------------------------------------------------------------------------------------
        // Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
        // Cover：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
        // Auto：自适应显示。
        // Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
        // ScaleDown：保持宽高比显示，图片缩小或者保持不变。
        // None：保持原有尺寸显示。
// --------------------------------------------------------------------------------------------
//         Image('images/2.jpg')
//           .width(300)
//           .height(300).border({ width:1 }).objectFit(ImageFit.Cover)
        // Image('images/2.jpg').width(300)
        // Image($r("app.media.icon")).width(300).interpolation(ImageInterpolation.High)
        Image($r("app.media.icon"))
          .border({width:1})
          .renderMode(ImageRenderMode.Original)
          .objectFit(ImageFit.None)
          .width(300)
          .interpolation(ImageInterpolation.High)
          .objectRepeat(ImageRepeat.XY)

      }
      .width('100%').height("100%")
    }
    .height('100%')
  }
}
三、鸿蒙像素单位介绍

鸿蒙为开发者提供4种像素单位，框架采用vp为基准数据单位。
px：屏幕物理像素单位。
vp：屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。在实际宽度为1440物理像素的屏幕上，1vp约等于3px。
fp：字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。
lpx：视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度 (通过designWidth配置) 的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

例如：
1.1vp =在160dpi中的1px，vp保证了不同分辨率下 视觉效果的等价性，比如一个图标，在不同分辨率下都是视觉效果是等价。
   应用场景:适合绝大多数场景。
2.1fp=在160dpi中的1px 乘以系统的缩放比例。
   应用场景:用来设定字体大小，且需要支持系统字体大小调整时使用。
3.designWidth =1440， 1lpx= 1px
  应用场景:对于UI图，部分需要高度还原的场景使用。

desingnWidth在这个文件夹里设置。

 四、鸿蒙布局介绍
1、Row与Column线性布局

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

 布局容器:具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素:布局容器内部的元素。
主轴:线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
交叉轴: 垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
间距:布局子元素的间距。

@Entry
@Component
struct PageDpi {
  @State message: string = 'Hello World'

  build() {
    // Row() {
    //   Text("rr").width(100).height(100).backgroundColor(Color.Red)
    //   Text("ff").width(100).height(100).backgroundColor(Color.Blue)
    //   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)
    // }
    // // 主轴的方向————>水平
    // .justifyContent(FlexAlign.SpaceEvenly)
    // // 交叉轴的方向————>垂直
    // .alignItems(VerticalAlign.Top)
    // .height('100%').backgroundColor(Color.Pink).width("100%")

    // Column() {
    //   Text("rr").width(100).height(100).backgroundColor(Color.Red)
    //   Text("ff").width(100).height(100).backgroundColor(Color.Blue)
    //   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)
    // }
    // // 主轴的方向————>垂直
    // .justifyContent(FlexAlign.SpaceEvenly)
    // // 交叉轴的方向————>水平
    // .alignItems(HorizontalAlign.Start)
    // .height('100%').backgroundColor(Color.Pink).width("100%")

    Row() {
      Column() {
        Row(){
          Button("退出")
          Blank()//撑满空白的组件
          Text("主页")
          Blank()
          Button("确定")
        }.width("100%").backgroundColor(Color.Gray)

        Row({space:50}) {
          Text("rr").layoutWeight(1).height(100).backgroundColor(Color.Red)
          Text("ff").layoutWeight(1).height(100).backgroundColor(Color.Blue)
          Text("aa").layoutWeight(1).height(100).backgroundColor(Color.Orange)
        }.justifyContent(FlexAlign.Start)

        Row({space:10}){
          Text("username")
          TextInput().layoutWeight(100).backgroundColor(Color.Orange)
        }.margin(10)
      }.width("100%").height("100%").justifyContent(FlexAlign.Start)
    }.height("100%")

  }
}
2、层叠布局-Stack

层叠布局(StackLayout)用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素(子组件)依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

@Entry
@Component
struct PageStack1 {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Stack() {
          Text("龙")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(300)
            .height(300)
            .backgroundColor(Color.Orange)
          Text("兔")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
        //.alignContent(Alignment.TopStart)设置显示的位置
        }.alignContent(Alignment.TopStart).height(350).backgroundColor(Color.Gray).width(350)
        
        Stack() {
          Text("兔")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(100)
            .height(100)
            .backgroundColor(Color.Red).zIndex(2)//zIndex优先级
          Text("龙")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(300)
            .height(300)
            .backgroundColor(Color.Orange)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

层叠布局举例，回到顶部功能：

@Entry
@Component
struct PageStack2 {
  @State message: string = 'Hello World'
  @State list: string[] = ["子（鼠）", "丑（牛）", "寅（虎）", "卯（兔）"
    , "辰（龙）", "巳（蛇）", "午（马）", "未（羊）", "申（猴）", "酉（鸡）", "戌（狗）", "亥（猪）"]
  @State isShow: boolean = false

  scrolly:Scroller=new Scroller();

  build() {
    Row() {
      Column() {
        Stack() {
          List({scroller:this.scrolly}) {
            ForEach(this.list, item => {
              ListItem() {
                Text(item).fontSize(25)
              }.width("100%").height(200)
            })
          }.onScrollIndex((start, end) => {
            if(end>4){
              this.isShow=true
            }else{
              this.isShow=false
            }
          })

          if (this.isShow) {
            Text("回顶部")
              .backgroundColor(Color.Orange)
              .borderRadius(10)
              .width(100)
              .height(50)
              .fontSize(27)
              .textAlign(TextAlign.Center)
              .margin(18).onClick(()=>{
              this.scrolly.scrollToIndex(0)
            })
          }
        }.alignContent(Alignment.BottomEnd)
      }
      .width('100%')
    }
    .height('100%')
  }
}
3、弹性布局

弹性布局Flex 提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。

@Entry
@Component
struct PageFlex {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {

        // Flex({
        //   direction:FlexDirection.Row,//方向
        //   justifyContent:FlexAlign.Center,//主轴
        //   // alignItems:ItemAlign.Baseline
        //   alignItems:ItemAlign.Center,
        // }){
        //   Text("111").width(100).height(100).backgroundColor(Color.Black).
        //   alignSelf(ItemAlign.Start)
        //   Text("222").width(100).height(200).backgroundColor(Color.Red)
        //   Text("333").width(100).height(100).backgroundColor(Color.Orange)
        //     .alignSelf(ItemAlign.End)
        // }.width(400).height(400).backgroundColor(Color.Gray)

      //   Flex({
      //     direction: FlexDirection.Row, //方向
      //     justifyContent: FlexAlign.Start, //主轴
      //     // alignItems:ItemAlign.Baseline
      //     alignItems: ItemAlign.Center,
      //     wrap: FlexWrap.Wrap
      //   }) {
      //     Text("111").width("50%").height(100).backgroundColor(Color.Black)
      //     Text("222").width("50%").height(100).backgroundColor(Color.Red)
      //     Text("333").width("50%").height(100).backgroundColor(Color.Orange)
      //   }.width(400).height(400).backgroundColor(Color.Gray)
      // }

      Flex({
        direction: FlexDirection.Row, //方向
        justifyContent: FlexAlign.Start, //主轴
        // alignItems:ItemAlign.Baseline
        alignItems: ItemAlign.Center
      }) {
        Text("111").width(100).height(100).backgroundColor(Color.Black)
          .flexGrow(1)//相当于权重
        Text("222").width(100).height(100).backgroundColor(Color.Red)
          .flexGrow(1)
        Text("333").width(100).height(100).backgroundColor(Color.Orange)
          .flexGrow(1)
      }.width(400).height(400).backgroundColor(Color.Gray)
    }

    .width('100%')
  }

  .height('100%')
}
}
4、栅格布局

栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括:
1.提供可循的规律: 栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。
2.统一的定位标注:栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。
3.灵活的间距调整方法:栅格布局可以提供一种灵活的间距调整方法满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。
4.自动换行和自适应:栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页简布局更加灵活和适应性强。
5.在GridRow栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点，支持六种不同尺寸 (xs,sm,md,lg,xl,xxl)设备的布局设置。

断点名称                  设备描述
  xs:                      最小宽度类型设备
 sm:                     小宽度类型设备
md:                     中等宽度类型设备
  lg:                      大宽度类型设备
  xl:                       特大宽度类型设备
xxl:                       超大宽度类型设备

 breakpoints: [value: ['320vp'，'520vp'，'840vp'，"1080vp',   '2000vp']}

@Entry
@Component
struct PageGrid {
  @State message: string = 'Hello World'
  @State bgColors: Color[] = [Color.Gray, Color.Red, Color.Orange, Color.Black, Color.Blue, Color.Pink, Color.Brown, Color.Yellow]

  build() {
    Row() {
      // 默认12栅格
      // GridRow({
      //   breakpoints: { value: ["200vp", "300vp", "400vp", "500vp", "600vp"] },
      // }) {
      //   ForEach(this.bgColors, (item, index) => {
      //     GridCol({
      //       span: { xs:12, sm:6, md:4, lg:3, xl:2 }//一个孩子占几份
      //     }) {
      //       Row() {
      //             Text((index+1)+"").width("100%").height("50")
      //       }
      //     }.backgroundColor(item)
      //   })
      // }.width("100%")

      // 这个方法常用
      GridRow({
        direction:GridRowDirection.RowReverse,//反向排列
        gutter:10,
        columns: { xs:1, sm:2, md:4, lg:6, xxl:8 },
        breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] },
      }) {
        ForEach(this.bgColors, (item, index) => {
          GridCol() {
            Row() {
              Text(`${index+1}`).width("100%").height(50)
            }
          }.backgroundColor(item)
        })
      }.width("100%")

    }
    .height('100%')


  }
}
 5、网格布局

网格布局是由“行”和“列"“分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。
通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。rowsTemplate和columnsTemplate属性值是一个由多个空格和数字+fr"间隔拼接的字符串，r的个数即网格布后的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。

 

 Grid() {}
.rowsTemplate('lfr 1fr 1fr')
.columnsTemplate('lfr 2fr lfr')

@Entry
@Component
struct PageGrid1 {
  @State message: string = 'Hello World'

  @Styles
  style(){
    .backgroundColor(Color.Red)
    .width("33.33333%")
    // .height("50%")
  }

  build() {
    Row() {
      // Column() {
      //   Grid(){
      //     GridItem(){
      //       Text("111")
      //     }.style().columnStart(0).columnEnd(1)
      //     GridItem(){
      //       Text("222")
      //     }.style()
      //     GridItem(){
      //       Text("333")
      //     }.style().columnStart(2).columnEnd(3)
      //     GridItem(){
      //       Text("444")
      //     }.style()
      //     GridItem(){
      //       Text("555")
      //     }.style()
      //     GridItem(){
      //       Text("666")
      //     }.style()
      //   }.width('100%').height(200).columnsTemplate("1fr 1fr 1fr")
      //   .rowsTemplate("1fr 1fr").columnsGap(10).rowsGap(10)
      // }
      // .width('100%')
      //
      Column() {
        Grid() {
          GridItem() {
            Text("111")
          }.style()

          GridItem() {
            Text("222")
          }.style()

          GridItem() {
            Text("333")
          }.style()

          GridItem() {
            Text("444")
          }.style()

          GridItem() {
            Text("555")
          }.style()

          GridItem() {
            Text("666")
          }.style()
          GridItem() {
            Text("777")
          }.style()

          GridItem() {
            Text("888")
          }.style()

          GridItem() {
            Text("999")
          }.style()
        }
        .width('100%')
        .height(200)
        // .columnsTemplate("1fr 1fr 1fr")
        .rowsTemplate("1fr 1fr")
        .columnsGap(10)
        .rowsGap(10)
      }
      .width('100%')
    }
    .height('100%')
  }
}

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

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

相关文章

[RAM] 图解 RAM 结构原理

[RAM] 图解 RAM 结构原理

主页： 元存储博客 文章目录 前言1. Channel2. Dimm3. Rank4. Bank5. Row6. Column7. Beat8. Burst Length总结 前言 从CPU至DRAM晶粒之间依据层级由大至小为channel>DIMM>rank>chip>bank>row/column。 图片来源： 电脑王 DRAM层级关系 DR…
阅读更多...
应急响应靶机训练-Linux1题解

应急响应靶机训练-Linux1题解

前言 接上文，应急响应靶机训练Linux1 靶机地址： 应急响应靶机-Linux(1) 最近感冒了，就没录视频版。 题解 目标：3个flag以及黑客的ip地址 登陆虚拟机 密码defend flag1: su history flag{thisismybaby} flag2：…
阅读更多...
AI Agent智能应用从0到1定制开发 （包含全部教学视频和全部源码，附链接）

AI Agent智能应用从0到1定制开发 （包含全部教学视频和全部源码，附链接）

链接分享：https://pan.baidu.com/s/1Cjk-MNDY4DYQKvNI1L4Tzg?pwd3vcd 提取码:3vcd 全部教学视频和全部源码链接分享在下方。 第1章：多模型强应用：AI2.0时代应用开发者机会 在AI2.0时代，应用开发者面临着前所未有的机遇。这一章…
阅读更多...
盘点最适合做剧场版的国漫，最后一部有望成为巅峰

盘点最适合做剧场版的国漫，最后一部有望成为巅峰

最近《完美世界》动画官宣首部剧场版，主要讲述石昊和火灵儿的故事。这个消息一出，引发了很多漫迷的讨论，其实现在已经有好几部国漫做过剧场版，还有是观众一致希望未来会出剧场版的。那么究竟是哪些国漫呢，下面就一起来…
阅读更多...
源支付 V7 版，150购买，需要的下载研究,拿走回复

源支付 V7 版，150购买，需要的下载研究,拿走回复

源支付 V7 版，150购买，需要的下载研究,拿走回复 来自站长论坛搬砖，站长论坛搬砖，站长论坛搬砖，站长论坛搬砖，下载地址在最后 请按官方教程配置，专为个人站长打造的聚合免签系统，拥有…
阅读更多...
视频监控平台和视频接入网关，支持HTTPS实现视频浏览和录像回放

视频监控平台和视频接入网关，支持HTTPS实现视频浏览和录像回放

目录 一、https协议介绍 （一）什么叫https （二）https的工作原理 （三）https和http的区别 二、视频监控平台为何要采用https （一）采用HTTPS浏览视频的好处体现在以下几个方面&…
阅读更多...
手撕算法-跳跃游戏

手撕算法-跳跃游戏

描述 分析 如果某一个作为 起跳点 的格子可以跳跃的距离是 3，那么表示后面 3 个格子都可以作为 起跳点可以对每一个能作为 起跳点 的格子都尝试跳一次，把 能跳到最远的距离 不断更新如果可以一直跳到最后，就成功了 代码 class Solution {…
阅读更多...
使用Leaflet.rotatedMaker进行航班飞行航向模拟的实践

使用Leaflet.rotatedMaker进行航班飞行航向模拟的实践

目录 前言 一、Leaflet的不足 1、方向插件 2、方向控制脚本说明 二、实时航向可视化实现 1、创建主体框架 2、飞机展示 3、位置和方位模拟 三、成果及分析 1、成果展示 2、方向绑定解读 总结 前言 众所周知，物体在空间中的运动（比如飞行、跑步…
阅读更多...
【JAVA】Idea 右侧的gradle 不见了

【JAVA】Idea 右侧的gradle 不见了

1. 找到项目的build.gradle 文件，右键 2. 找到“Link Gradle Project”选项 3. 右侧就出现了gradle
阅读更多...
通过node 后端实现颜色窃贼 (取出某个图片的主体rgb颜色 )

通过node 后端实现颜色窃贼 (取出某个图片的主体rgb颜色 )

1.需求 我前端轮播图的背景色 想通过每一张轮播图片的颜色作为背景色 这样的话 需要通过一张图片 取出图片的颜色 这个工作通过前端去处理 也可以通过后端去处理 前端我试了试 color-thief 的插件 但是 这个插件是基于canvas 的模式来的 我需要在小程序中使用这个插件 而且是…
阅读更多...
大规模云存储展望｜2024逐步复苏，2025全面恢复

大规模云存储展望｜2024逐步复苏，2025全面恢复

SSD以其高速度和低延迟等优点，尤其在容量增长和每GB成本降低方面，SSD的增长速度预计将超过近线硬盘（Nearline HDD）。尽管HDD在大容量存储方面仍有一定优势，但由于SSD在访问速度、能耗及体积等方面的突出表现&#xff0…
阅读更多...
macOS系统配置RUST开发环境

macOS系统配置RUST开发环境

打开rust语言官方网,然后点击马上开始: Rust 程序设计语言 配置RUST开发环境: 使用curl下载rust安装脚本: 复制到终端执行: curl --proto =https --tlsv1.2 -sSf https://sh.rustup.rs | sh 输入: y 选择默认安装,输入: 1
阅读更多...
在ubuntu上搭建系统监控系统

在ubuntu上搭建系统监控系统

大纲 数据生产方安装和运行验证 数据收集、存储和分发方下载和解压修改配置运行验证 数据消费方下载和运行验证新增数据源新增看板关联看板和数据源效果展现 参考资料 在一个监控系统中，一定会有“数据生产方”和“数据消费方”存在。“数据生产方”用于产出需要监控…
阅读更多...
wiztree免费的c盘清理软件

wiztree免费的c盘清理软件

现如今，我们无论是工作还是学习，都已经离不开电脑了，经常使用电脑就会导致电脑的“垃圾”越来越多，从而导致磁盘爆红。 相信大家多多少少都体会过这大红的压迫感吧，想清理但是不敢删，不清理吧软件用不了&a…
阅读更多...
pnpm、monorepo分包管理、多包管理、npm、vite、前端工程化、保姆级教程

pnpm、monorepo分包管理、多包管理、npm、vite、前端工程化、保姆级教程

浅尝pnpm monorepo 多包管理方案 💡tips: 创建pnpm monorope多包管理框架流程 初始化 mkdir taurus & cd taurus pnpm init创建基础文件 创建文件pnpm-workspace.yaml packages:- packages/**创建文件夹packages/ -packages/ -package.json -pnpm-workspace…
阅读更多...
关于Anaconda通过environment.yml配置环境的常见问题解决办法

关于Anaconda通过environment.yml配置环境的常见问题解决办法

配环境总是一个老生常谈的问题，有些项目写得好的，会把一些冗余的包删除，只留下必要的包，并且手把手教你pip安装，但是有些项目就直接丢一个200~300行的environment.yaml文件或者requirement.txt文件让你自己去配&#x…
阅读更多...
Modbus转Profinet网关快速解决PLC插槽数量不够用的烦恼

Modbus转Profinet网关快速解决PLC插槽数量不够用的烦恼

通过Modbus转Profinet（XD-MDPN100）网关的应用，不仅可以实现Modbus设备与Profinet网络的平滑对接，还能有效解决PLC插槽限制和Modbus指令轮询等问题，Modbus转Profinet网关（XD-MDPN100）在解决PLC插…
阅读更多...
element-ui-plus el-tree 树形结构如何自定义内容

element-ui-plus el-tree 树形结构如何自定义内容

element-ui-plus el-tree 树形结构如何自定义内容 本文提及的 elementUI 版本 为 elementUI Plus 版本 一、需求 项目中遇到一个需要设置权限的地方，但目录和权限是放在一起的，这样就很不好区分类别，为了区分类别，就需要自定义树…
阅读更多...
1.1 单片机的概念

1.1 单片机的概念

一，单片机的概念 单片机（Single-Chip Microcomputer），也被称为单片微控制器，是一种集成电路芯片。它采用超大规模集成电路技术，将具有数据处理能力的中央处理器CPU、随机存储器RAM、只读存储器ROM、多种I/O口和中断系统、定时器/计数器等功能（可能还包括显示驱动电路、…
阅读更多...
LabVIEW车载轴承振动监测系统

LabVIEW车载轴承振动监测系统

LabVIEW车载轴承振动监测系统 随着汽车工业的快速发展，车用轴承的稳定性和可靠性对保障车辆安全运行越来越重要。目前，大多数车用轴承工作在恶劣的环境下，容易出现各种故障。开发了一种基于LabVIEW的车载轴承振动监测系统，提高车…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023