HarmonyOS Text组件的文案过长时,会把右侧组件顶出屏幕
代码如下,组件关系:
1、左右图标与文案底部对齐。
2、上面的图标、下面的文案与文案右侧对齐
现在的问题:文案长度过长时,会把右侧图标顶出屏幕,怎样才能实现。
const RIGHT_ICON_WIDTH = 20
@Entry
@Component
struct Index {
@State showMenu: boolean = false
@State messageText: string = '消息文本111111111'
@State messageTopText: string = '引用消息文案'
build() {
Column() {
Image($r('app.media.app_icon'))
.width(20).margin({right: RIGHT_ICON_WIDTH})
.id('top_icon')
Row() {
Image($r('app.media.app_icon')).width(20).id('left_icon')
/**
* '该区域的展示规则:'
* 1、单行可展示下时,左侧留白
* 2、单行展示不下时,自动换行
*/
Column() {
// 单行展示
Text(this.messageTopText)
.fontSize(12).fontColor(Color.Gray)
.margin({bottom: 8})
.maxLines(1)
.textOverflow({overflow: TextOverflow.Ellipsis}).ellipsisMode(EllipsisMode.END)
Text(this.messageText)
.fontSize(15)
}.backgroundColor(Color.Orange)
.alignItems(HorizontalAlign.Start)
.padding(5)
Image($r('app.media.app_icon')).width(20).id('right_icon')
}.alignItems(VerticalAlign.Bottom)
.justifyContent(FlexAlign.End)
.width('100%')
Text('底部文案')
.fontSize(12)
.margin({right: RIGHT_ICON_WIDTH})
}.width('100%')
.backgroundColor(Color.White)
.justifyContent(FlexAlign.End)
.alignItems(HorizontalAlign.End)
.padding({left: 20})
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
Text文本过长时如何实现上下滚动?
473浏览 • 1回复 待解决
CustomDialog上面有一个textInput,点击对话框被顶出屏幕
1867浏览 • 1回复 待解决
HarmonyOS Text换行后如何获取每行的文案
247浏览 • 1回复 待解决
UI组件布局,屏幕外左侧一屏、当前屏幕一屏、屏幕外右侧一屏
759浏览 • 1回复 待解决
Column组件中放了Row子组件,当Row中的内容过长时,会显示在Column以外的区域
1531浏览 • 1回复 待解决
TextInput/Search组件右侧功能按钮、按钮位置获取问题
1791浏览 • 1回复 待解决
HarmonyOS 如何在Row中设置子组件为右侧对齐?
451浏览 • 1回复 待解决
HarmonyOS如何测量Text组件的宽度呢
353浏览 • 1回复 待解决
HarmonyOS List组件做吸顶效果,吸顶view是透明背景,吸顶view下的列表滚动内容可以透过吸顶view
260浏览 • 1回复 待解决
获取文本Text组件的宽度
391浏览 • 1回复 待解决
Text组件设置内容后,如何获取该Text组件的整体高度?
256浏览 • 1回复 待解决
text组件的字体如何加粗?
167浏览 • 1回复 待解决
HarmonyOS TextInput组件InputType.Password模式右侧眼睛图片替换问题
315浏览 • 1回复 待解决
HarmonyOS 组件包含margin或padding时,宽度设置为100%会超出屏幕
420浏览 • 1回复 待解决
HarmonyOS Text组件默认基线是如何计算的
378浏览 • 1回复 待解决
HarmonyOS Text组件是否有最大宽度属性?
197浏览 • 1回复 待解决
Text组件是否支持多行显示
1912浏览 • 1回复 待解决
HarmonyOS Text组件设置行间距吗?
325浏览 • 0回复 待解决
如何在Text组件关闭bindSelection自定义菜单时,取消选中状态
335浏览 • 1回复 待解决
Text 组件如何加载Unicode字符
1707浏览 • 1回复 待解决
Text组件布局过界问题
995浏览 • 1回复 待解决
HarmonyOS Text组件是否可以设置文字描边
318浏览 • 1回复 待解决
Text 组件无法渲染的组合的 unicode emoji
576浏览 • 0回复 待解决
如何获取Text组件中文字的宽度
2049浏览 • 1回复 待解决
HarmonyOS 系统Text组件是否支持上下滚动展示?
187浏览 • 2回复 待解决
目前有两种方案可以防止Text组件过长时,将右边的组件顶出屏幕:
方案一:
核心思想是动态添加layoutWeight属性,获取屏幕宽度,并在Text组件达到一定长度时赋值layoutWeight属性。
方案二:
给Text组件设置constraintSize属性maxWidth,具体约束的最大宽度按照场景需要设置。