HarmonyOS Flex 组件的组合使用

HarmonyOS
1天前
浏览
收藏 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
微信
回复
1天前
相关问题
HarmonyOS 使用Grid和GriItem组合问题
428浏览 • 1回复 待解决
tabs组件和页面组合联动方式
832浏览 • 1回复 待解决
HarmonyOS Flex组件宽度问题
460浏览 • 1回复 待解决
HarmonyOS Flex怎么设置组件空行
14浏览 • 1回复 待解决
HarmonyOS Flex组件是否有间隔属性
161浏览 • 1回复 待解决
HarmonyOS Flex组件存在问题,UI不对
141浏览 • 1回复 待解决
如何申请组合授权权限?
607浏览 • 1回复 待解决
HarmonyOS flex居中
241浏览 • 1回复 待解决
HarmonyOS 组合动画如何实现
134浏览 • 1回复 待解决
求教ArkUI如何实现组合动画?
5648浏览 • 1回复 待解决
HarmonyOS 如何限制Flex行数
104浏览 • 1回复 待解决
HarmonyOS flex容器布局
1129浏览 • 2回复 待解决
组合索引应该如何设计?
2571浏览 • 1回复 待解决
Flex布局与w3c中flex是否有差异
1147浏览 • 1回复 待解决
如何优化Flex布局性能
653浏览 • 1回复 待解决