一、线性布局
属性说明:
- justifyContent:设置子元素在主轴方向的对齐方式
- 参数:FlexAlign枚举
- alignItems:设置子元素在交叉轴方向的对齐方式
- 参数:
- Row容器使用VerticalAlign枚举
- Column容器使用HorizontalAlign枚举
- 参数:
1、Column布局
1.1、FlexAlign
1.2、HorizontalAlign
1.3、代码示例
@Entry
@Component
struct ColumnUI {
build() {
// space:设置内容间隔
Column({ space: 50 }) {
Text("文本内容一")
Text("文本内容二")
Text("文本内容三")
Text("文本内容四")
}
.borderColor("red")
.width("100%")
.height("100%")
.borderWidth(2)
.backgroundColor("green")
// 主轴方向的对齐方式
.justifyContent(FlexAlign.Center)
// 交叉轴方向的对齐方式
.alignItems(HorizontalAlign.Center)
}
}
2、Row布局
2.1、FlexAlign
2.2、VerticalAlign
2.3、代码示例
@Entry
@Component
struct RowUI {
build() {
Row() {
Text("文本内容一")
Text("文本内容二")
}
.height('100%')
.width("100%")
.borderWidth(2)
.borderColor("red")
.backgroundColor("green")
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Top)
}
}
3、需求
二、列表布局
List是一种复杂布局,具备以下特点:
① 列表项(ListItem)数量过多超出屏幕后,会自动提供滚动功能
② 列表项(ListItem)既可以纵向排列,也可以横向排列
语法:
List({space:3}){
ListItem(){
Text("列表项")
}
ListItem(){
Text("列表项")
}
}
class Shops{
name:string
img:ResourceStr
price:number
status:number
constructor(name:string,img:ResourceStr,price:number,status:number) {
this.name = name
this.img = img
this.price = price
this.status = status
}
}
@Entry
@Component
struct ListUi {
private shops:Array<Shops> = [
new Shops("华为mate70旗舰手机",$r("app.media.down"),8999,500),
new Shops("华为mate70旗舰手机",$r("app.media.down"),9999,200),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0)
]
build() {
Column(){
Row(){
Text("商品列表")
.fontSize(30)
}
.width("90%")
.height("60")
List(){
ForEach(this.shops,(item:Shops) =>{
ListItem(){
Row(){
Image(item.img)
.width(100)
Column({space:4}){
if (item.status) {
Text(item.name)
.fontWeight(FontWeight.Bold)
Text("原价:¥"+item.price)
.fontColor("#c7c7c7")
.decoration({type:TextDecorationType.LineThrough})
.fontSize(14)
Text("折扣价:¥"+(item.price - item.status))
.fontColor("red")
Text("补贴:¥"+item.status)
.fontColor("red")
} else{
Text(item.name)
.fontWeight(FontWeight.Bold)
Text("¥"+item.price)
.fontColor("red")
}
}
.alignItems(HorizontalAlign.Start)
}
.width("90%")
.backgroundColor("#ffffff")
.height("15%")
.borderRadius(8)
.margin({bottom:10})
}
})
}
}
.width("100%")
.height("100%")
.backgroundColor("#c7c7c7")
}
}
15%")
.borderRadius(8)
.margin({bottom:10})
}
})
}
}
.width("100%")
.height("100%")
.backgroundColor("#c7c7c7")
}
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f8c5053c44c945c3afbe643c9842f877.png#pic_center)