HarmonyOS 历史记录的自适应宽度和换行的布局

关于搜索记录的,布局,能够自适应宽度和换行的布局,该怎么实现,目前使用Flex来布局,但无法实现两个text之间,增加间距,不知道这个布局方式是否正确?

HarmonyOS
2024-09-27 13:09:27
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

Flex没有统一控制子组件外边距的属性,可以通过给子组件单独设置margin值来实现。

示例代码如下:

@Entry  
@Component  
struct ListExample {  
  private arr: string[] = ['男', '休闲裤男', '微胖女连衣裙', '连衣裙套装','连衣裙女']  
  build() {  
    Column() {  
      Flex({ wrap: FlexWrap.Wrap }) {  
          ForEach(this.arr, (item: string) => {  
            Text(item)  
              .height(30).fontSize(16)  
              .padding(5).margin({top:5,right:10,bottom:5})  
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)  
          }, (item: string) => item)  
      }  
      .width('100%')  
      .padding(10)  
      .backgroundColor(0xAFEEEE)  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor(0xDCDCDC)  
    .padding({ top: 5 })  
  }  
}
分享
微博
QQ
微信
回复
2024-09-27 17:20:59
相关问题
如何实现搜索栏历史记录
819浏览 • 1回复 待解决
自适应缩放布局如何实现
352浏览 • 1回复 待解决
HarmonyOS Grid自适应高度拖拽问题
238浏览 • 1回复 待解决
HarmonyOS 高度自适应问题
189浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
488浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
221浏览 • 1回复 待解决
HarmonyOS 高度自适应
127浏览 • 1回复 待解决
HarmonyOS RelativeContainer宽高自适应问题
388浏览 • 1回复 待解决
ets中设置布局高度宽度
2992浏览 • 1回复 待解决