HarmonyOS鸿蒙Next中Stack组件层叠布局

Stack组件

Stack的理解

1. Stack可以是页面根元素，也可以是其中一个子元素
2. 当Stack为一个子元素时，它的位置位于上一个兄弟元素的下方
3. Stack默认的宽高为内容的宽高，默认居中
4. Stack内部的子元素默认垂直居中，水平居中，并相互堆叠
5. 对齐方式： Stack组件通过alignContent参数实现位置的相对移动。如图2所示，支持九种对齐方式。
6. Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变

@Entry 
@Component
struct Test{
 build(){
 Stack({alignContent: Alignment.TopStart}){
 Text('顶部导航').zIndex(100)
 Column(){}
 }
 .width('100%').height('100%')
 .border({width: 1, color: '#f00'})
 }
}

系统图标

// 返回箭头 < SymbolGlyph($r('sys.symbol.chevron_left'))
.margin({ right: 15 })
.fontSize(20)

// 向右箭头 > SymbolGlyph($r('sys.symbol.chevron_right'))

Divider组件

提供分隔器组件，分隔不同内容块/内容元素。

Divider()
.color('#f00')
.strokeWidth(30)
.width(100)
.lineCap(LineCapStyle.Round)

Divider()
.color(Color.Black)
.strokeWidth(3)
.vertical(true)
.height(30)

Span组件

Span组件必须嵌入在Text组件中才能显示，单独的Span组件不会呈现任何内容。

Text(){
 Span("当当自营")
 Span("书名")
}

Blank()组件

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。

Row(){
 Text("风向热门")
 .fontSize(16)
 .fontWeight(700)

// 显示其中一个边框
.border({ width: { left: 3 }, color: '#000', style: { left: BorderStyle.Solid } })
.padding({left: 20})
Blank()
Text("查看更多")
.fontSize(12)
.fontColor('#aaa')
SymbolGlyph($r("sys.symbol.chevron_right"))
}
.width('100%')
.height(40)
.border({ width: 1, color: '#f00' })

Counter()组件

//value用来计数，初始化的值是1
@State value: number = 1
...
Counter() {
 // 减号和加号中间显示的文本
 // 因为Text的内容必须是字符串型，而value是number型，所以用toString()把number类型转为字符串类型
 Text(this.value.toString())
}
// 当单击加号时
.onInc(() => {
 this.value++
})
// 当单击减号时
.onDec(() => {
 this.value--
})

backgroundImage属性

//设置背景图片和是否重复
.backgroundImage('图片地址',ImageRepeat.X) 
//背景图片的尺寸
.backgroundImageSize({ width: 50, height: 30 })
//背景图片的位置
.backgroundImagePosition({ x: 10, y: 10 })

Rating评分组件

//默认样式
Rating({
 rating: 3.5, //评分
})

Column() {
 // rating代表评分
 // indicator: 为true时，只能显示，不能打分， 为false时，可以评分
 Rating({
 rating: this.rating,
 indicator: false 
 })
.stars(6)
//所有星的个数
.stepSize(0.5)
// 设置操作评级的步长
.margin({ top: 24 })
//当评分发生改变时
.onChange((value: number) => {
 console.log(value.toString())
 this.rating = value
})
Text(`当前的评分是: ${this.rating}`)
}.width("100%")

Rainbow Brackets插件

让你的括号变成不一样的颜色, 防止错乱括号

【文件菜单】【设置】【插件】【搜索该插件】【安装】

顶部导航的切换效果

@Entry
@Component
struct Del {
 @State navList: string[] = ['商品','详情','评论','推荐']
 @State currentIndex: number = 3
 build() {
 Column() {
 //顶部的三个区域的布局
 // 
 Row() {
 // Text("返回")
 // 
 Row() {
 // 
 Text("商品") // Text("商品") // Text("商品") // Text("商品") //
 }
 Text("点")
 }
.justifyContent(FlexAlign.SpaceEvenly)
// .width('100%') //
// .border({width: 1, color: '#f00'})

// Flex({
// justifyContent: FlexAlign.SpaceEvenly
// }){
// Text("商品1").border({width: 1, color: '#f00'}).width("30%")
Text("商品2").border({width: 1, color: '#f00'}).width("30%")
// 
Text("商品3").border({width: 1, color: '#f00'}).width("30%")
// 
Text("商品4").border({width: 1, color: '#f00'}).width("30%") //
// Text("商品4").border({width: 1, color: '#f00'}).width("30%") //
}
// .width('100%') //
['商品','详情','评论','推荐']

Flex() {
 ForEach(this.navList,(item:string,index: number)=>{
 Column() {
 Text(item)
Divider()
.color('#f00')
.strokeWidth(2)
.width('60%')
.visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)
}
.border({ width: 1, color: '#00f' })
// 当单击时
.onClick(()=>{ 
 this.currentIndex = index
})
},(item:string)=>item)
}
.border({ width: 1, color: '#0f0' })
}
}
}