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)
  }
}阿
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
分享
微博
QQ
微信
回复
2024-12-20 18:15:09
相关问题
HarmonyOS 怎么能设置禁止分屏?
811浏览 • 1回复 待解决
HarmonyOS Flex怎么设置组件间的空行
486浏览 • 1回复 待解决
怎么解决HilLog日志打印信息截断?
257浏览 • 1回复 待解决
HarmonyOS 单行Text是否截断隐藏?
1044浏览 • 1回复 待解决
HarmonyOS 字符串太长截断
728浏览 • 1回复 待解决
HarmonyOS Text组件中,文本怎么换行
1236浏览 • 1回复 待解决
textOverflow怎么按字母截断
1269浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
1438浏览 • 1回复 待解决
HarmonyOS Flex 组件的组合使用
523浏览 • 1回复 待解决
HarmonyOS Flex布局如何设置最大行数
962浏览 • 1回复 待解决