HarmonyOS Flex 组件的组合使用

HarmonyOS
2025-01-09 14:27:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

请参考以下代码:

@Entry
@Component
struct Arc {
  @State title:string = '这是标题'
  @State tip: boolean = true

  build() {
    Column(){
      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Text(this.title)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(1)
          .ellipsisMode(EllipsisMode.END)
        Text(){
          Span('特色模型')
        }
        .flexShrink(0)
        .visibility(this.tip ? Visibility.Visible : Visibility.None)
        Text(){
          Span('贷款额度高')
        }
        .flexShrink(0)
        .visibility(this.tip ? Visibility.Visible : Visibility.None)
      }
      .width('90%')
      .height(150)
      Button('change')
        .onClick(() => {
          this.title = '这个标题特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长'
          this.tip = false
        })
      Button('change2')
        .onClick(() => {
          this.title = '这个标题比较长比较长比较长比较长'
          this.tip = true
        })
      Button('还原')
        .onClick(() => {
          this.title = '这是标题'
          this.tip = true
        })
    }
    .width('100%')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 17:37:55
相关问题
HarmonyOS 使用Grid和GriItem组合问题
682浏览 • 1回复 待解决
tabs组件和页面组合联动方式
1078浏览 • 1回复 待解决
HarmonyOS Flex组件宽度问题
735浏览 • 1回复 待解决
HarmonyOS Flex组件存在问题,UI不对
374浏览 • 1回复 待解决
HarmonyOS Flex组件是否有间隔属性
419浏览 • 1回复 待解决
HarmonyOS Flex怎么设置组件空行
215浏览 • 1回复 待解决
HarmonyOS 组合动画如何实现
347浏览 • 1回复 待解决
HarmonyOS flex居中
435浏览 • 1回复 待解决
HarmonyOS flex容器布局
1470浏览 • 2回复 待解决
组合索引应该如何设计?
2749浏览 • 1回复 待解决
HarmonyOS 如何限制Flex行数
328浏览 • 1回复 待解决
如何申请组合授权权限?
754浏览 • 1回复 待解决
Flex布局与w3c中flex是否有差异
1359浏览 • 1回复 待解决
求教ArkUI如何实现组合动画?
5777浏览 • 1回复 待解决