鸿蒙Next Text内容超出父容器?
2025-06-27 22:42:48
105次阅读
0个评论
当我们在布局中使用Text展示文本内容时,如果父布局是固定宽高,当Text展示的内容过长并且没有限制时,会超出父容器,这点和安卓中是不一样的,安卓中会自动截取超出部分。 因此我们在开发过程中,如果Text内容长度不固定,我们要提前设置好边界,以防内容超出。 以下是展示及解决办法:
@Entry
@Component
struct test{
build() {
Column({space:10}){
Row(){
Column(){
Text('HarmonyOS开发者笔记')
Row(){
Text('有一部分超出去父容器了,但是被下面的挡住了')
}.width('100%').height('100%').backgroundColor(Color.Blue)
}.height('100%').width(100).backgroundColor(Color.Grey)
Row(){
Text('关注')
Text('HarmonyOS开发者笔记?????????????超出了')
}.width('100%').height('100%').backgroundColor(Color.Yellow)
.justifyContent(FlexAlign.SpaceBetween)
}.width('100%').height(100)
Row(){
Column(){
Text('HarmonyOS开发者笔记')
Row(){}.width('100%').layoutWeight(1).backgroundColor(Color.Pink)
}.height('100%').width(100).backgroundColor(Color.Green)
Row(){
Text('充满dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd下边又超出去了?').width('70%')
Text('HarmonyOS开发者笔记又被挡住了??????????????????')
}.layoutWeight(1).height('100%').backgroundColor(Color.Yellow)
.justifyContent(FlexAlign.SpaceBetween)
}.width('100%').height(100)
Row(){
Text('HarmonyOS开发者笔记HarmonyOS开发者笔记HarmonyOS开发者笔记')
.width(50).height(100)
Text('关注1关注2关注3关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注')
.width(50).maxLines(4)
}.width(300).height(100).backgroundColor(Color.Orange).justifyContent(FlexAlign.SpaceBetween)
}
}
}
总结: 1.Text父容器在Column/Row内时,如果想充满剩余空间要使用layoutWeight(1),设置width('100%') 有可能超出父容器,这样Text也有可能超出布局 2.当Text父容器宽高正常显示时,如果Text内容长度不能确定,我们需要指定Text的宽和最大行数这两个参数,这样就可以避免内容超出父容器了
00
- 0回答
- 0粉丝
- 0关注
相关话题
- 46. [HarmonyOS NEXT RelativeContainer案例三] 打造自适应容器:内容驱动的智能尺寸调整技术
- 如何解决Text组件文本为内容中文、数字、英文混合时显示省略号截断异常
- HarmonyOS NEXT父组件如何调用子组件的方法?
- 鸿蒙Next Text长文本实现展开收起2种模式
- 鸿蒙开发:父组件如何调用子组件中的方法?
- 截断文件内容
- harmony OS NEXT-Refresh 容器组件
- 基础控件(Text基础配置)
- 逐行读取文件文本内容
- 实现文件内容数据同步
- HarmonyOS如何实现Text根据对应的字符串改变Text中字符指定颜色?
- Android 仿 DeepSeek 思考效果:逐字显示 AI 生成内容,支持加粗、颜色,复制内容
- 鸿蒙元服务项目实战:备忘录内容编辑开发
- (七七)ArkCompiler 与容器技术的融合:容器化应用编译优化及 HarmonyOS 实践
- 06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南