当前位置： 首页 > news >正文

ArkTs的容器布局

news 来源：原创 2025/6/18 21:13:33

组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成，开发中可以根据自己的需求，选择合适的布局进行页面开发。

一. 如何选择布局

声明式UI提供了以下10种常见布局，开发者可根据实际应用场景选择合适的布局进行页面开发。

布局应用场景
线性布局（ROW、Column）如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局
层叠布局（Stack）组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。
弹性布局（Flex）弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能够有更好的视觉上的填充效果
相对布局（RelativeContainer）

相对布局是在二维空间中的布局方式，不需要遵循线性布局的规则，布局方式更为自由。通过在子组件上设置锚点规则（AlignRules）使子组件能够将自己在横轴、纵轴中的位置对其。设置的锚点规则可以天然支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。

栅格布局（GridRow、GridCol）栅格时多设备场景下通用的辅助定位工具，可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分，可以实现不同设备下不同的布局，空间划分更随心所欲，从而显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。推荐内容相同但布局不同时使用。
媒体查询（@ohos.mediaquery）媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局
列表（List）使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集，例如图片和文本
网格（Grid）网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列，当网格容器尺寸发生变化时，所有子元素以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用，例如计算器、相册、日历等。
轮播（Swiper）轮播组件通常用于实现广告轮播、图片预览等。
选项卡（Tabs）选项卡可以在一个页面内快速实现试图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

二. 布局的使用

1.线性布局（Row、Column）

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

（1）.Row布局

Row容器内子元素按照水平方向排列。根据不同的排列方向

Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}
Row布局

（2）Column布局

Column容器内子元素按照垂直方向排列

Column(){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}
Column布局

（3）.基本概念

布局容器：具有布局能力的容器组件、可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列

布局子元素：布局容器内部的元素。

主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。

交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Colunn容器交叉轴为水平方向。

间距：布局子元素的间距。

（4）space属性

在布局容器内，可以通过space属性设置排列方向子元素的间距，使各子元素在排列方向上有等间距效果。

Row({space:25}){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}
Row容器间距图 

Column({space:25}){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}
Column容器间距图

（5）布局子元素在交叉轴上与主轴的对齐方式

在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对其方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign类型。

alignSeIf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。

Column布局子元素在交叉轴对齐方式
属性说明
HorizontalAlign.Start子元素在水平方向左对齐。
HorizontalAlign.Center子元素在水平方向居中对齐。
HorizontalAlign.End子元素在水平方向右对齐。
 Column(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').alignItems(HorizontalAlign.Start)

HorizontalAlign.Start 

Column(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').alignItems(HorizontalAlign.Center)
HorizontalAlign.Center 

Column(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').alignItems(HorizontalAlign.End)
HorizontalAlign.End

Column布局子元素在主轴排列方式
属性说明
justifyContent(FlexAlign.Start)元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
justifyContent(FlexAlign.Center)元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
justifyContent(FlexAlign.End)元素在垂直方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐
justifyContent(FlexAlign.SpaceBetween)垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
justifyContent(FlexAlign.SpaceAround)垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
justifyContent(FlexAlign.SpaceEvenly)垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
Column(){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.Start)
justifyContent(FlexAlign.Start) 

Column(){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.Center)
justifyContent(FlexAlign.Center) 

Column(){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.End)
justifyContent(FlexAlign.End) 
Column(){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceBetween)
justifyContent(FlexAlign.SpaceBetween) 

Column(){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceAround)

justifyContent(FlexAlign.SpaceAround) 

Column(){Text().width('100%').height(50).backgroundColor('red')Text().width('100%').height(50).backgroundColor('green')Text().width('100%').height(50).backgroundColor('blue')Text().width('100%').height(50).backgroundColor('#faf')Text().width('100%').height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceEvenly)
justifyContent(FlexAlign.SpaceEvenly)

Row容器内子元素在垂直方向上的排列
属性说明
VerticalAlign.Top子元素在垂直方向顶部对齐。
VerticalAlign.Center子元素在垂直方向居中对齐
VerticalAlign.Bottom子元素在垂直方向底部对齐
Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').alignItems(VerticalAlign.Top)

alignItems(VerticalAlign.Top) 

 Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').alignItems(VerticalAlign.Center)
alignItems(VerticalAlign.Center) 

Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').alignItems(VerticalAlign.Bottom)
alignItems(VerticalAlign.Bottom)

Row容器内子元素在水平方向上的排列
属性说明
justifyContent(FlexAlign.Start)元素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
justifyContent(FlexAlign.Center)元素在水平方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
justifyContent(FlexAlign.End)元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
justifyContent(FlexAlign.SpaceBetween)水平方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐
justifyContent(FlexAlign.SpaceAround)水平方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
justifyContent(FlexAlign.SpaceEvenly)水平方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.Start)
justifyContent(FlexAlign.Start) 

 Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.Center)

justifyContent(FlexAlign.Center) 

Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.End)
justifyContent(FlexAlign.End) 

Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceBetween)
justifyContent(FlexAlign.SpaceBetween) 

 Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceAround)
justifyContent(FlexAlign.SpaceAround) 

Row(){Text().width(50).height(50).backgroundColor('red')Text().width(50).height(50).backgroundColor('green')Text().width(50).height(50).backgroundColor('blue')Text().width(50).height(50).backgroundColor('#faf')Text().width(50).height(50).backgroundColor('#bdd')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceEvenly)
justifyContent(FlexAlign.SpaceEvenly)

（6）自适应拉伸

在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。

Row(){Text().width(50).height(50).backgroundColor('red')Blank()Text().width(50).height(50).backgroundColor('green')}.width('100%')
blank：自适应拉伸

（7）自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。

  • 父容器尺寸确定时，使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

Column(){Text().width(50).height(50).backgroundColor('red')Text().width(50).backgroundColor('green').layoutWeight(1)}.width('100%').height('100%')
layoutWeight:自适应缩放

（8）自适应延伸

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。

  • 在List中添加滚动条：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。

  • 使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。

 Scroll(){Column(){Text().width('100%').height(300).backgroundColor('red')Text().width('100%').height(300).backgroundColor('green')Text().width('100%').height(300).backgroundColor('blue')Text().width('100%').height(300).backgroundColor(Color.Orange)Text().width('100%').height(300).backgroundColor(Color.Pink)Text().width('100%').height(300).backgroundColor(Color.Yellow)}}.height('100%').width('100%')

Scroll组件属性
属性说明
scrollable(ScrollDirection.Vertical)滚动方向为垂直方向
scrollBar(BarState.On)滚动条常驻显示
scrollBarColor(Color.Gray)滚动条颜色
scrollBarWidth(10)滚动条宽度
edgeEffect(EdgeEffect.Spring)滚动到边沿后回弹

 2. 层叠布局（Stack）

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

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

Stack(){Text().width(200).height(200).backgroundColor('red')Text().width(150).height(150).backgroundColor('blue')Text().width(100).height(100).backgroundColor('green')}.height('100%').width('100%')

Stack

（1）Stack对齐方式

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

属性说明
TopStart左上
Top正上
TopEnd右上
Start正中间左边
Center中间
End正中间右边
BottomStart下左
Bottom正下
BottomEnd下右

（2）Z序控制（ZIndex）

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

在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。

Stack(){Text().width(200).height(200).backgroundColor('red').zIndex(1)Text().width(150).height(150).backgroundColor('blue')Text().width(100).height(100).backgroundColor('green')}.height('100%').width('100%')
层级ZIndex

3.弹性布局（FLex）

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸成为交叉轴尺寸。

（1）基本概念

主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。

交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置成为交叉轴起始点，结束位置成为交叉轴结束点。

（2）布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

Flex布局方向
属性说明
FlexDirection.Row（默认值）主轴为水平方向，子元素从起始端沿着水平方向开始排布。
FlexDirection.RowReverse主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。
FlexDirection.Column主轴为垂直方向，子元素从起始端沿着垂直方向开始排布
FlexDirection.ColumnReverse主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。
Flex(){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('100%').width('100%')
默认布局方向 

 Flex({direction:FlexDirection.Column}){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('100%').width('100%')
FlexDirection.Column 

Flex({direction:FlexDirection.RowReverse}){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('100%').width('100%')
FlexDirection.RowReverse 
 Flex({direction:FlexDirection.ColumnReverse}){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('100%').width('100%')
FlexDirection.ColumnReverse

（3）布局换行

弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

布局换行
属性说明
FlexWrap. NoWrap（默认值）不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
FlexWrap. Wrap换行，每一行子元素按照主轴方向排列。
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(0xF5DEB3)}.height('100%').width('100%')
FlexWrap.Wrap 
 Flex({wrap:FlexWrap.NoWrap}){Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)Text('2').width('50%').height(50).backgroundColor(0xD2B48C)Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
wrap:FlexWrap.NoWrap 
Flex({wrap:FlexWrap.WrapReverse}){Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)Text('2').width('50%').height(50).backgroundColor(0xD2B48C)Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
FlexWrap.WrapReverse

（4）主轴对齐方式

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

Flex主轴对齐方式
属性说明
FlexAlign.Start（默认值）子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
FlexAlign.Center子元素在主轴方向居中对齐
FlexAlign.End子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
FlexAlign.SpaceBetweenFlex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐
FlexAlign.SpaceAroundFlex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。
FlexAlign.SpaceEvenlyFlex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。
 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)}.height('100%').width('100%')
FlexAlign.Start 

Flex({justifyContent:FlexAlign.Center}){Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)Text('2').width('20%').height(50).backgroundColor(0xD2B48C)Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
FlexAlign.Center 
Flex({justifyContent:FlexAlign.End}){Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)Text('2').width('20%').height(50).backgroundColor(0xD2B48C)Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
FlexAlign.End 
Flex({justifyContent:FlexAlign.SpaceBetween}){Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)Text('2').width('20%').height(50).backgroundColor(0xD2B48C)Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
FlexAlign.SpaceBetween 

Flex({justifyContent:FlexAlign.SpaceAround}){Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)Text('2').width('20%').height(50).backgroundColor(0xD2B48C)Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
FlexAlign.SpaceAround 
Flex({justifyContent:FlexAlign.SpaceEvenly}){Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)Text('2').width('20%').height(50).backgroundColor(0xD2B48C)Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')

 

FlexAlign.SpaceEvenly

 

（5）交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。

容器组件设置交叉轴对齐
属性说明
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)}.height('100%').width('100%')
alignItems: ItemAlign.Auto 

 Flex({ alignItems: ItemAlign.Start }){Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)Text('2').width('33%').height(40).backgroundColor(0xD2B48C)Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
ItemAlign.Start 

 Flex({ alignItems: ItemAlign.Center }){Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)Text('2').width('33%').height(40).backgroundColor(0xD2B48C)Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
ItemAlign.Center 

Flex({ alignItems: ItemAlign.End }){Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)Text('2').width('33%').height(40).backgroundColor(0xD2B48C)Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
ItemAlign.End 

Flex({ alignItems: ItemAlign.Baseline}){Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)Text('2').width('33%').height(40).backgroundColor(0xD2B48C)Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
ItemAlign.Baseline 
 Flex({ alignItems: ItemAlign.Stretch}){Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)Text('2').width('33%').height(40).backgroundColor(0xD2B48C)Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.height('100%').width('100%')
ItemAlign.Stretch

（6）子元素设置交叉轴对齐

子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置

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

Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义。

 （7）内容对齐

可以通过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)
FlexAlign.Start 
 Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {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)
FlexAlign.Center 
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap,alignContent: FlexAlign.End }) {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)
FlexAlign.End 
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap,alignContent: FlexAlign.SpaceBetween }) {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)
FlexAlign.SpaceBetween 
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap,alignContent: FlexAlign.SpaceAround }) {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)
FlexAlign.SpaceAround 

 Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap,alignContent: FlexAlign.SpaceEvenly }) {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)
FlexAlign.SpaceEvenly

（8）自适应拉伸

在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局

自适应拉伸
属性说明
flexBasis设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。
flexGrow设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。
flexShrink当父容器空间不足时，子元素的压缩比例
Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Stretch}){ //从左到右排列Text('子元素1').width(100).flexBasis(100).border({width:1,color:'red',style:BorderStyle.Solid})Text('子元素2').height(50).width(210).flexBasis('auto').border({width:1,color:'red',style:BorderStyle.Solid})Text('子元素3').height(50).width(100).flexBasis('auto').border({width:1,color:'red',style:BorderStyle.Solid})}.height(100).width('100%').backgroundColor('gray')
flexBasis 
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(420).height(120).padding(10).backgroundColor(0xAFEEEE)
flexGrow 
Flex({ direction: FlexDirection.Row }) {Text('flexShrink(3)').flexShrink(3).width(200).height(100).backgroundColor(0xF5DEB3)Text('no flexShrink').width(200).height(100).backgroundColor(0xD2B48C)Text('flexShrink(2)').flexShrink(2).width(200).height(100).backgroundColor(0xF5DEB3)  
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
flexShrink

 

相关文章：

ArkTs的容器布局

组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成，开发中可以根据自己的需求，选择合适的布局进行页面开发。 一. 如何选择布局 声明式UI提供了以下10种常见布局，开发者可根…...

编程日记 2025/6/3 20:22:56

jenkins 出现 Jenkins: 403 No valid crumb was included in the request

文章目录 前言解决方式:1.跨站请求为找保护勾选"代理兼容"2.全局变量或者节点上添加环境变量3.（可选）下载插件 the strict Crumb Issuer plugin4.重启 前言 jenkins运行时间长了，经常出现点了好几次才能构建，然后报了Je…...

编程日记 2025/5/28 14:23:56

SpringDataJpa-字段加解密存储

SpringDataJpa-字段加解密存储 背景场景实现类型转换器实体类修改 Crypto 注解AOP 目前可使用场景注意 背景 遇到一个需求，对数据库中的某些字段进行加密存储，但是在各个服务流转中，需要是解密状态的。框架使用的是JPA。 Spring 提供了 Attri…...

编程日记 2025/6/3 3:10:53

python03-保留字、标识符；变量、常量；数据类型、数据类型之间的转化

一、保留字 VS 标识符 1-1、35个保留字 保留字，严格区分大小写！ 查询保留字： 1-2、标识符 常量：python中没有明确的定义常量的关键字，常量的值在程序运行过程中不允许修改！ 二、变量 VS 常量 2-1、变量 变…...

编程日记 2025/5/31 22:20:26

投影互动装置入驻，科普基地学习体验再上新台阶！

数字科技的迅猛进步极大地充盈了人们的日常生活，这一变革在主题乐园与科普教育基地等场所尤为显著。在这些地方，投影互动装置引领我们穿梭于光影构建的奇妙世界。特别是互动投影墙，它赋予观众前所未有的交互体验。那么，这种技术究…...

编程日记 2025/6/3 22:14:15

socket编程UDP-实现滑动窗口机制与累积确认GBN

在下面博客中，我介绍了利用UDP模拟TCP连接、按数据包发送文件的过程，并附上完整源码。 socket编程UDP-文件传输&模拟TCP建立连接脱离连接（进阶篇）_udp socket发送-CSDN博客 下面博客实现了停等机制。 socket编程UDP-实现停…...

编程日记 2025/5/31 17:21:59

乐观锁与悲观锁的概念

在多线程或多进程并发访问同一资源的情况下，为了防止数据的不一致性和竞态条件，常常需要使用锁机制来控制并发访问。锁机制大致可以分为 乐观锁（Optimistic Locking）和 悲观锁（Pessimistic Locking）。这两种…...

编程日记 2025/6/3 21:43:16

考研数学【线性代数基础box（数二）】

本文是对数学二线性代数基础进行总结，一些及极其简单的被省略了，代数的概念稀碎，不如高数关联性高，所以本文仅供参考，做题请从中筛选！ 本文为初稿，后面会根据刷题和自己的理解继续更新 高数&a…...

编程日记 2025/6/3 5:39:11

游戏引擎学习第45天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们刚刚开始研究运动方程，展示了如何处理当人物遇到障碍物时的情况。有一种版本是角色会从障碍物上反弹，而另一版本是角色会完全停下来。这种方式感觉不太自然，因为在游戏中，…...

编程日记 2025/6/2 12:01:46

基于 mzt-biz-log 实现接口调用日志记录

🎯导读：mzt-biz-log 是一个用于记录操作日志的通用组件，旨在追踪系统中“谁”在“何时”对“何事”执行了“何种操作”。该组件通过简单的注解配置，如 LogRecord，即可实现接口调用的日志记录，支持成功与失败…...

编程日记 2025/6/4 9:38:50

无人设备之RTK地面基站篇

一、定义与功能 RTK地面基站是一种通过差分定位技术来实现GPS等全球导航卫星系统信号精确定位的设备。它通过与无人设备上的流动站进行实时数据通信，利用载波相位差分原理，消除卫星定位过程中的大部分公共误差，如卫星轨道误差、电离层延迟、对…...

编程日记 2025/6/3 10:36:15

TMS320C55x DSP芯片结构和CPU外围电路

第2章 DSP芯片结构和CPU外围电路 文章目录 第2章 DSP芯片结构和CPU外围电路TMS320C55x处理器的特点TMS320c55x CPU单元指令缓冲(Instruction Buffer Unit) I单元程序流程(Program Flow Unit) P单元地址数据(Address-data Flow Unit) A单元数据计算(Data Computation Unit) D单元…...

编程日记 2025/6/3 1:30:27

【CC2530开发基础篇】继电器模块使用

一、前言 1.1 开发背景 本实验通过使用CC2530单片机控制继电器的吸合与断开，深入了解单片机GPIO的配置与应用。继电器作为一种常见的电气控制元件，广泛用于自动化系统中，用于控制大功率负载的开关操作。在本实验中，将通过GPIO口…...

编程日记 2025/6/3 12:53:50

3D 生成重建035-DiffRF直接生成nerf

3D 生成重建035-DiffRF直接生成nerf 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 本文提出了一种基于渲染引导的三维辐射场扩散新方法DiffRF，用于高质量的三维辐射场合成。现有的方法通常难以生成具有细致纹理和几何细节的三维模型，并且容易出…...

编程日记 2025/6/3 19:06:27

安宝特分享 | AR技术助力医院总院与分院间的远程面诊

随着科技的迅猛发展，增强现实（AR）技术在各行各业的应用愈发广泛，特别是在医疗领域，其潜力和价值正在被不断挖掘。在现代医疗环境中，患者常常面临“看病难、看病远、看病急”等诸多挑战，而安宝特…...

编程日记 2025/6/1 16:46:15

【功能安全】硬件常用安全机制

目录 安全机制分类： ECC内存保护： 看门狗定时器WDT 看门狗的诊断覆盖率 程序流监控 软件自检<...

编程日记 2025/6/3 15:57:08

linux上qt打包(二）

sudo apt install git 新建一个文件夹 名为xiazai&#xff0c; chmod -R 777 xiazai cd xiazai 并进入这个文件夹&#xff0c;然后clone git clone https://github.com/probonopd/linuxdeployqt.git 此处可能要fanQiang才能下 cd linuxdeployqt文件夹 下载平台需要的…...

编程日记 2025/5/30 20:12:39

Vue3 左右2栏的宽度 比例resize

Vue3, 页面左右2栏布局&#xff0c;用vue-resizer.页面效果如下图。 安装 npm i vue-resizer引入 import { DragCol, DragRow, ResizeCol, ResizeRow, Resize } from vue-resizer<DragCol height"100%" width"100%" :leftPercent"15">…...

编程日记 2025/6/1 20:10:19

企业车辆管理系统（源码+数据库+报告）

一、项目介绍 352.基于SpringBoot的企业车辆管理系统&#xff0c;系统包含两种角色&#xff1a;管理员、用户,系统分为前台和后台两大模块 二、项目技术 编程语言&#xff1a;Java 数据库&#xff1a;MySQL 项目管理工具&#xff1a;Maven 前端技术&#xff1a;Vue 后端技术&a…...

编程日记 2025/6/1 21:27:56

LeetCode 1847.最近的房间：有序集合

【LetMeFly】1847.最近的房间&#xff1a;有序集合 力扣题目链接&#xff1a;https://leetcode.cn/problems/closest-room/ 一个酒店里有 n 个房间&#xff0c;这些房间用二维整数数组 rooms 表示&#xff0c;其中 rooms[i] [roomIdi, sizei] 表示有一个房间号为 roomIdi 的…...

编程日记 2025/6/2 2:15:29

C05S07-Tomcat服务架设

一、Tomcat 1. Tomcat概述 Tomcat也是一个Web应用程序&#xff0c;具有三大核心功能。 Java Servlet&#xff1a;Tomcat是一个Servlet容器&#xff0c;负责管理和执行Java Servlet、服务端的Java程序&#xff0c;处理客户端的HTTP请求和响应。Java Server&#xff1a;服务端…...

编程日记 2025/5/30 14:48:11

Vscode搭建C语言多文件开发环境

一、文章内容简介 本文介绍了 “Vscode搭建C语言多文件开发环境”需要用到的软件&#xff0c;以及vscode必备插件&#xff0c;最后多文件编译时tasks.json文件和launch.json文件的配置。即目录顺序。由于内容较多&#xff0c;建议大家在阅读时使用电脑阅读&#xff0c;按照目录…...

编程日记 2025/6/2 7:31:35

mac电脑可以使用的模拟器

BlueStacks Air 推荐-》亲测可用 BlueStacks Air https://www.bluestacks.com 支持macOS/Windows&#xff0c;刚新增了对Apple Silicon系列M芯片的支持 GameLoop https://www.gameloop.com/ 支持 macOS/Windows Genymotion https://www.genymotion.com/ 支持Android/macO…...

编程日记 2025/6/4 0:16:46

vertx idea快速使用

目录 1.官网下载项目 2.修改代码 2.1拷贝代码方式 为了能够快速使用&#xff0c;我另外创建一个新的maven项目&#xff0c;将下载项目的src文件和pom文件拷贝到新建的maven项目。 2.2删除.mvn方式 3.更新配置 4.配置application 5.idea启动项目 1.官网下载项目 从vert…...

编程日记 2025/6/3 23:28:58

selenium 在已打开浏览器上继续调试

关闭浏览器&#xff0c;终端执行如下指令&#xff0c;--user-data-dir换成自己的User Data路径 chrome.exe --remote-debugging-port9222 --user-data-dir"C:\Users\xxx\AppData\Local\Google\Chrome\User Data" 会打开浏览器&#xff0c;打开百度&#xff0c;如下状…...

编程日记 2025/6/3 5:39:03

RequestContextHolder 与 HttpServletRequest 的联系

1. 什么是 RequestContextHolder&#xff1f; RequestContextHolder 是 Spring 框架 提供的一个工具类&#xff0c;用于在当前线程中存储和获取与请求相关的上下文信息。它是基于 ThreadLocal 实现的&#xff0c;能够保证每个线程独立存储和访问请求信息。 与 HttpServletReq…...

编程日记 2025/6/4 5:08:49

力扣hot100——普通数组

53. 最大子数组和 class Solution { public:int maxSubArray(vector<int>& nums) {int n nums.size();int ans nums[0];int sum 0;for (int i 0; i < n; i) {sum nums[i];ans max(ans, sum);if (sum < 0) sum 0;}return ans;} }; 最大子数组和&#xf…...

编程日记 2025/6/3 22:39:00

本地部署大模型QPS推理测试

目录 1、测试环境1.1、显卡1.2、模型1.3、部署环境1.3.1、docker1.3.2、执行命令 2、测试问题2.1、20字左右问题2.2、50字左右问题2.3、100字左右问题 3、测试代码3.1、通用测试代码3.2、通用测试代码&#xff08;仅供参考&#xff09; 4、测试结果4.1、通用测试结果4.2、RAG测…...

编程日记 2025/6/4 1:35:43

内存、硬盘、DRAM、FLASH

内存 内存是计算机系统中用于临时存储和快速存取当前正在处理的数据和指令的组件&#xff0c;属于临时存储设备&#xff0c;它在计算机运行时用于存储活跃的程序和数据。内存的性能直接影响计算机的处理速度和响应能力。 内存的类型主要分为&#xff1a; DRAM&#xff08;动态随…...

编程日记 2025/5/28 14:23:30

全景图转6面体图 全景图与6面体图互转

目录 图片转360度全景中心图 依赖项： 库的使用方法： 源代码： 全景图拆成6面体图： 全景图，转6面体，再转全景图： 图片转360度全景中心图 原图： 效果图： 依赖项： pip install py360convert pip install numpy==2.2 库的使用方法： https://g...

编程日记 2025/5/31 1:18:23

【psutil模块02】Python运维模块之系统进程管理方法

系统进程管理方法 获取当前系统的进程信息&#xff0c;包括进程的启动时间、查看或设置CPU亲和度、内存使用率、IO信息、socket连接、线程数等。 1.进程信息 psutil.pids()获取所有PID,使用psutil.Process()接收单个进程的PID&#xff0c;获取进程名、路径、状态、系统资源等…...

编程日记 2025/5/31 18:12:11

Java-08

类的抽象是将类的实现和使用分离, 而类的封装是将实现的细节封装起来并且对用户隐藏,用户只需会用就行。 类的合约指的是从类外可以访问的方法和数据域的集合以及与其这些成员如何行为的描述 isAlive()方法的返回值类型为布尔型&#xff08;Boolean&#xff09;。这个方法用于…...

编程日记 2025/6/4 6:44:06

四轴用的无刷电机到底是属于直流电机还是交流电机？

四轴用的无刷电机因其高效、稳定、体积小巧等特点&#xff0c;成为了广泛应用的动力系统之一。尽管其名称中包含“直流”二字&#xff0c;但无刷电机到底是属于直流电机还是交流电机&#xff0c;这一问题常常引发人们的探讨与困惑。 一、无刷电机的工作原理 首先&#xff0c;…...

编程日记 2025/6/3 3:32:53

Redis中的Hot key排查和解决思路

什么是Hot key Hot key其实就是被频繁访问的key&#xff0c;比普通的key访问量要高于十倍或者几十倍不等。例如&#xff1a; QPS集中在特定的Key&#xff1a;实例的总QPS&#xff08;每秒查询率&#xff09;为10,000&#xff0c;而其中一个Key的每秒访问量达到了7,000。带宽使…...

编程日记 2025/6/3 21:00:33

CMake 保姆级教程（上）

整理自 视频 【CMake 保姆级教程【C/C】】 https://www.bilibili.com/video/BV14s4y1g7Zj/?p5&share_sourcecopy_web&vd_source6eb8f46d194c5ef9f89d3331f623a9c3 1、cmake简介 源文件&#xff08;.cpp / .c&#xff09;要经过 工具链 1.1 工具链 1、预处理&#…...

编程日记 2025/6/1 16:13:34

C++类模板的应用

template <class T> class mylist{ public: // 这是一个链表的节点 struct Link{ T val; Link* next; } 增 &#xff1a;insert(T val) 在链表中创建新节点&#xff0c;节点上保存的数据为 val 删&#xff1a;remove(T val) 移除链表中数据为 val 的节点 改: operator[](…...

编程日记 2025/6/3 3:14:21

Ubuntu 18.04无有线图表且无法设置有线网络

问题背景&#xff1a; 今天在登陆自己的虚拟机Ubuntu系统的时候突然出现 有线连接无法连接的问题&#xff0c;有线连接的图标变为没有了&#xff0c;无法点击网络菜单的Setting模块选项。我的虚拟机有线网络连接方式是NAT方式。 没有如下有线连接图标 解决方法&#xff1a; …...

编程日记 2025/5/31 17:02:14

QoS分类和标记

https://zhuanlan.zhihu.com/p/160937314 1111111 分类和标记是识别每个数据包优先级的过程。 这是QoS控制的第一步&#xff0c;应在源主机附近完成。 分组通常通过其分组报头来分类。下图指定的规则仔细检查了数据包头 &#xff1a; 下表列出了分类标准&#xff1a; 普通二…...

编程日记 2025/6/3 6:31:13

企业内训｜阅读行业产品运营实战训练营-某运营商数字娱乐公司

近日&#xff0c;TsingtaoAI公司为某运营商旗下数字娱乐公司组织的“阅读行业产品运营实战训练营”在杭州落下帷幕。此次训练营由TsingtaoAI资深互联网产品专家程靖主持。该公司的业务骨干——来自内容、市场、业务、产品与技术等跨部门核心岗位、拥有8-10年实战经验的中坚力量…...

编程日记 2025/6/4 16:46:32

杭州乘云联合信通院发布《云计算智能化可观测性能力成熟度模型》

原文地址&#xff1a;杭州乘云联合中国信通院等单位正式发布《云计算智能化可观测性能力成熟度模型》标准 2024年12月3日&#xff0c;由全球数字经济大会组委会主办、中国信通院承办的 2024全球数字经济大会 云AI计算创新发展大会&#xff08;2024 Cloud AI Compute Ignite&…...

编程日记 2025/6/2 20:55:15

SimAI万卡集群模拟器，LLM大模型训练通信计算模拟

SimAI&#xff0c;是阿里巴巴构建的一个统一的模拟器&#xff0c;旨在大规模精确有效地模拟LLM训练过程。通过将训练框架、内核计算和集体通信库有选择地高保真集成到仿真过程中&#xff0c;SimAI在仿真中实现了高精度。 简单点来说&#xff0c;SimAI就是模拟&#xff0c;大模…...

编程日记 2025/5/29 19:48:30

Axure9设置画布固定

在使用AxureRP9设计原型时&#xff0c;如果遇到画布在拖动时变得难以控制&#xff0c;可以尝试在Windows系统中通过‘文件’>‘首选项’&#xff0c;或在Mac系统中通过‘AxureRP9’>‘偏好设置’进行设置&#xff0c;以稳定画布的行为。 现象 页面底层的画布&#xff0…...

编程日记 2025/5/31 2:07:25

window.getSelection() 获取划线内容并实现 dom 追随功能

功能&#xff1a;鼠标对一段文本中某些文字进行划线之后&#xff0c;需要在当前划线文本处出现一个功能按钮显示对划线内容进行操作&#xff0c;比如收藏、添加样本库等功能。 一、需要了解的鼠标事件对象属性 给 dom 元素注册鼠标事件之后&#xff0c;会有 event 属性&#…...

编程日记 2025/6/3 10:39:19

mybatis-plus超详细讲解

mybatis-plus &#xff08;简化代码神器&#xff09; 地址&#xff1a;https://mp.baomidou.com/ 目录 mybatis-plus 简介 特性 支持数据库 参与贡献 快速指南 1、创建数据库 mybatis_plus 2、导入相关的依赖 3、创建对应的文件夹 4、编写配置文件 5、编写代码 …...

编程日记 2025/6/3 20:40:50

浏览器可以直接请求 websocket

一、原生支持 浏览器原生支持 WebSocket 协议&#xff0c;这使得开发者可以直接在 JavaScript 代码中使用 WebSocket 来建立与服务器的双向通信通道。 const socket new WebSocket("ws://localhost:8080");socket.addEventListener("open", function (e…...

编程日记 2025/6/2 0:19:15

* 和 .* 的区别（MATLAB）

在 MATLAB 中&#xff0c;* 和 .* 都是用来进行乘法操作的运算符&#xff0c;但它们有不同的应用场景。我们将从数学和编程的角度详细解析这两者的区别&#xff0c;并且讲解 MATLAB 中 . 运算符的其他常见用法。 1. * 和 .* 的区别 *&#xff1a;矩阵乘法&#xff08;线性代数…...

编程日记 2025/5/29 21:41:39

51c视觉~合集30

我自己的原文哦~ https://blog.51cto.com/whaosoft/12059371 #SaRA 修改一行代码就能实现高效微调&#xff01;上海交大&腾讯开源&#xff1a;兼顾原始生成和下游任务 仅修改一行训练代码即可实现微调过程。 文章链接&#xff1a;https://arxiv.org/pdf/2409.06633 …...

编程日记 2025/5/31 17:57:31

JVM虚拟机总揽

为什么 Java 要在虚拟机里运行&#xff1f; 先说结论&#xff1a; 可以一次编译&#xff0c;在各个硬件平台如 Windows_x64、Linux_aarch64&#xff09;都可以执行建立一个托管环境&#xff08;Managed Runtime&#xff09;&#xff0c;这个托管环境能够代替我们处理一些代码…...

编程日记 2025/6/2 20:02:58

PCL点云库入门——PCL库可视化之PCLVisualizer类显示复杂点云信息等（持续更新）

1、PCLVisualizer类可视化 PCLVisualizer类作为PCL库可视化到的高级功能&#xff0c;不仅支持点云等数据的可视化&#xff0c;还提供了丰富的交互功能和自定义选项&#xff0c;如颜色调整、视角切换、标注添加等。用户可以通过PCLVisualizer类轻松实现复杂的数据分析和处理任务…...

编程日记 2025/6/1 6:44:42

Hugface国内镜像

问题&#xff1a; urllib3.exceptions.MaxRetryError: HTTPSConnectionPool(hosthuggingface.co, port443): Max retries exceeded with url: /Salesforce/blip-image-captioning-base/resolve/main/preprocessor_config.json (Caused by ProxyError(Cannot connect to proxy.,…...

编程日记 2025/6/1 22:28:04