Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Twitter Demo App

 import QtQuick 2.3
 import QtQuick.Layouts 1.1

 import Felgo 3.0

 Item {
   id: cell

   property var item: modelData

   property string icon: item && item.icon || ""
   property string name: item && item.name || ""
   property string handle: item && item.handle || ""
   property string time: item && item.time || ""
   property string text: item && item.text || ""
   property string image: item && item.image || ""

   property bool actionsHidden: item && item.actionsHidden || false

   property int favs: item && item.favorite_count || 0
   property int retweets: item && item.retweet_count || 0

   property bool isFaved: item && item.favorited || false
   property bool isRetweeted: item && item.retweeted || false
   // Temp, should be in theme!
   property color favColor: "#ffac33"
   property color retweetColor: "#77b255"
   property color inactiveColor: "#ccc"

   width: parent ? parent.width : 0
   // minimum of 48dp for interactable items recommended
   height: Math.max(dp(48), innerGrid.height)

   signal selected(int index)
   signal profileSelected(int index)

   Rectangle {
     color: cellArea.pressed ? "#eee" : "#fff"
     anchors.fill: parent

     Behavior on color {
       ColorAnimation { duration: 150; easing.type: Easing.InOutQuad }
     }
   }

   MouseArea {
     id: cellArea

     enabled: cell.enabled
     anchors.fill: parent

     onClicked: selected(typeof index !== "undefined" ? index : 0)
   }

   // Main cell content inside this item
   GridLayout {
     id: innerGrid

     // Auto-break after 4 columns, so we do not have to set row & column manually
     columns: 4
     rowSpacing: dp(4)
     columnSpacing: dp(8)

     x: dp(10)
     width: parent.width - 2 * x

     // Top spacer
     Item {
       id: topSpacer
       width: parent.width
       height: dp(6)

       Layout.columnSpan: parent.columns
       Layout.fillWidth: true
     }

     RoundedImage {
       id: avatarImage

       img.source: cell.icon
       img.defaultSource: "../../assets/user_default.png"

       Layout.preferredWidth: dp(50)
       Layout.preferredHeight: dp(50)
       Layout.rowSpan: image.visible ? 4 : 3
       Layout.alignment: Qt.AlignTop

       MouseArea {
         anchors.fill: parent
         onClicked: profileSelected(index || 0)
       }
     }

     Text {
       id: nameText
       elide: Text.ElideRight
       maximumLineCount: 1
       color: Theme.textColor
       font.family: Theme.normalFont.name
       font.bold: true
       font.pixelSize: dp(14)
       lineHeight: dp(16)
       lineHeightMode: Text.FixedHeight
       text: cell.name
     }

     Text {
       id: handleText
       elide: Text.ElideRight
       maximumLineCount: 1
       color: Theme.secondaryTextColor
       font.family: Theme.normalFont.name
       font.pixelSize: dp(12)
       lineHeight: dp(16)
       lineHeightMode: Text.FixedHeight
       text: cell.handle
       Layout.fillWidth: true
       verticalAlignment: Text.AlignBottom
       Layout.preferredWidth: parent.width
     }

     Text {
       id: timeText
       elide: Text.ElideRight
       maximumLineCount: 1
       color: Theme.secondaryTextColor
       font.family: Theme.normalFont.name
       font.pixelSize: dp(12)
       lineHeight: dp(16)
       lineHeightMode: Text.FixedHeight
       verticalAlignment: Text.AlignBottom
       text: cell.time
       Layout.alignment: Qt.AlignRight
     }

     Text {
       id: contentText
       color: Theme.textColor
       linkColor: Theme.tintColor
       font.family: Theme.normalFont.name
       font.pixelSize: dp(14)
       lineHeight: 1.15
       text: cell.text
       wrapMode: Text.WordWrap
       Layout.columnSpan: 3
       Layout.fillWidth: true
       Layout.fillHeight: true
       Layout.alignment: Qt.AlignTop

       onLinkActivated: {
         Qt.openUrlExternally(link)
       }
     }

     RoundedImage {
       id: image

       fillMode: Image.PreserveAspectCrop
       visible: cell.image.length > 0 && !img.error

       source: cell.image

       Layout.columnSpan: 3
       Layout.fillWidth: true
       Layout.preferredWidth: contentText.width
       Layout.preferredHeight: dp(320)
       Layout.maximumWidth: contentText.width
       Layout.maximumHeight: dp(160)

       MouseArea {
         anchors.fill: parent

         onClicked: {
           PictureViewer.show(app, image.source)
         }
       }
     }

     // actions
     Row {
       visible: !actionsHidden

       spacing: dp(4)

       Layout.columnSpan: 3
       Layout.fillWidth: true
       Layout.preferredWidth: parent.width
       Layout.preferredHeight: replyIcon.height + dp(4)
       Layout.alignment: Qt.AlignBottom

       Icon {
         id: replyIcon
         icon: IconType.reply
         color: inactiveColor
       }

       Item {
         width: dp(28)
         height: 1
       }

       Icon {
         icon: IconType.retweet
         color: isRetweeted ? retweetColor : inactiveColor
       }

       Text {
         text: retweets
         visible: retweets > 0
         color: isRetweeted ? retweetColor : inactiveColor
         font.pixelSize: sp(13)
       }

       Item {
         width: dp(28)
         height: 1
       }

       Icon {
         icon: IconType.star
         color: isFaved ? favColor : inactiveColor
       }

       Text {
         text: favs
         visible: favs > 0
         color: isFaved ? favColor : inactiveColor
         font.pixelSize: sp(13)
       }
     }

     Item {
       id: bottomSpacer

       width: parent.width
       height: dp(6)

       Layout.columnSpan: parent.columns
       Layout.fillWidth: true
     }
   }

   // Bottom cell divider
   Rectangle {
     id: divider
     width: parent.width
     color: Theme.dividerColor
     height: px(1)