HarmonyOS Flex组件设置通用属性height和constrainSize.maxHeight失效

使用Flex实现流式布局,设定最大高度100,但是布局里面的内容较多,Flex里面的内容会溢出,显示在原布局的上面

HarmonyOS
2024-12-20 16:40:53
980浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
shlp

可以在flex布局加.clip(true)属性:

@Entry
@Component
struct Index {
@State searchHistoryList: string[] = ['111','2222','22333'];
build() {
Column() {
Button()
.onClick(() => {
this.searchHistoryList = this.searchHistoryList.concat(["111", "222", "333", "3435533"])
})
// Flex 实现流式布局
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.searchHistoryList, (history: string) => {
Text(history.substring(0, 9))
.backgroundColor("#F2F4F8")
.border({
radius: 3
})
.fontSize(14)
.fontColor("#171E31")
.height(28)
.padding({
left: 12,
right: 12
})
.margin({
left: 4,
right: 4,
top: 8,
bottom: 8
})
.onClick(() => {
// todo 点击历史记录搜索关键字
})
})
}
.width("100%")
.backgroundColor('#000')
.displayPriority(0)
// .height(100)
.constraintSize({
// 暂时没有找到怎么设置最多两行,限定最大高度试试
maxHeight: 89
})
.clip(true)
}.displayPriority(1.9)
.height(200)
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
分享
微博
QQ
微信
回复
2024-12-20 19:02:32
相关问题
HarmonyOS Span的属性设置失效
555浏览 • 1回复 待解决
HarmonyOS Flex组件是否有间隔属性
917浏览 • 1回复 待解决
通用属性width是否支持设置变量
2742浏览 • 1回复 待解决
span组件使用margin属性失效
2618浏览 • 1回复 待解决
组件通用属性clip有什么作用?
1464浏览 • 1回复 待解决
如何设置自定义组件height缺省
2406浏览 • 1回复 待解决
HarmonyOS Flex怎么设置组件间的空行
489浏览 • 1回复 待解决
HarmonyOS 设置userAgent失效
653浏览 • 1回复 待解决
HarmonyOS 组件设置属性无效果
1136浏览 • 1回复 待解决
Web组件domStorageAccess属性设置
3084浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
1448浏览 • 1回复 待解决