QML仿微信聊天界面-消息气泡自适应
实现消息气泡自适应变换:
中英文混合自适应;
自动换行自适应;
单行文本:
多行文本
改变宽度文本自动调整
实现方案:
Rectangle{
id:bodyleft
height:ctxLH*(tt.lineCount-1)+35
implicitWidth:Math.min(fitWidth(tt.text),root.width*0.6)
anchors.left: imgl1.right
color:"white"
radius:5
Item{
anchors.margins: 10
anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
Text{
id:tt
anchors.fill: parent
text:label
wrapMode: fitWidth(tt.text)>root.width*0.6?Text.WrapAnywhere:Text.NoWrap
}
}
}
主要实现代码:
气泡宽度:取最小
implicitWidth:Math.min(fitWidth(tt.text),root.width*0.6) //Rectangle
搭配文本换行策略
fitWidth(tt.text)>root.width*0.6?Text.WrapAnywhere:Text.NoWrap //Text
气泡高度:取最大
height:Math.max(img.height,bodyleft.height)
获取内容宽度:
function fitWidth(text){
return fontMetrics.advanceWidth(text);
}