线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列.
- Column(列,垂直布局)
- Row(行,水平布局)
属性:
- space 间隔
- Blank 空白填充
- layoutWeight(权重)等分
scss
//滑动
Scroll(this.scroller) {
//间隔
Column({ space: "35" }) {
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Row() {
Text("水平").width("100").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
//空白填充
Blank()
Toggle({ type: ToggleType.Checkbox, isOn: true })
}.width("100%")
Row({ space: "35" }) {
Row() {
Text("等分")
.backgroundColor("#333333")
.fontColor("#fff")
.textAlign(TextAlign.Center)
.align(Alignment.Center)
.width("100%")
.height("100")
}
//权重
.layoutWeight(1).backgroundColor(Color.Blue)
Row() {
Text("等分")
.backgroundColor("#333333")
.fontColor("#fff")
.textAlign(TextAlign.Center)
.align(Alignment.Center)
.width("100%")
.height("100")
}.layoutWeight(1).backgroundColor(Color.Blue)
Row() {
Text("等分")
.backgroundColor("#333333")
.fontColor("#fff")
.textAlign(TextAlign.Center)
.align(Alignment.Center)
.width("100%")
.height("100")
}.layoutWeight(1).backgroundColor(Color.Blue)
}.width("100%")
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
}.margin({right:20})
}
.backgroundColor(0xDCDCDC)
.scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
.edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
.width("100%").height("100%")
.padding({
top: px2vp(ScreenUtil.getInstance().getTopRectHeight()),
bottom: px2vp(ScreenUtil.getInstance().getBottomRectHeight())
})
总结
- Row 水平布局
- Colum 垂直布局
- space 间隔
- Blank 空布局填充 (自适应拉伸效果)
- layoutWeight 权重效果
- Scroll 滑动控件