HarmonyOS鸿蒙Next中Flex交叉轴设置alignItems属性为ItemAlign.Stretch后,Text的内容无法展示完整
HarmonyOS鸿蒙Next中Flex交叉轴设置alignItems属性为ItemAlign.Stretch后,Text的内容无法展示完整
由于需要展示的内容很长,默认情况下Text只展示3行,点击可展开,可展示200行。由于左侧的线的高度需要和右侧的Text的展开收起保持相同,所以在他们的父组件Flex设置了交叉轴alignItems属性为ItemAlign.Stretch。但是当Text展开后,却无法完整展示所有内容。若不设置交叉轴alignItems属性为ItemAlign.Stretch,Text展开后则能完全展示所有内容。
直接上代码:
@Entry
@Component
struct StretchTest {
@State content: string = '【财联社11月13日早间新闻精选】\n1、外交部发言人华春莹11月10日宣布,应美国总统拜登邀请,国家XXXXX将于11月14日至17日赴美国旧金山举行中美元首会晤,同时应邀出席亚太经合组织第三十次领导人非正式会议。\n2、国务院副总理何立峰于11月8日至12日应邀访美,其间与美财长耶伦举行数次会谈。双方达成如下重要共识:同意加强沟通,寻求共识,管控分歧,避免误解意外导致摩擦升级;强调中美不寻求经济“脱钩”,欢迎发展健康的经济关系;同意一道努力应对共同挑战,包括经济增长、金融稳定和监管。\n3、财政部副部长廖岷当地时间10日在美国旧金山就记者提出的“中美经贸关系是否出现拐点?”问题进行回应。廖岷表示,中美经济关系根植于中美经济领域的共同利益,客观上造福两国和两国人民。中美之间的互利合作动力强劲、基础雄厚、空间广阔,但前提是平等和相互尊重。双方的正当关切应得到妥善回应,只有如此,中美经贸关系才能真正行稳致远。\n4、沪深交易所近日针对转融通问题修订了一系列交易业务、自律监管指南。其中,对上市公司持股5%以上股东,因转融通出借导致持股低于5%的,仍按归并计算后的持股比例予以相应规则约束,即不得违规减持、不得进行以该上市公司股票为标的证券的融资融券交易。\n5、11月10日至11日,金融监管总局召开学习贯彻中央金融工作会议精神专题研讨班暨监管工作座谈会,会议强调,积极配合化解地方债务风险,促进金融与房地产良性循环。\n6、住建部部长倪虹近日在接受采访时表示,要解决好群众的住房问题,尤其是新市民、青年人的住房问题,让他们放开手脚为美好生活去奋斗。\n7、证监会就《首发企业现场检查规定(修订草案征求意见稿)》公开征求意见。内容包括强化“申报即担责”、规范检查操作等。\n8、山东省济南市中级人民法院公开宣判中信银行原行长孙德顺受贿一案,以受贿罪判处被告人孙德顺X刑,缓期二年执行,并处没收个人全部财产。经审理查明:2003年至2019年,被告人孙德顺先后利用职务上的便利,为有关企业在获取贷款等事项上提供帮助,非法收受财物折合人民币9.795亿余元。\n9、中国银河证券原党委书记、董事长陈共炎涉嫌严重违纪违法,目前正接受中央纪委国家监委驻中国投资有限责任公司纪检监察组纪律审查和山东省威海市监察委员会监察调查。\n10、日前,中国证监会党委巡视工作领导小组办公室原专职副主任杨春蕾因严重违纪违法问题被立案审查调查。经北京市监委研究,决定将杨春蕾涉嫌受贿犯罪问题移送检察机关审查起诉,所涉财物一并移送。\n11、据媒体近日报道称,Meta已与腾讯达成初步协议,后者将于2024年底开始代理销售Meta平价版的VR头显设备。其中,Meta将占据设备销售收入的大头,腾讯的收益更多来自内容和服务。\n12、据媒体报道,晶圆代工成熟制程厂商联电、世界先进及力积电等为抢救产能利用率,大砍明年首季报价,幅度达二位数百分比,专案客户降幅更高达15%至20%,借此“以价换量”。\n13、据蓝鲸记者获悉,阿里云云产品控制台访问及API调用12日出现异常,目前阿里工程师通过分批重启组件服务,大部分地域控制台服务已恢复访问。\n14、民政部近日发布《2023年3季度民政统计数据》,今年前三季度,全国办理结婚登记为569.0万对,办理离婚登记197.3万对。2022年前三季度,全国共办理结婚登记544.5万对,办理离婚登记164.3万对。\n15、“中吴网”微信公众号12日晚间发布情况通报称,据悉,近日网传常州市华立液压润滑设备有限公司法定代表人因被约谈后坠楼身亡,常州市委市政府高度重视,正在组织有关部门依法开展调查,纪检监察机关正在深入核查相关案件办理情况,坚持实事求是、依规依纪依法的原则认真处置。\n16、针对原合盛硅业总经理方红承妻子孙丽辰实名举报合盛硅业董事长罗立国一事,合盛硅业董秘张雅聪12日中午回应蓝鲸记者表示,“我不清楚这个事情。”12日,孙丽辰在网上实名举报罗立国在股权官司败诉后,以变更公司住所、搬离嘉兴要挟有关部门导致方红承、方红兴被关押至今。\n17、正元智慧公告,公司实控人、董事等涉嫌操纵证券、期货市场罪。\n18、七连板天威视讯公告,公司目前建成的数据中心尚未正式投产。\n19、中恒电气公告,实控人朱国锭因涉嫌操纵证券、期货市场被公安机关采取监视居住措施。\n20、中国银河发布澄清公告,不存在公司将与中金公司进行合并重组的筹划或其他应披露事项。\n21、美股三大指数上周五集体收涨。纳指涨2.05%,创9月15日以来收盘新高,上周累涨2.37%;标普500指数涨1.56%,创9月20日以来收盘新高,上周累涨1.31%;道指涨1.15%,创9月21日以来收盘新高,上周累涨0.65%。\n22、国际评级机构穆迪确认美国AAA评级,但将美国的评级展望从稳定下调至负面。(蓝鲸编辑 华安)'
maxLine: number = 3
build() {
Scroll() {
Flex({ alignItems: ItemAlign.Stretch }) {
this.CircleLine()
Flex({ direction: FlexDirection.Column }) {
Row() {
Text('12:57')
.fontSize('12fp')
.fontColor(Color.Black)
.textAlign(TextAlign.Start)
.alignSelf(ItemAlign.Center)
Blank()
Row() {
Text('分享')
.fontSize('12fp')
.fontColor(Color.Black)
.alignSelf(ItemAlign.Center)
.margin({ right: 7 })
}
}
.width('100%')
.height(17)
Text(this.content.replace(/\s/g, ''))
.fontSize('15fp')
.fontColor(Color.Black)
.lineHeight(25)
.alignSelf(ItemAlign.Start)
.maxLines(this.maxLine)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ top: 5 })
.onClick(() => {
if (this.maxLine == 3) {
this.maxLine = 200
} else {
this.maxLine = 3
}
})
}
.flexGrow(1)
.padding({ bottom: 20 })
}
.width('100%')
.padding({ left: 12, right: 12, top: 10 })
}
}
@Builder
CircleLine() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
Stack() {
Circle({ width: 17, height: 17 })
.colorBlend(Color.White)
Circle({ width: 7, height: 7 })
.colorBlend(Color.Red)
}
.width(17)
.height(17)
Line()
.width(1)
.backgroundColor(Color.Gray)
.flexGrow(1)
}
.margin({ right: 12.5 })
}
}
图一,未展开状态
图二,设置了交叉轴alignItems属性为ItemAlign.Stretch的展开状态,无法展示完所有内容
图三,未设置交叉轴alignItems属性为ItemAlign.Stretch的展开状态,能展示完所有内容,但是会导致左侧无法显示出那条灰色的线
更多关于HarmonyOS鸿蒙Next中Flex交叉轴设置alignItems属性为ItemAlign.Stretch后,Text的内容无法展示完整的实战教程也可以访问 https://www.itying.com/category-93-b0.html
确实有这个问题,maxLines达到某个值就不生效了,要不在联盟提个单解决吧
更多关于HarmonyOS鸿蒙Next中Flex交叉轴设置alignItems属性为ItemAlign.Stretch后,Text的内容无法展示完整的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
已解决,方法如下:
在HarmonyOS鸿蒙Next中,Flex
布局的alignItems
属性设置为ItemAlign.Stretch
时,Text
组件的内容可能无法完整展示。这是因为Stretch
会拉伸子组件以填满交叉轴空间,可能导致Text
的高度超出预期。解决方法包括:
- 设置固定高度:为
Text
组件明确设置高度,确保内容不被拉伸。 - 使用
flexShrink
:为Text
组件设置flexShrink(1)
,使其在空间不足时自动收缩。 - 调整
Flex
布局:通过justifyContent
或alignContent
属性调整布局,避免内容被挤压。
根据具体需求选择合适的解决方案,确保内容正常显示。