如何开网站建设公司,临沂网站建设推荐,网站底部固定广告代码,如何自己做游戏软件前言 代码案例基于Api13。 正在开发一个搜索组件#xff0c;其中一个功能是针对历史搜索的内容进行展示#xff0c;由于搜索的内容长度不一#xff0c;需要进行流式布局展示#xff0c;效果如下#xff1a; 以上的效果#xff0c;相信大家在很多的应用里或多或少都见到过…前言 代码案例基于Api13。 正在开发一个搜索组件其中一个功能是针对历史搜索的内容进行展示由于搜索的内容长度不一需要进行流式布局展示效果如下 以上的效果相信大家在很多的应用里或多或少都见到过那么在鸿蒙当中如何实现呢也是非常的简单系统给我们提供弹性布局Flex使用它可以帮助我们快速的进行实现。 EntryComponentstruct Index {State searchList: string[] [程序员一鸣, App开发干货铺, 程序员修养, 鸿蒙4.0, HarmonyOS NEXT,开发,中,这是一个非常长的搜索内容请须知]build() {Column() {Text(历史搜索).fontSize(18).fontColor(Color.Black).fontWeight(FontWeight.Bold)Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.searchList, (item: string) {Text(item).backgroundColor(#e8e8e8).padding({left: 10,right: 10,top: 5,bottom: 5}).margin({ right: 10, bottom: 10 }).borderRadius(5)})}.margin({ top: 10 })}.height(100%).width(100%).padding({ left: 10, right: 10 }).alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Center)}} 什么是Flex 一句话解读主要对容器中的子元素进行排列、对齐和分配剩余空间它允许开发者通过简单的属性设置来实现复杂的布局效果其核心思想就是让容器能够根据子元素的大小和排列方式自动调整布局从而实现灵活的界面设计。 主要特点有灵活性Flex布局可以根据容器的大小自动调整子元素的排列方式和大小。方向性Flex布局支持水平和垂直两种排列方向开发者可以根据需要选择合适的排列方式。对齐方式Flex布局提供了多种对齐方式如居中、两端对齐、等间距对齐等方便开发者实现各种复杂的布局效果。 它有主轴和交叉轴概念所谓的主轴就是水平方向交叉轴就是垂直方向主轴开始的位置称为主轴起始点结束位置称为主轴结束点交叉轴开始的位置称为交叉轴起始点结束位置称为交叉轴结束点。 使用方式 简单使用方式如下 Flex({ direction: FlexDirection.Row }) {Text(元素1).padding(10).backgroundColor(Color.Red)Text(元素2).padding(10).backgroundColor(Color.Pink)Text(元素3).padding(10).backgroundColor(Color.Orange)} 控制方向 通过direction属性来控制子元素的方向目前有四个可选项。 名称 说明 Row 主轴与行方向一致作为布局模式。 RowReverse 与Row方向相反方向进行布局。 Column 主轴与列方向一致作为布局模式。 ColumnReverse 与Column相反方向进行布局。 Row
代码
Flex({ direction: FlexDirection.Row }) {Text(元素1).padding(10).backgroundColor(Color.Red)Text(元素2).padding(10).backgroundColor(Color.Pink)Text(元素3).padding(10).backgroundColor(Color.Orange)}
效果 RowReverse
代码 Flex({ direction: FlexDirection.RowReverse }) {Text(元素1).padding(10).backgroundColor(Color.Red)Text(元素2).padding(10).backgroundColor(Color.Pink)Text(元素3).padding(10).backgroundColor(Color.Orange)}
效果 Column
代码 Flex({ direction: FlexDirection.Column }) {Text(元素1).padding(10).backgroundColor(Color.Red)Text(元素2).padding(10).backgroundColor(Color.Pink)Text(元素3).padding(10).backgroundColor(Color.Orange)}
效果 ColumnReverse
代码 Flex({ direction: FlexDirection.ColumnReverse }) {Text(元素1).padding(10).backgroundColor(Color.Red)Text(元素2).padding(10).backgroundColor(Color.Pink)Text(元素3).padding(10).backgroundColor(Color.Orange)}
效果 控制行/列 通过wrap属性来控制是单行/列还是多行/列排列有三个参数可选择。 名称 说明 NoWrap Flex容器的元素单行/列布局子元素尽可能约束在容器内。当子元素有最小尺寸约束等设置时Flex容器不会对其强制弹性压缩。 Wrap Flex容器的元素多行/列排布子项允许超出容器。 WrapReverse Flex容器的元素反向多行/列排布子项允许超出容器。 加上wrap属性则就允许实现多行/列排布。 Flex({ direction: FlexDirection.Row,wrap:FlexWrap.Wrap}) {Text(元素1).width(100).padding(10).backgroundColor(Color.Red)Text(元素2).padding(10).width(100).backgroundColor(Color.Pink)Text(元素3).padding(10).width(100).backgroundColor(Color.Orange)Text(元素4).padding(10).width(100).backgroundColor(Color.Gray)} 我们看下效果当子元素超出容器宽度时会自动换行。 对齐方式 对其方式有两种一种是主轴方向一种是交叉轴方向主轴方向使用justifyContent属性交叉轴方向使用alignItems。 justifyContent 名称 说明 Start 元素在主轴方向首端对齐第一个元素与行首对齐同时后续的元素与前一个对齐。 Center 元素在主轴方向中心对齐第一个元素与行首的距离与最后一个元素与行尾距离相同。 End 元素在主轴方向尾部对齐最后一个元素与行尾对齐其他元素与后一个对齐。 SpaceBetween Flex主轴方向均匀分配弹性元素相邻元素之间距离相同。第一个元素与行首对齐最后一个元素与行尾对齐。 SpaceAround Flex主轴方向均匀分配弹性元素相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 SpaceEvenly Flex主轴方向均匀分配弹性元素相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 alignItems 名称 说明 Auto 使用Flex容器中默认配置。 Start 元素在Flex容器中交叉轴方向首部对齐。 Center 元素在Flex容器中交叉轴方向居中对齐。 End 元素在Flex容器中交叉轴方向底部对齐。 Stretch 元素在Flex容器中交叉轴方向拉伸填充。容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况下无论元素尺寸是否设置均拉伸到容器尺寸。 Baseline 元素在Flex容器中交叉轴方向文本基线对齐。 子元素属性
除了通过Flex容器来控制之外里面子元素也可以自由控制占位情况比如通过flexGrow来分配剩余空间的比例通过flexShrink来压缩比例默认1可压缩通过alignSelf来覆盖容器的交叉轴对齐方式。 比如我们给第三个元素设置完全占用剩余空间 Flex({ direction: FlexDirection.Row }) {Text(元素1).width(100).padding(10).backgroundColor(Color.Red)Text(元素2).padding(10).width(100).backgroundColor(Color.Pink)Text(元素3).padding(10).width(100).flexGrow(1).backgroundColor(Color.Orange)} 查看效果 相关总结
在实际的开发中需要掌握主轴与交叉轴的关系、换行规则及子元素属性同时注意性能与兼容性问题还有一点Flex组件在渲染时存在二次布局过程因此在对性能有严格要求的场景下建议使用Column、Row代替。
