企业网站博客上如何推广,知名建筑设计网站,珠海 网站设计,百度关键词搜索热度查询概念
主轴#xff1a;在布局容器中#xff0c;默认存在两根轴#xff0c;分别是主轴和交叉轴#xff0c;不同的容器中主轴的方向不一样的。
在Column容器中主轴的方向是垂直方向。在Row容器中主轴的方向是水平方向。在Flex容器中可以通过direction参数设置主轴的方向在布局容器中默认存在两根轴分别是主轴和交叉轴不同的容器中主轴的方向不一样的。
在Column容器中主轴的方向是垂直方向。在Row容器中主轴的方向是水平方向。在Flex容器中可以通过direction参数设置主轴的方向设置为Column时主轴的方向是垂直方向。设置为Row时主轴的方向是水平方向。在Stack容器中没有明确主轴与交叉轴通过设置alignContent参数来改变容器内组件的对齐方式。
交叉轴与主轴垂直相交的轴线如果主轴是垂直方向则交叉轴就是水平方向如果主轴是水平方向则交叉轴是垂直方向。
构建主界面 在ets目录下新建几个子目录点击鼠标右键 NewDirectory新建名为view的自定义子组件目录、common公共目录和viewmodel数据目录。
在LayoutAlignIndex.ets主界面中包含显示四种容器对齐方式的入口。
// LayoutAlignIndex.ets
Entry
Component
struct LayoutAlignIndex {private indexList: IndexListItem[] getIndexList();build() {Column() {// 标题Text($r(app.string.index_title))...List() {ForEach(this.indexList, (item: IndexListItem) {ListItem() {ListItemComp({ item: item }).margin({ top: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })}}, (item: IndexListItem) JSON.stringify(item))}....listDirection(Axis.Vertical).margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })}...}
}Component
struct ListItemComp {...
}构建容器对齐方式
在pages目录下点击鼠标右键 NewPage新建Second.ets页面。在view目录下点击鼠标右键 NewArkTS File新建五个ArkTS文件分别为ColumnShowList.ets、FlexShowList.ets、RowShowList.ets、StackComponent.ets和CommonComponent.ets。 在ColumnShowList.ets中自定义组件ColumnShowList主要效果是在Column布局容器中设置不同的主轴与交叉轴的对齐方式属性时显示容器内元素的对齐方式以及主轴对其方式和交叉轴对其方式属性设置模块。
// ColumnShowList.ets
Component
export struct ColumnShowList {Consume currentColumnJustifyContent: FlexAlign;Consume currentColumnAlignItems: HorizontalAlign;build() {Column() {// Column中元素对齐方式布局Column() {ForEach(LIST, (item: number) {CommonItem({ item: item })}, (item: number) JSON.stringify(item))}...// 设置主轴对齐方式ColumnMainAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })// 设置交叉轴对齐方式ColumnAxisAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })}.layoutWeight(1).height(ALL_PERCENT).width(ALL_PERCENT)}
}其中ColumnMainAlignRadioList子组件和ColumnAxisAlignRadioList子组件分别是设置主轴对齐方式单选框列表和设置交叉轴对齐方式单选框列表并且在FlexShowListRowShowList和StackComponent中都存在代码结构类似的子组件只是设置的属性和参数单选框列表不同后面不在重复其详细代码这里选择其中一个单选框列表子组件来显示。
// ColumnMainAlignRadioList.ets
Component
export struct ColumnMainAlignRadioList {...build() {Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {// 单选框列表模块名称Row() {Text(this.moduleName).fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)}.margin({ left: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })Flex({direction: FlexDirection.Row,justifyContent: FlexAlign.SpaceBetween,wrap: FlexWrap.NoWrap}) {ForEach(this.radioList, (item: string, index: number | undefined) {MainAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index 0 ? true : false }).margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })}, (item: string) JSON.stringify(item))}...}...}
}Component
struct MainAlignRadioItem {...build() {Row() {Radio({ value: this.textName, group: this.groupName })....onClick(() {switch (this.textName) {case ATTRIBUTE.START:this.currentColumnJustifyContent FlexAlign.Start;break;case ATTRIBUTE.CENTER:this.currentColumnJustifyContent FlexAlign.Center;break;default:this.currentColumnJustifyContent FlexAlign.End;break;}})Text(this.textName).fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN).opacity(ATTRIBUTE_OPACITY)}}
}在FlexShowList.ets中自定义组件FlexShowList主要效果是在Flex布局容器中设置不同的参数时显示容器内元素对齐方式。
// FlexShowList.ets
Component
export struct FlexShowList {Consume list: number[];Consume currentFlexDirection: FlexDirection;Consume currentFlexJustifyContent: FlexAlign;Consume currentFlexAlignItems: ItemAlign;Consume currentFlexWrap: FlexWrap;Consume currentFlexAlignContent: FlexAlign;build() {Column() {// Flex中元素对齐方式布局Flex({...}) {ForEach(this.list, (item: number) {CommonItem({ item: item })}, (item: number) JSON.stringify(item))}...// 设置主轴方向FlexMainDirectionRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })// 设置主轴对齐方式FlexMainAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })// 设置交叉轴对齐方式FlexAxisAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })}.layoutWeight(1).height(ALL_PERCENT).width(ALL_PERCENT)}
}在RowShowList.ets中自定义组件RowShowList主要效果是在Row布局容器中当设置不同的主轴与交叉轴的对齐方式属性时显示容器内元素的对齐方式。
// RowShowList.ets
Component
export struct RowShowList {Consume currentRowJustifyContent: FlexAlign;Consume currentRowAlignItems: VerticalAlign;build() {Column() {// Row中元素对齐方式布局Row() {ForEach(LIST, (item: number) {CommonItem({ item: item })}, (item: number) JSON.stringify(item))}...// 设置主轴对齐方式RowMainAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })// 设置交叉轴对齐方式RowAxisAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })}.layoutWeight(1).height(ALL_PERCENT).width(ALL_PERCENT)}
}在StackComponent.ets中自定义组件StackComponent主要效果是在Stack布局容器中设置不同对齐方式属性时容器内堆叠元素的对齐方式。
// StackComponent.ets
Component
export struct StackComponent {Consume currentStackAlignContent: Alignment;Consume message: string;State textAl: TextAlign TextAlign.Center;build() {Column() {// Stack中元素对齐方式布局Stack({ alignContent: this.currentStackAlignContent }) {Text().width(ALL_PERCENT).height(ALL_PERCENT).fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN).backgroundColor($r(app.color.show_list_backgroundColor))Text(this.message)...}.margin({ top: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }).width(ALL_PERCENT).height(SHOW_LIST_HEIGHT_PERCENT.STACK_SHOW_LIST_HEIGHT)// 设置对齐方式StackAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })}.layoutWeight(1).height(ALL_PERCENT).width(ALL_PERCENT)}
}在CommonComponent.ets中自定义组件CommonItem。
// CommonComponent.ets
Component
export struct CommonItem {private item: number 0;build() {Text(this.item.toString()).fontSize(MARGIN_FONT_SIZE_SPACE.FIFTH_MARGIN).width(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN).height(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN).fontColor($r(app.color.show_list_fontColor)).textAlign(TextAlign.Center).align(Alignment.Center).backgroundColor($r(app.color.white)).borderRadius(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING).margin(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)}
}在Second.ets页面根据首页跳转时的参数渲染顶部不同的容器名称和条件渲染不同的子组件。
// Second.ets
Entry
Component
struct Second {private moduleList: ContainerModuleItem[] [];private componentName: string ;Provide containerType: number 0;...;aboutToAppear() {let params router.getParams() as Recordstring, Object;this.moduleList params.moduleList as ContainerModuleItem[];this.componentName params.componentName as string;this.containerType params.containerType as number;}build() {Row() {Column({ space: MARGIN_FONT_SIZE_SPACE.SIXTH_MARGIN }) {Column() {BackComp({ componentName: this.componentName })if (this.containerType CONTAINER_TYPE.FLEX) {FlexShowList()} else if (this.containerType CONTAINER_TYPE.COLUMN) {ColumnShowList()} else if (this.containerType CONTAINER_TYPE.ROW) {RowShowList()} else {StackComponent()}}.width(ALL_PERCENT).height(ALL_PERCENT)}.width(ALL_PERCENT)}.height(ALL_PERCENT)}
}// 顶部子组件
Component
struct BackComp {...
}更多的鸿蒙学习文档或者鸿蒙的学习路线可以前往《鸿蒙开发4.0基础-高阶文档》下面是鸿蒙学习路线略缩图高清完整版在_保存。 最后
本篇主要介绍Flex、Column、Row和Stack这四种布局容器内子组件对齐方式的设置方法。如何灵活的使用alignItems、justifyContent、alignContent、alignSelf和align这5种设置对齐方式。
