HarmonyOS List item高度固定,宽度随内容长短不一,如何实现?

List或column 作为根布局,item 的高度固定,宽度自适应大小,当前list或column、grid都不太符合~

HarmonyOS
2024-10-21 11:00:27
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可使用拉伸能力实现附件效果,拉伸能力是指容器组件尺寸发生变化时,增加或减小的空间全部分配给容器组件内指定区域,通常通过Flex布局中的flexGrow和flexShrink属性实现,具体使用可参考文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/adaptive-layout-V5参考demo:

@Entry  
@Component  
struct ListExample {  
  private arr: string[] = ['测试1111', '测试', '测试0', '测试112222']  
  
  build() {  
    Column() {  
      Row() {  
        ForEach(this.arr, (item: string) => {  
            Text(item)  
              .height(50).fontSize(16)  
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)  
        }, (item: string) => item)  
      }.width('100%')  
      .height('100%')  
      .backgroundColor(Color.Pink)  
      .justifyContent(FlexAlign.SpaceEvenly)  
      .flexGrow(1).flexShrink(0)  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor(0xDCDCDC)  
    .padding({ top: 5 })  
  }  
}

利用grid布局时,有属性columnsTemplate可设置当前网格布局列的数量或最小列宽值,rowsTemplate设置当前网格布局行的数量或最小行高值,参考文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5#属性

示例参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5#示例1

分享
微博
QQ
微信
回复
2024-10-21 16:54:20
相关问题
如何设置父组件子组件宽度变化
2089浏览 • 1回复 待解决
HarmonyOS listitem如何保存状态
227浏览 • 2回复 待解决
文字空行高度与字体高度不一
2023浏览 • 1回复 待解决
半模态转场如何控制固定高度
1844浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
658浏览 • 1回复 待解决
HarmonyOSList如何加载item的?
53浏览 • 0回复 待解决
Web组件获取高度不一
2147浏览 • 1回复 待解决
如何固定半模态转场的高度
387浏览 • 1回复 待解决
JS swiper 怎么像list样动态添加item
6252浏览 • 1回复 待解决
HarmonyOS listitem的交互效果处理
270浏览 • 1回复 待解决
HarmonyOS Swiper里面的item高度自动刷新
346浏览 • 1回复 待解决