那些门户网站的官网做的好,平面设计兼职,网站网址更新了怎么查,最好的响应式网站在鸿蒙ArkTS中#xff0c;布局容器组件有很多#xff0c;常见的有#xff1a; ⑴ Column#xff1a;#xff08;垂直布局容器#xff09;#xff1a;用于将子组件垂直排列。 ⑵ Row#xff1a;#xff08;水平布局容器#xff09;#xff1a;用于将子组件水… 在鸿蒙ArkTS中布局容器组件有很多常见的有 ⑴ Column垂直布局容器用于将子组件垂直排列。 ⑵ Row水平布局容器用于将子组件水平排列。 ⑶ Flex弹性布局方式它提供了更加有效的方法对容器中的子元素进行排列、对齐和分配剩余空间。 ⑷ StackStack布局是一种可以将多个组件按照一定顺序叠放的布局。 ⑸ Grid网格容器用于创建二维网格布局适合需要行列对齐的复杂布局。 ⑹ List列表容器用于展示列表数据可以设置列表项的布局和样式。 ⑺ Tabs页签容器用于创建页签布局允许用户在不同的页面或视图间切换。 ⑻ Swiper滑块视图容器用于创建滑动视图常用于图片轮播或广告等场景。 ⑼ Scroll可滑动的容器允许用户滚动查看超出视图范围的内容。 ⑽ RelativeContainer相对布局容器允许子元素相对于容器或指定的兄弟元素进行定位。 ⑾ Position定位布局使用Position组件进行绝对或相对定位。 上面的11中布局容器组件各有特点共同的特性是 ⑴ 空间分配属性如space用于调整子组件之间的间距。 ⑵ 对齐属性如justifyContent和alignItems用于设置子组件在主轴和交叉轴方向上的对齐方式。 ⑶ 尺寸属性如width和height用于设置容器的宽度和高度。 ⑷ 边距和填充如padding和margin用于设置容器的内边距和外边距。 ⑸ 其他属性比如背景色等。 可以一起学习方便对比。 一、Column和Row Column和Row都是线性布局方式。 Column组件用于创建垂直方向的线性布局其子组件会按照从上到下的顺序排列。 Row组件用于创建水平方向的线性布局其子组件会按照从左到右的顺序排列。 常用属性 ① width设置组件的宽度。 ② height设置组件的高度。 ③ alignment设置子组件在垂直方向上的对齐方式如顶部对齐、底部对齐、居中对齐等。 ④ spacing设置子组件之间的间距。 ⑤ backgroundColor设置组件的背景颜色。 ⑥ padding设置组件的内边距。 ⑦ Row组件的特有属性wrap设置是否允许子组件换行当子组件总宽度超过Row宽度时。 做一个2行三列的宫格布局使用Column和Row。
// 获取随机颜色的函数
function getRandomColor() {const letters :string 0123456789ABCDEF;let color:string #;for (let i 0; i 6; i) {let Itemp:numberMath.floor(Math.random() * 16)color letters.substr(Itemp,1);}return color;
}Entry
Component
struct Index {str:string在鸿蒙ArkTS中Column和Row是两种常用的布局容器组件它们分别用于垂直和水平布局。Column垂直布局容器用于将子组件垂直排列Row水平布局容器用于将子组件水平排列。build() {Column() {Row(){Column(){Text(this.str).fontSize(18).fontColor(getRandomColor()).textAlign(TextAlign.Center).maxLines(4).textOverflow({overflow:TextOverflow.Ellipsis})}.layoutWeight(1).height(100%).justifyContent(FlexAlign.Center)Column(){Text(this.str).fontSize(18).fontColor(getRandomColor()).align(Alignment.Center)}.layoutWeight(1).height(100%).justifyContent(FlexAlign.Center)Column(){Text(this.str).fontSize(18).fontColor(getRandomColor())}.layoutWeight(1).height(100%).justifyContent(FlexAlign.Center)}.height(50%)Row(){Column(){Text(this.str).fontSize(18).fontColor(getRandomColor())}.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height(100%)Column(){Text(this.str).fontSize(18).fontColor(getRandomColor())}.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height(100%)Column(){Text(this.str).fontSize(18).fontColor(getRandomColor())}.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height(100%)}.height(50%)}.width(100%).height(100%)}
} 效果图 代码写得有些乱主要是公共的属性太多可以使用style和Extend来优化代码并且还可以提供变化的灵活性。 下面的代码Style只是展示一种写法主要是Extend组件的写法。
function getRandomColor() {const letters :string 0123456789ABCDEF;let color:string #;for (let i 0; i 6; i) {let Itemp:numberMath.floor(Math.random() * 16)color letters.substr(Itemp,1);}return color;
}
Extend(Text) function CustomText() {.fontColor(getRandomColor()).fontSize(18).textAlign(TextAlign.Center).maxLines(5).textOverflow({ overflow: TextOverflow.Ellipsis })
}
Extend(Column) function ColumnCustomAttr(){.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
}Entry
Component
struct Index {str: string 在鸿蒙ArkTS中Column和Row是两种常用的布局容器组件它们分别用于垂直和水平布局。Column垂直布局容器用于将子组件垂直排列Row水平布局容器用于将子组件水平排列。StylesCommonStyle() {.layoutWeight(1).height(100%).padding({top:5,left:5,right:5,bottom:5}).margin({top:5,left:5,right:5,bottom:5}).border({width:2,color:getRandomColor()})}build() {Column() {Row() {Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()}.height(50%)Row() {Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()}.height(50%)}.width(100%).height(100%)}
} 上面的代码就整洁了一些而且方便修改无论修改的是公共属性还是组件独有属性。 实际效果图 二、Flex弹性布局组件 Flex布局是一种二维布局模型它可以在任意方向上对元素进行排列并且可以动态地调整元素的大小和位置以适应不同的屏幕尺寸和设备。通过使用Flex布局可以实现响应式布局效果。 Flex弹性伸缩布局组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相当于Flex中的主轴Column相当于Flex中的交叉轴。 Flex主要属性 ① direction主轴的方向用于指定子组件在Flex容器上排列的方向即主轴的方向。可选值包括Row主轴方向为水平向右、RowReverse主轴方向为水平向左、Column主轴方向为垂直向下和ColumnReverse主轴方向为垂直向上。 ② justifyContent主轴的对齐方式用于定义所有子组件在Flex容器主轴上的对齐方式。可选值justifyContentFlexAlign.Start / Center / End / SpaceBetween / SpaceAround / SpaceEvenly共有6种方式。 ③ alignItems交叉轴的对弃方式用于定义所有子组件在Flex容器交叉轴上的对齐方式。可选值alignItems.Auto / Start / Center / End / Baseline /Stretch共有6种方式。 ④ wrap布局换行用于确定Flex容器是单行/列排列还是多行/列排列。在多行布局时它还会通过交叉轴方向确定新行的堆叠方向。可选值wrapFlexWrap.NoWrap / Wrap / WrapReverse。 演示
function getRandomColor() {const letters :string 0123456789ABCDEF;let color:string #;for (let i 0; i 6; i) {let Itemp:numberMath.floor(Math.random() * 16)color letters.substr(Itemp,1);}return color;
}
Extend(Text) function CustomText() {.fontColor(getRandomColor()).fontSize(18).textAlign(TextAlign.Center).maxLines(5).textOverflow({ overflow: TextOverflow.Ellipsis }).margin(5).padding(5).height(50%).width(30%).border({width:2,color:getRandomColor()})
}
Entry
Component
struct Index {str: string Flex弹性伸缩布局组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相当于Flex中的主轴Column相当于Flex中的交叉轴。build() {Flex({wrap:FlexWrap.Wrap}){Text(this.str).CustomText()Text(this.str).CustomText()Text(this.str).CustomText()Text(this.str).CustomText()Text(this.str).CustomText()Text(this.str).CustomText()}.height(100%).width(100%)}
} 效果图 三、Stack层叠布局组件 Stack布局是一种可以将多个组件按照一定顺序叠放的布局。在Stack布局中后添加的组件会自动覆盖前面添加的组件可以通过设置zIndex控制层级。 ① 层叠效果组件需要有堆叠效果时优先考虑此布局层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。 ② zIndex控制通过设置子组件的zIndex可以控制层级zIndex越大越在上层。 ③ 动画支持Stack布局还支持添加动画通过动画可以实现组件的平移、旋转等动态效果。 Stack主要的布局属性alignContent:Alignment.Bottom / ToStart / Top / TopEnd / Start / End / Center / BottomSatrt /Bottom / BottomEnd 共有9种样式 测试代码
function getRandomColor() {const letters :string 0123456789ABCDEF;let color:string #;for (let i 0; i 6; i) {let Itemp:numberMath.floor(Math.random() * 16)color letters.substr(Itemp,1);}return color;
}
Extend(Button) function CustomText(iW:number,iH:number,iZ:number) {.fontColor(Color.White).fontSize(18).margin(5).padding(5).height(iH).width(iW).backgroundColor(getRandomColor()).align(Alignment.Start).border({width:1,color:getRandomColor()}).zIndex(iZ)
}
Entry
Component
struct Index {State zIndexValue:number[][1,2,3,4,5,6]build() {Stack({alignContent:Alignment.Bottom}){Button(1).CustomText(300,50,this.zIndexValue[0]).onClick((){this.zIndexValue[0]-this.zIndexValue[0]})Button(2).CustomText(250,100,this.zIndexValue[1]).onClick((){this.zIndexValue[1]-this.zIndexValue[1]})Button(3).CustomText(200,200,this.zIndexValue[2]).onClick((){this.zIndexValue[2]-this.zIndexValue[2]})Button(4).CustomText(150,300,this.zIndexValue[3]).onClick((){this.zIndexValue[3]-this.zIndexValue[3]})Button(5).CustomText(100,400,this.zIndexValue[4]).onClick((){this.zIndexValue[4]-this.zIndexValue[4]})Button(6).CustomText(50,500,this.zIndexValue[5]).onClick((){this.zIndexValue[5]-this.zIndexValue[5]})}.height(100%).width(100%).backgroundColor(Color.Pink)}
}效果图 点击按钮可以更改按钮的叠放次序。 四、Grid层叠布局组件 Grid组件用于控制网格的布局和样式。 常用的属性 ① columnsTemplate设置网格布局的列数及每列的宽度比例。例如1fr 1fr 1fr表示将容器分为三列每列占据相同的宽度。 ② rowsTemplate设置网格布局的行数及每行的高度比例。例如1fr 1fr表示将容器分为两行每行占据相同的高度。 ③ columnsGap设置列与列之间的间距。 ④ rowsGap设置行与行之间的间距。 ⑤ width设置Grid组件的宽度。 ⑥ height设置Grid组件的高度。 ⑦ backgroundColor设置Grid组件的背景颜色。 ⑧ scroller可滚动组件的控制器用于与可滚动组件进行绑定可选。 GridItem是Grid的子组件用于在网格中定义具体的项目即单元格的内容。GridItem组件支持多种属性用于控制项目的布局和样式。 常用属性 ① rowStart、rowEnd指定当前GridItem元素的起始行号和终点行号。 ② columnStart、columnEnd指定当前GridItem元素的起始列号和终点列号。 测试代码
function getRandomColor() {const letters :string 0123456789ABCDEF;let color:string #;for (let i 0; i 6; i) {let Itemp:numberMath.floor(Math.random() * 16)color letters.substr(Itemp,1);}return color;
}
Entry
Component
struct Index {State numbers: string[] [1, 2, 3, 4,5,6];build() {Column() {Grid() {ForEach(this.numbers, (item: string, index: number) {GridItem() {Text(item).fontSize(16).backgroundColor(getRandomColor()).width(50%).height(50%).textAlign(TextAlign.Center).padding(20).margin(20)}.backgroundColor(getRandomColor())})}.columnsTemplate(1fr 1fr).rowsTemplate(1fr 1fr 1fr)}}
} 效果图 实际在使用布局组件中常常多种容器组件结合起来使用。
