dorado 圆形/环形文字居中_dorado 列表内容剧中显示-优快云博客

本文链接：https://blog.youkuaiyun.com/puspos/article/details/109735431

本文介绍了如何在 Dorado 框架中实现圆形和环形的文字居中显示，包括单行和双行文本的处理。通过使用布局管理器的 align 和 pack 属性，可以有效地调整子元素的排列方式，确保文字在图形区域内居中对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

圆形文字居中
环形文字居中
圆形两行文字居中
环形两行文字居中
使用布局的align和pack

圆形文字居中

在这里插入图片描述

view.get("label").set({
	width:"80px",
	height:"80px",
	style:{
		background:"red",
		borderRadius:"50%",//圆形
		lineHeight:"80px",//行高和高度一样，可使得该行文字居中
		textAlign:"center",
	},
	text:"哈哈",
});

环形文字居中

view.get("label").set({
	width:"100px",
	height:"100px",
	style:{
		background:"red",
		borderRadius:"50%",//圆形
		//此时label的可用范围100-20=80直径的圆
		lineHeight:"80px",//行高和高度一样，可使得该行文字居中
		textAlign:"center",
		
		border:"10px blue solid",//环形
	},
	text:"哈哈",
});

圆形两行文字居中

在这里插入图片描述

self.set({
	width:"100px",
	height:"100px",
	style:{
		borderRadius:"50%",
		background:"red",
	}
});
view.get("#labela").set({
	style:{
		textAlign:"center",
	},
	text:"aaa",
});
view.get("#labelb").set({
	style:{
		textAlign:"center",
	},
	text:"bbb",
});

环形两行文字居中

在这里插入图片描述
比较麻烦，暂无头绪

Container[hbox].set({
	width:"200px",
	height:"200px",
}
Container[vbox].set(
{
	//pack="center"
	style:{
		width:"100px",
		height:"100px",
	},
	
	
});
view.get("#labela").set({
	style:{
		textAlign:"center",
	}
});
view.get("#labelb").set({
	style:{
		textAlign:"center",
	}
});