一.线性布局
1.组件
- Column 容器:子元素 垂直方向 排列
- Row 容器:子元素 水平方向 排列
2.属性
-
主轴对齐方式：justifyContent
image.png
Column() {}.justifyContent(FlexAlign.SpaceAround)
1.Start (排布主方向)主轴起始位置对齐
2.Center主轴居中对齐
3.End主轴结束位置对齐
4.SpaceBetween 贴边显示，中间的元素均匀分布间隙
5.SpaceAround 间隙环绕 0.5 1 1 1 0.5 的间隙分布，靠边只有一半的间隙6.SpaceEvenly 间隙均匀环绕，靠边也是完整的一份间隙
-
交叉轴对齐方式：alignItems
image.png
image.png
Column() {}..alignItems(HorizontalAlign.Start)
3.自适应伸缩 .layoutWeight(数字)
设置 layoutWeight 属性的 子元素 与 兄弟元素，会 按照权重 进行分配 主轴 的 空间 (剩余空间)
Column() {
Text("儿童设备介入")
Text("说明文案")
}.backgroundColor(Color.Brown)
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
二.弹性布局(Flex)
1.参数对象:
- direction：主轴方向:
- justifyContent：主轴对齐方式
- alignItems ：交叉轴对齐方式
- wrap：布局换行wrap：单行或者单列: 优先使用线性布局(基于Flex设计，做了性能优化)
2.wrap 属性:换行
- FlexWrap.NoWrap 单行布局
- FlexWrap.Wrap 多行布局
Flex({wrap:FlexWrap.Wrap}){
Text("ArkTs1").backgroundColor(Color.Gray).padding(10).margin(10)
Text("ArkTs2").backgroundColor(Color.Gray).padding(10).margin(10)
Text("ArkTs3").backgroundColor(Color.Gray).padding(10).margin(10)
Text("ArkTs4").backgroundColor(Color.Gray).padding(10).margin(10)
Text("ArkTs5").backgroundColor(Color.Gray).padding(10).margin(10)
}.padding(10)
image.png
三.绝对定位
- 作用:控制组件位置，可以实现层叠效果
- 特点:参照 父组件左上角 进行偏移、绝对定位后的组件 不再占用自身原有位置
- 语法:.position(位置对象)
参数:{ x: 水平偏移量, y: 垂直偏移量 } - zIndex 层级：调整组件层级
语法:.zIndex(数字) 参数:取值为整数数字，取值越大，显示层级越高
Text("1")
.padding(40)
.backgroundColor(Color.Gray)
.position({x:0,y:0})
.zIndex(0)
Text("2")
.padding(30)
.backgroundColor(Color.Red)
.position({x:0,y:0})
.zIndex(2)
Text("3")
.padding(20)
.backgroundColor(Color.Blue)
.position({x:0,y:0})
image.png
四.层叠布局
Stack({alignContent:Alignment.TopStart}){
Text("1")
.padding(40)
.backgroundColor(Color.Gray)
Text("2")
.padding(30)
.backgroundColor(Color.Red)
Text("3")
.padding(20)
.backgroundColor(Color.Blue)
}
五.滚动容器 Scroll
1.属性
image.png
2.控制器：控制滚动、获取滚动距离
struct ScrollDemo {
scroller: Scroller = new Scroller()
build() {
Column() {
Scroll(this.scroller) { ... }
.scrollable(ScrollDirection.Vertical)//1.滑动方向
.scrollBar(BarState.Auto)//2.滚动条状态
.scrollBarColor(Color.Red)//3.滚动条颜色
.edgeEffect(EdgeEffect.Spring)//4.设置边缘滑动效果
Row() {
Button('返回顶部')
.onClick(() => {
this.scroller.scrollEdge(Edge.Top)
})
Button('获取滚动距离')
.onClick(() => {
const x = this.scroller.currentOffset().xOffset
const y =this.scroller.currentOffset().yOffset
AlertDialog.show({
message:`x:${x},y:${y}`
})
}) }
} }
}
六.容器组件 Tabs
image.png
1.属性
- barPosition :调整位置 开头 或 结尾 (参数)
- vertical :调整导航 水平 或 垂直
- scrollable :调整是否 手势滑动 切换
- animationDuration :点击滑动动画时间
@Entry
@Component
struct Index {
build() {
Tabs() {
TabContent() {
}.tabBar("首页")
TabContent() {
}.tabBar("动态")
TabContent() {
}.tabBar("商城")
TabContent() {
}.tabBar("我的")
}
.barPosition(BarPosition.End)//1.TabBar 位置
.scrollable(true)//2.是否收拾滑动
.animation({duration:0})
}
}
2.自定义TabBar
Tabs() {
TabContent() {
// 内容略
}
.tabBar(this.tabBarBuilder()) }
@Builder
tabBarBuilder() {
// 自定义的Tabbar结构
}
3.高亮切换
核心思路:
- 监听切换事件 → 得到索引值，记录高亮的索引
- 给每个 tabBar起个标记，0，1，2
- 在 tabBar 内部比较 标记 == 记录的索引 ? 高亮 : 不高亮
image.png
