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
待解决
相关问题
CustomDialog上面有一个textInput,点击对话框被顶出屏幕
1985浏览 • 1回复 待解决
Text文本过长时如何实现上下滚动?
593浏览 • 1回复 待解决
HarmonyOS Text换行后如何获取每行的文案
325浏览 • 1回复 待解决
UI组件布局,屏幕外左侧一屏、当前屏幕一屏、屏幕外右侧一屏
803浏览 • 1回复 待解决
HarmonyOS 自定义弹窗中,点击输入框,弹起键盘,输入框被顶出屏幕了
257浏览 • 1回复 待解决
Column组件中放了Row子组件,当Row中的内容过长时,会显示在Column以外的区域
1679浏览 • 1回复 待解决
HarmonyOS List组件做吸顶效果,吸顶view是透明背景,吸顶view下的列表滚动内容可以透过吸顶view
390浏览 • 1回复 待解决
HarmonyOS 如何使Text组件填充满父组件?
128浏览 • 1回复 待解决
HarmonyOS 如何在Row中设置子组件为右侧对齐?
668浏览 • 1回复 待解决
Text组件设置内容后,如何获取该Text组件的整体高度?
324浏览 • 1回复 待解决
TextInput/Search组件右侧功能按钮、按钮位置获取问题
1884浏览 • 1回复 待解决
HarmonyOS 组件包含margin或padding时,宽度设置为100%会超出屏幕
693浏览 • 1回复 待解决
HarmonyOS如何测量Text组件的宽度呢
438浏览 • 1回复 待解决
text组件的字体如何加粗?
225浏览 • 1回复 待解决
HarmonyOS TextInput组件InputType.Password模式右侧眼睛图片替换问题
493浏览 • 1回复 待解决
获取文本Text组件的宽度
484浏览 • 1回复 待解决
HarmonyOS Text组件默认基线是如何计算的
479浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何确保Text组件中的文本在鸿蒙开发中适应不同的屏幕大小?
29浏览 • 1回复 待解决
HarmonyOS 图片过长时怎样使用Image组件在加载图片时从指定位置加载指定大小来显示
37浏览 • 1回复 待解决
HarmonyOS Text组件设置行间距吗?
582浏览 • 0回复 待解决
HarmonyOS Text组件是否有最大宽度属性?
305浏览 • 1回复 待解决
如何在Text组件关闭bindSelection自定义菜单时,取消选中状态
426浏览 • 1回复 待解决
Text 组件如何加载Unicode字符
1769浏览 • 1回复 待解决
Text组件布局过界问题
1101浏览 • 1回复 待解决
目前有两种方案可以防止Text组件过长时,将右边的组件顶出屏幕:
方案一:
核心思想是动态添加layoutWeight属性,获取屏幕宽度,并在Text组件达到一定长度时赋值layoutWeight属性。
方案二:
给Text组件设置constraintSize属性maxWidth,具体约束的最大宽度按照场景需要设置。