通用属性

名称	参数	描述
width	Length
height	Length
size	{width?:Length,height?:Length}	设置宽高尺寸
padding	Padding|Length	内边距
margin	Margin|Length	外边距
constraintSize	{minWidth?:Length|minHeight?:Length|maxWidth?:Length|maxHeight?:Length}	设置约束尺寸，优先级高于width和height
layoutWeight	number|string	水平或垂直弹性尺寸

Length长度类型，用于描述尺寸单位

类型	说明
number	默认单位vp(虚拟像素)
string	需要显示指定像素单位，如’10px’,或设置百分比字符串，如’100%’
Resource	资源引用类型，引入系统资源或应用资源中的尺寸

vp虚拟像素单位：使元素在不同密度的设备上具有一致的视觉体量
fp字体像素单位：font pixel，大小默认与vp相同，即1vp=1fp。如果用户在设置中使用了更大的字体，字体的实际显示大小就会在vp的基础上乘以用户设置的缩放系数，即1fp = 1vp*缩放系数

Column组件

Column(value?: {space?: string | number; })
参数

参数	参数类型	描述
space	string|number	纵向布局元素垂直方向间距

属性

名称	参数类型	描述
alignItems	HorizontalAlign	设置子组件在水平方向上的对齐方式
justifyContent	FlexAlign	设置子组件在垂直方向上的对齐方式

Raw组件

Raw(value?: {space?: string | number; })
参数

参数	参数类型	描述
space	string|number	横向布局元素间距

属性

名称	参数类型	描述
alignItems	VerticalAlign	设置子组件在垂直方向上的对齐方式
justifyContent	FlexAlign	设置子组件在水平方向上的对齐方式

Column({ space: 10 }) {Row() {Row() {Image($r('app.media.ic_controlcenter_screenshot_filled')).width(48).height(48)}.layoutWeight(1)Row() {Image($r('app.media.icon')).width(48).height(48)}.backgroundColor('#ff9f9a6c').layoutWeight(2).width(100).height(100).justifyContent(FlexAlign.Center)}.backgroundColor('#ffe590a4').width('100%').height(200)Row() {Image($r('app.media.ic_contacts_company')).width(48).height(48)}.backgroundColor('#ff72dd84').width(200).height(200)Row() {Image($r('app.media.ic_controlcenter_screen_recording_filled')).objectFit(ImageFit.Contain).width(48).height(48)}.backgroundColor('#ff90d4e5').width(200).constraintSize({ minWidth: 300 }).height(200).alignItems(VerticalAlign.Center)}.size({ width: '100%', height: '100%' }).justifyContent(FlexAlign.SpaceAround).alignItems(HorizontalAlign.Center)

自定义组件

@Entry
@Component
struct CustomePages {//自定义内部组件@Builder BodyWidget() {Row() {}.layoutWeight(1).backgroundColor('#ffec7b7b').height(100)}build() {Row({ space: 10 }) {this.BodyWidget()Container({ color: '#ee2233', image: 'ic_contacts_company' })}}
}
//全局自定义组件，都能用
@Component
struct Container {color: string = '#22ffee'image: string = 'icon'build() {Row() {Image($r(`app.media.${this.image}`))}.layoutWeight(1).backgroundColor(this.color).height(200)}
}

自定义组件抽离成一个单独的文件

@Component
export struct ListWidget { //export@State data: number[] = [1, 2, 3]build() {List({ space: 10 }) {ForEach(this.data, (item, key) => {ListItem() {Text(`${item}`).fontSize(24)}.width('100%').backgroundColor('#eee').padding(10)}, item => item)}.width('100%').height('100%')}
}import {ListWidget} from './widget/ListWidget' //import
@Entry
@Component
struct StackPages {list: number[] = [1, 2, 3]build() {Stack({ alignContent: Alignment.BottomEnd }) {ListWidget({data:this.list})}}

Stack组件

Stack(value?: {alignContent?: Alignment})

参数	参数类型	描述
alignContent	Alignment	设置子组件在容器内的对齐方式

@Entry
@Component
struct StackPages {@State list: number[] = [1, 2, 3]//自定义组件@Builder NavWidget(text: string, textSize: number, color: string | number) {Row() {Text(text).textAlign(TextAlign.Center).width('100%').fontSize(textSize).fontColor(Color.White)}.width('100%').backgroundColor(color).padding({ top: 10, bottom: 10 })}//自定义组件@Builder ListWidget(data: Array<number>) {List({ space: 10 }) {ForEach(data, (item, key) => {ListItem() {Text(`${item}`).fontSize(24)}.width('100%').backgroundColor('#eee').padding(10)}, item => item)}.width('100%').height('100%')}//自定义组件@Builder ButtonWidget() {Button() {Text('+').fontColor('#fff').fontSize(40)}.backgroundColor('#ff45e1fd').width(80).height(80).margin({ right: 10, bottom: 10 }).onClick(()=> {this.doAdd()})}build() {Stack({ alignContent: Alignment.BottomEnd }) {Stack({ alignContent: Alignment.TopEnd }) {this.ListWidget(this.list)this.NavWidget('导航', 26, '#ffeac885')}this.ButtonWidget()}}//ListWidget是传值进去的，会导致list加入的数据不会进入ListWidget进行显示doAdd() {this.list.push(this.list[this.list.length-1] + 1);}
}

Flex组件

Flex(value?:{direction?:FlexDirection,wrap?:FlexWrap,alignContent?:FlexAlign,justifyContent?:FlexAlign,alignItems?: ItemAlign})
参数

参数名	参数类型	参数值	描述
direction	FlexDirection	Row(default),Column,RowReverse,ColumnReverse	子组件在Flex容器内的排列方向，即主轴的方向
wrap	FlexWrap	NoWrap(default),Warp,WrapReverse	Flex容器是单行/列还是多行/列
alignContent	FlexAlign	Start(default),Center,End,SpaceBetween,SpaceAround,SpaceEvenly	交叉轴中有额外的空间时，多行内容的对齐格式（仅在wrap为Wrap或WrapReverse时生效）
justifyContent	FlexAlign	Start(default),Center,End,SpaceBetween,SpaceAround,SpaceEvenly	子组件在Flex容器主轴上的对齐格式
alignItems	ItemAlign	Start(default),Center,End,Baseline,Stretch	子组件在Flex容器交叉轴上的对齐格式

import { Header } from './widget/Header';
import {SearchContainer} from './widget/SearchContainer'
@Entry@Componentstruct FlexPage {@State searchData:string[] = ['计算机','手表','手机','饮料','可口可乐']build() {Column() {Header()Text('热搜').fontSize(28).fontColor('#ff505656').margin({left:20}).width('100%')SearchContainer({data:this.searchData,w:'100%',h:'100%'})//为什么此高度是全屏幕的100%，而不是剩下空间的100%}.width('100%').height('100%')}}
import font from '@ohos.font'
@Componentexport struct Header {build() {Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {Button() {Image($r('app.media.ic_public_back')).width(40).height(40)}.backgroundColor(null)TextInput({ placeholder: '文本' }).placeholderColor('#000').placeholderFont({size:30}).fontSize(28).backgroundColor('#eeefff').borderRadius(30).padding(16).width('60%')Button() {Text('搜索').fontSize(26).fontColor('#000')}.backgroundColor(null).width('20%')}.width('100%').height(90)}}@Componentexport struct SearchContainer {data:string[]=['女装','女装','女装','女装']w:number|string = '100%'h:number|string = '100%'build() {Flex({direction:FlexDirection.RowReverse,wrap:FlexWrap.WrapReverse,alignContent:FlexAlign.SpaceEvenly}) {ForEach(this.data,(item,key)=>{Text(`${item}`).fontSize(24).backgroundColor('#ddd').padding(20).borderRadius(20).margin({top:10,right:10})})}.width(this.w).height(this.h).padding(20)}}

属性

名称	参数类型	描述
flexGrow	number	设置父容器的剩余空间分配给此属性所在组件的比例，自适应拉伸布局
flexShrink	number	当父容器空间不足时，子组件的压缩比例