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!

Qt World Summit Conference App

 import Felgo 3.0
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
 import "../common"

 Item {
   id: scheduleListItem
   width: parent ? parent.width : 0
   height: gridWrapper.height + 2 * gridWrapper.y

   property var item: [] // talk data item

   readonly property bool loading: speakerImg.loading

   property StyleSimpleRow style: StyleSimpleRow { }

   property ListView parentView

   signal selected(int index)

   // default hover effect
   Rectangle {
     color: cellArea.pressed && !Theme.isAndroid ? scheduleListItem.style.selectedBackgroundColor : scheduleListItem.style.backgroundColor
     anchors.fill: parent

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

   RippleMouseArea {
     id: cellArea
     enabled: scheduleListItem.enabled
     anchors.fill: parent
     circularBackground: false
     clip: true

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

     // use selected background color of the style for the ripple background
     backgroundColor: setAlpha(scheduleListItem.style.selectedBackgroundColor, 0.5)
     fillColor: setAlpha(scheduleListItem.style.selectedBackgroundColor, 0.5)

     function setAlpha(color, alpha) {
       return Qt.rgba(color.r,color.g,color.b, alpha)
     }
   }

   // track indicators
   Column {
     id: trackCol
     x: dp(2)
     width: dp(4)
     height: parent.height - 6 * x
     spacing: x
     anchors.verticalCenter: parent.verticalCenter

     Repeater {
       id: repeater
       model: item.tracks
       Rectangle {
         id: trackIndicator
         width: parent.width
         height: ((parent.height - (trackCol.spacing * (repeater.count - 1))) / repeater.count)
         color: modelData.color//loaderItem.getTrackColor(modelData.color)
       }
     }
   }

   // wrapper for grid to center it vertically
   Item {
     id: gridWrapper
     y: Math.max(0, (dp(scheduleListItem.style.minimumHeight) - innerGrid.height)) * 0.5
     width: parent.width
     height: innerGrid.height

     // Main cell content inside this item
     GridLayout {
       id: innerGrid
       property real trackIndent: trackCol.width + trackCol.x // additional indent for track rectangles

       // Auto-break after 3 columns, so we do not have to set row & column manually
       columns: 4
       rowSpacing: dp(5)
       columnSpacing: dp(scheduleListItem.style.indent)
       x: trackIndent + dp(scheduleListItem.style.indent) * 0.75
       width: parent.width - x - dp(scheduleListItem.style.indent)
       Layout.minimumWidth: parent.width - x - dp(scheduleListItem.style.indent)
       Layout.maximumWidth: parent.width - x - dp(scheduleListItem.style.indent)

       // Top spacer
       Item {
         id: topSpacer
         Layout.preferredWidth: parent.width
         Layout.preferredHeight: dp(scheduleListItem.style.spacing) - parent.rowSpacing
         Layout.minimumHeight: 0
         Layout.fillWidth: true
         Layout.columnSpan: 4
       }

       // speaker image (overlay on top of SimpleRow)
       SpeakerImage {
         id: speakerImg
         Layout.preferredWidth: height
         Layout.preferredHeight: dp(scheduleListItem.style.fontSizeText) * 2.5
         Layout.alignment: Qt.AlignCenter
         Layout.rowSpan: 2

         property var speakerId: item.persons && item.persons.length > 0 ? item.persons[0]["id"] : undefined
         source: speakerId !== undefined && dataModel.speakers && dataModel.speakers[speakerId] ? dataModel.speakers[speakerId].avatar : ""

       } // SpeakerImage

       // title text
       Item {
         // wrapper item for text handles available space in layout
         visible: textLabel.text.length > 0
         Layout.columnSpan: 2
         Layout.preferredWidth: parent.width - 2 * parent.columnSpacing - speakerImg.width - favoriteIcon.width
         Layout.fillWidth: true
         Layout.preferredHeight: textLabel.height
         Layout.alignment: Qt.AlignVCenter

         // actual text item
         Text {
           id: textLabel
           elide: Text.ElideRight
           maximumLineCount: 2
           wrapMode: Text.WordWrap
           color: scheduleListItem.style.textColor
           font.family: Theme.normalFont.name
           font.pixelSize: sp(scheduleListItem.style.fontSizeText)
           text: item && item.title || ""

           // calculate additional margin needed to align with title in navigation bar
           property real titleAlignmentMargin:
               dp(Theme.navigationBar.titleLeftMargin + Theme.navigationBar.defaultIconSize + Theme.navigationBar.defaultBarItemPadding)
               - parent.x + dp(5)

           // add x offset margin to align with navigation bar title text
           x: Theme.navigationBar.titleAlignLeft && titleAlignmentMargin > 0 ? titleAlignmentMargin : 0
           width: parent.width - x
           anchors.verticalCenter: parent.verticalCenter
         }
       }

       // favorite icon
       Icon {
         id: favoriteIcon
         Layout.preferredWidth: implicitWidth
         Layout.preferredHeight: implicitHeight
         size: dp(20)
         Layout.alignment: Qt.AlignCenter
         icon: isFavorite ? IconType.star : IconType.staro
         color: isFavorite || favoriteArea.pressed ? Theme.tintColor : Theme.secondaryTextColor

         property bool isFavorite: item && item.id ? dataModel.isFavorite(item.id) : false
         property bool updateWhenVisible: false

         // update UI when favorites change while visible
         Connections {
           target: dataModel
           onFavoritesChanged: {
             if(visible)
               favoriteIcon.isFavorite = item && item.id ? dataModel.isFavorite(item.id) : false
             else
               favoriteIcon.updateWhenVisible = true
           }
         }

         // update UI when favorites changed while invisible
         onVisibleChanged: {
           if(visible && updateWhenVisible) {
             favoriteIcon.isFavorite = item && item.id ? dataModel.isFavorite(item.id) : false
             updateWhenVisible = false
           }
         }

         // add/remove from favorites
         RippleMouseArea {
           id: favoriteArea
           width: parent.width * 3
           height: parent.height * 3
           fixedPosition: true
           touchPoint: Qt.point(width * 0.5, height * 0.5)
           anchors.centerIn: parent
           onClicked: scheduleListItem.toggleFavorite()
         }
       }

       // time
       Item {
         visible: detailTextLabel.text.length > 0
         Layout.preferredWidth: parent.width - 2 * parent.columnSpacing - speakerImg.width - roomTxt.width
         Layout.fillWidth: true
         Layout.columnSpan: 1
         Layout.preferredHeight: detailTextLabel.height

         AppText {
           id: detailTextLabel
           color: scheduleListItem.style.detailTextColor
           font.family: Theme.normalFont.name
           font.pixelSize: sp(scheduleListItem.style.fontSizeDetailText)
           maximumLineCount: 1
           text: item.start+" - "+item.end

           x: textLabel.x
           //width: parent.width - x
           anchors.verticalCenter: parent.verticalCenter
         }

         // room
         AppText {
           id: companyTxt
           anchors.left: detailTextLabel.right
           leftPadding: dp(10)
           property var speakerId: item.persons && item.persons.length > 0 ? item.persons[0]["id"] : undefined
           text: speakerId !== undefined && dataModel.speakers && dataModel.speakers[speakerId] ? dataModel.speakers[speakerId].title : ""
           font.pixelSize: sp(scheduleListItem.style.fontSizeDetailText)
           wrapMode: Text.NoWrap
           maximumLineCount: 1
           elide: Text.ElideRight
           color: scheduleListItem.style.detailTextColor
           width: parent.width - detailTextLabel.width - detailTextLabel.x - dp(15) - leftPadding
 //          anchors.verticalCenter: parent.verticalCenter
         }
       }

       // room
       AppText {
         id: roomTxt
         Layout.minimumWidth: implicitWidth
         Layout.preferredHeight: implicitHeight
         Layout.columnSpan: 2
         text: item.room && item.room !== "Qt World Summit 2019" ? item.room : ""
         font.pixelSize: sp(scheduleListItem.style.fontSizeDetailText)
         font.italic: true
         wrapMode: Text.NoWrap
         color: scheduleListItem.style.detailTextColor
       }

       Item {
         id: bottomSpacer
         Layout.preferredWidth: parent.width
         Layout.preferredHeight: dp(scheduleListItem.style.spacing) - parent.rowSpacing + divider.height
         Layout.minimumHeight: divider.height
         Layout.columnSpan: 4
         Layout.fillWidth: true
       }
     } // grid layout

   }

   // Bottom cell divider
   Rectangle {
     id: divider

     property real leftSpacing: speakerImg.width + dp(scheduleListItem.style.dividerLeftSpacing)

     x: (scheduleListItem.style.dividerLeftSpacing > 0) ? leftSpacing + dp(scheduleListItem.style.dividerLeftSpacing) : 0
     width: parent.width - x
     color: cellArea.pressed && Theme.isIos ? scheduleListItem.style.selectedBackgroundColor : scheduleListItem.style.dividerColor
     height: px(scheduleListItem.style.dividerHeight)
     anchors.bottom: parent.bottom
   }

   // add or remove item from favorites
   function toggleFavorite() {