ArkTS及openHarmony

补充

padding:内边距,也就是盒子边和盒子内部的距离

margin:外边距,也就是盒子和盒子的距离

openHarmony应用开发及UI界面

常用布局

Row 水平线性布局核心代码

子控件会共享同一行,也就是都在同一行内

typescript 复制代码
@Preview
@Component
struct TestRow {
    build(){
        Row({space:20}){
       		Button("按钮1")
        	Button("按钮2")
        	Button("按钮3")
        	Button("按钮4")
        }
    }
}

Column垂直线性布局核心代码

子控件不在同一行内,各自一行

typescript 复制代码
@Preview
@Component
struct TestColumn {
    build(){
        Column({space:5}){
            Button("按钮1")
            Button("按钮2")
            Button("按钮3")
        }
    }
}

Stack层叠布局核心代码

typescript 复制代码
@Preview
@Component
struct TestStack {
    build(){
        Stack(){
            Row(){}.width("100%").height("40%").backgroundColor("red")
            Row(){}.width("100%").height("30%").backgroundColor("green")
            Row(){}.width("40%").height("20%").backgroundColor("blue")
        }
    }
}

Flex弹性布局

typescript 复制代码
@Preview
@Component
struct TestFlex {
    build() {
        Flex({
            direction:FlexDirection.Row, // 设置主轴方向,默认为Row
            justifyConntent: FlexAlign.SpaceBetween, // 设置主轴对齐方式
            alignItems: ItemAlign.Auto // 设置交叉轴的对齐方式
        }){
          Text("111").width("30%").height(30).backgroundColor("red")
          Text("111").width("30%").height(40).backgroundColor("pink")
          Text("111").width("30%").height(50).backgroundColor("gray")
        }
        .size({width:'100%',height:80})
        .padding(10)
        .backgroundColor("yellow")
    }
}

Grid网格布局

typescript 复制代码
@Preview
@Component
struct TestGrid {
	titles: string[]=['item1','item2','item3','item4','item5','item6','item7','item8','item9','item10','item11','item12','item13','item14','item15','item16']
    build(){
        Grid() {
            ForEach(this.titles,(item:string,index?:number)=>)
        }
    }
}

主轴方向设置

direction: FlexDirection.Row(默认值)

direction: FlexDirection.RowReverse

direction: FlexDirection.Colomn

direction: FlexDirection.ColomnReverse

主轴对齐设置

justifyContent: FlexAlign.SpaceBetween(默认值)

justifyContent: FlexAlign.SpaceAround

justifyContent: FlexAlign.Evenly

justifyContent: FlexAling.Start

justifyContent: FlexAlign.Center

justifyContent: FlexAlign.End

交叉轴对齐设置

alignItems: ItemAlign.Auto(默认值),等价于Start

alignItem: ItemAlign.Start顶部对齐

alignItem: ItemAlign.Center居中对齐

alignItem: ItemAlign.End底部对齐

alignItem: Stretch拉伸居中对齐

alignItem: Baseline文本中心对齐

常用组件
函数 组件名
Button() 按钮
Text() 文本控件
Toggle() 开关控件
Radio() 单选框
TextInput() 输入框
Image() 图片
Progress() 进度条
CustomDialog() 对话框
AlterDialog() 对话框
相关推荐
天***889619 分钟前
js封装一个双精度算法实现
开发语言·前端·javascript
Algebraaaaa31 分钟前
什么是前端、后端与全栈开发,Qt属于什么?
开发语言·前端·qt
胡斌附体40 分钟前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong43 分钟前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron
im_AMBER1 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界1 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
安卓开发者2 小时前
鸿蒙NEXT Wear Engine穿戴侧应用开发完全指南
ubuntu·华为·harmonyos
华仔啊2 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
安卓开发者2 小时前
鸿蒙Next振动开发指南:打造沉浸式触觉反馈体验
华为·harmonyos