HarmonyOS Flex组件设置不换行怎么能避免被截断

UI中通过Flex展示小标签,产品要求只在一行展示,展示不下就不展示了。目前通过Flex组件实现标签列表的展示,设置成NoWrap属性后,标签会一直平铺下去,且最后展示的标签还会被截断。如果不想被截断设置成Wrap属性后,又无法限制单行显示。请问如何操作?

HarmonyOS
2024-12-20 16:30:55
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

给父组件设置高度,加上clip裁剪属性,文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5

参考以下demo:

@Entry
@Component
struct Test66 {
  @State arr: string[] = ['西安市', '成都市22','成都市33','成都市44','成都市55','成都市66', '重庆市', '乌鲁木齐市', '北京市', '呼伦贝尔市', '北京市333'];
  build() {
    Column() {
      Flex({  wrap: FlexWrap.Wrap }) {
        ForEach(this.arr, (item: string) => {
          Text(item)
            .fontSize('16vp')
            .borderWidth('1vp')
            .borderColor('#666666')
            .borderRadius('10vp')
            .padding('3vp')
            .height(100)
        })
      }
    }.width('100%').height(100).backgroundColor(0xDCDCDC).clip(true)
  }
}阿
分享
微博
QQ
微信
回复
2024-12-20 18:15:09
相关问题
HarmonyOS 怎么能设置禁止分屏?
1007浏览 • 1回复 待解决
HarmonyOS Flex怎么设置组件间的空行
645浏览 • 1回复 待解决
怎么解决HilLog日志打印信息截断?
764浏览 • 1回复 待解决
HarmonyOS 单行Text是否截断隐藏?
1409浏览 • 1回复 待解决
HarmonyOS 字符串太长截断
1061浏览 • 1回复 待解决
HarmonyOS Text组件中,文本怎么换行
3116浏览 • 1回复 待解决
textOverflow怎么按字母截断
1482浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
1759浏览 • 1回复 待解决
HarmonyOS Flex 组件的组合使用
779浏览 • 1回复 待解决