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

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

HarmonyOS
2天前
浏览
收藏 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
微信
回复
2天前
相关问题
HarmonyOS 怎么能设置禁止分屏?
343浏览 • 1回复 待解决
HarmonyOS 单行Text是否截断隐藏?
285浏览 • 1回复 待解决
textOverflow怎么按字母截断
799浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
454浏览 • 1回复 待解决
HarmonyOS Flex组件存在问题,UI不对
37浏览 • 1回复 待解决
HarmonyOS Flex组件宽度问题
360浏览 • 1回复 待解决
HarmonyOS TextInput 换行问题
712浏览 • 1回复 待解决
HarmonyOS 字符串怎么手动加换行
726浏览 • 1回复 待解决