#ifndef TEXTBALLOON_H#define TEXTBALLOON_H#include <QtQuick>class TextBalloon : public QQuickPaintedItem{Q_OBJECTQ_PROPERTY(bool rightAligned READ isRightAligned WRITE setRightAligned NOTIFY rightAlignedChanged)public:TextBalloon(QQuickItem *parent = 0);void paint(QPainter *painter);bool isRightAligned();void setRightAligned(bool rightAligned);private:bool rightAligned;signals:void rightAlignedChanged();};#endif
textballoon.cpp
#include "textballoon.h"TextBalloon::TextBalloon(QQuickItem *parent): QQuickPaintedItem(parent), rightAligned(false){}void TextBalloon::paint(QPainter *painter){QBrush brush(QColor("#007430"));QBrush white(QColor("#FFFFFF"));if (rightAligned){painter->setBrush(brush);painter->setPen(Qt::NoPen);painter->setRenderHint(QPainter::Antialiasing);painter->drawRoundedRect(10, 0, boundingRect().width() – 19, boundingRect().height(), 10, 10);const QPointF points[3] = {QPointF(boundingRect().width() – 10.0, 10.0),QPointF(boundingRect().width(), 20.0),QPointF(boundingRect().width() – 10.0, 30.0),};painter->drawConvexPolygon(points, 3);}else{painter->setBrush(white);painter->setPen(Qt::NoPen);painter->setRenderHint(QPainter::Antialiasing);painter->drawRoundedRect(10, 0, boundingRect().width() – 19, boundingRect().height(), 10, 10);const QPointF points[3] = {QPointF(10,10),QPointF(0, 20),QPointF(10, 30),};painter->drawConvexPolygon(points, 3);}}bool TextBalloon::isRightAligned(){return this->rightAligned;}void TextBalloon::setRightAligned(bool rightAligned){this->rightAligned = rightAligned;}
在main.cpp中，注册该类：
qmlRegisterType<TextBalloon>("TextBalloon", 1, 0, "TextBalloon");这样这个TextBalloon就可以在QML中被利用。我们的QML界面非常简单：
import QtQuick 2.0import Ubuntu.Components 1.1Item {id: rootproperty int contentWidth: width *.6ListModel {id: balloonModel}ListView {id: balloonViewanchors.bottom: controls.topanchors.bottomMargin: 2anchors.top: parent.topclip:truedelegate: MyDelegate {}model: balloonModelspacing: units.gu(4)width: parent.width}Rectangle {id: controlsanchors.bottom: parent.bottomanchors.left: parent.leftanchors.margins: 1anchors.right: parent.rightborder.width: 2color: "white"height: parent.height * 0.15Text {anchors.centerIn: parenttext: "Add another balloon"}MouseArea {anchors.fill: parenthoverEnabled: trueonClicked: {balloonModel.append({"balloonWidth": Math.floor(Math.random() * 200 + 100),"content": "this is cool"})balloonView.positionViewAtIndex(balloonView.count -1, ListView.End)}onEntered: {parent.color = "#8ac953"}onExited: {parent.color = "white"}}}Component.onCompleted: {console.log("contentWidth: " + root.contentWidth);balloonModel.append({"balloonWidth": root.contentWidth,"content": "this is a text, this is a perfect world to play with, and I love to play the world"});balloonModel.append({"balloonWidth": root.contentWidth,"content": "this is a text, this is a perfect world to play with, and I love to play the world"});}}上面是一个ListView，，下面是一个按钮来动态生成一些ListView中的项。我们的ListView的delegate设计稍微麻烦一点：
import QtQuick 2.0import TextBalloon 1.0import Ubuntu.Components 1.1import QtQuick.Layouts 1.1Item {id: delegatewidth: ListView.view.widthheight: txt.contentHeight + 20property bool rightAligned: index % 2 == 0 ? false : trueRowLayout {spacing: units.gu(2)anchors.right: index % 2 == 0 ? undefined : parent.rightImage {id: leftImgwidth: root.contentWidth*.2height: widthanchors.top:parent.topsource: "images/pic1.jpg"visible: delegate.rightAligned ? false : truefillMode: Image.PreserveAspectCropLayout.maximumWidth:root.contentWidth*.2Layout.maximumHeight: root.contentWidth*.2}Text {id: txtanchors.top: parent.topanchors.topMargin: units.gu(1)width: root.contentWidthwrapMode: Text.WordWraptext: content//horizontalAlignment: delegate.rightAligned ? Text.AlignRight : Text.AlignLeftfont.pixelSize: units.gu(3)Layout.maximumWidth: root.contentWidthTextBalloon {anchors.fill: parentz: -1rightAligned: delegate.rightAlignedanchors.margins: -units.gu(1.5)}}Image {id: rightImganchors.top:parent.topwidth: root.contentWidth*.2height: widthsource: "images/pic2.jpg"visible: delegate.rightAligned ? true : falsefillMode: Image.PreserveAspectCropLayout.maximumWidth:root.contentWidth*.2Layout.maximumHeight: root.contentWidth*.2}}}这里我们使用RowLayout，也是非常tricky的一个设计。运行我们的应用：
整个项目的源码在： git clonehttps://gitcafe.com/ubuntu/weixin_new.git
每年的情人节圣诞节除夕，也和他共度。甚至连吵架也是重复的，
