效果
案例
@Component
export struct AppIndex {
build() {
//
Stack({ alignContent:Alignment.BottomEnd }){
// 导航栏
Stack({ alignContent: Alignment.TopStart }){
Column(){
Text('导航栏')
}.height(60).backgroundColor(Color.Pink).width('100%')
.justifyContent(FlexAlign.Center).zIndex(2)
// 内容区域可滚动
Scroll(){
Column(){
Text('内容').height(200).width('100%').border({width: 1})
Text('内容').height(200).width('100%').border({width: 1})
Text('内容').height(200).width('100%').border({width: 1})
Text('内容').height(200).width('100%').border({width: 1})
Text('内容').height(200).width('100%').border({width: 1})
Text('内容').height(200).width('100%').border({width: 1})
}
}.padding({
top: 70,
bottom: 70
})
}.width('100%').height('100%')
// 底部tabbar
Row(){
// 首页
Column(){
Image($r('app.media.startIcon')).width(30).height(30)
Text('首页').fontSize(18).padding({top: 5})
}.height('100%').justifyContent(FlexAlign.Center)
.layoutWeight(1)
// 推荐
Column(){
Image($r('app.media.startIcon')).width(30).height(30)
Text('推荐').padding({top: 5})
}.height('100%').justifyContent(FlexAlign.Center)
.layoutWeight(1)
// 新闻
Column(){
Image($r('app.media.startIcon')).width(30).height(30)
Text('新闻').padding({top: 5})
}.height('100%').justifyContent(FlexAlign.Center)
.layoutWeight(1)
// 我的
Column(){
Image($r('app.media.startIcon')).width(30).height(30)
Text('我的').padding({top: 5})
}.height('100%').justifyContent(FlexAlign.Center)
.layoutWeight(1)
}.backgroundColor(Color.Pink)
.width('100%').height(60)
.alignItems(VerticalAlign.Center)
}.width('100%').height('100%').backgroundColor(Color.Gray)
}
}