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!

Forums

OverviewFelgo 2 Support (Qt 5) › In basic messaging tutorial, entered message text color matches background color

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #23824

    Luna

    Create a single-page application.

    Delete contents of Main.qml and replace with:

    import Felgo 3.0
    import QtQuick 2.0
    
    App {
      Navigation {
          NavigationItem {
              title: qsTr("Recent")
              icon: IconType.clocko
    
              NavigationStack {
                  ListPage {
                      title: qsTr("Recent")
                      emptyText.text: qsTr("No conversations yet!")
                      model: [
                          { text: "Tom McEloy", detailText: "Sorry for the late reply ...", image: Qt.resolvedUrl("../assets/portrait0.jpg") },
                          { text: "Leah Douglas", detailText: "Hahaha :D", image: Qt.resolvedUrl("../assets/portrait1.jpg") }
                      ]
                      delegate: SimpleRow {
                          image.radius: image.height
                          image.fillMode: Image.PreserveAspectCrop
                          autoSizeImage: true
                          style.showDisclosure: false
                          imageMaxSize: dp(48)
                          detailTextItem.maximumLineCount: 1
                          detailTextItem.elide: Text.ElideRight
                          onSelected: {
                              navigationStack.popAllExceptFirstAndPush(conversationComponent,
                                                                       { title: item.text })
                          }
                      }
                    }
                }
            }
        }
      Component {
          id: conversationComponent
          ListPage {
                id: conversationPage
                emptyText.text: qsTr("No messages")
                model: [
                  { text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.", me: false },
                  { text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.", me: true },
                  { text: "All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words.", me: false },
                  { text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.", me: false },
                  { text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.", me: true },
                  { text: "All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words.", me: false }
                ]
                delegate: Item {
                  id: bubble
    
                  property real spacing: dp(Theme.contentPadding)
    
                  width: conversationPage.width
                  height: bubbleBackground.height + 2*spacing
    
                  Rectangle {
                    id: bubbleBackground
                    color: modelData.me ? Theme.tintColor : "#e9e9e9"
                    radius: bubble.spacing
                    x: modelData.me ? (bubble.width - width - bubble.spacing) : bubble.spacing
                    y: bubble.spacing
                    width: innerText.width + 2 * bubble.spacing
                    height: innerText.implicitHeight + 2* bubble.spacing
                  }
    
                  AppText {
                      id: innerText
                      x: bubble.spacing
                      y: bubble.spacing
                      width: Math.min(innerText.implicitWidth, bubble.parent.width * 0.75)
                      wrapMode: Text.WordWrap
                      text: modelData.text
                      color: modelData.me ? "white" : "black"
                  }
              }
                listView.anchors.bottomMargin: inputBox.height
                // horizontal separator line between input text and ...
                Rectangle {
                    height: px(1)
                    anchors.bottom: inputBox.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    color: "#cccccc"
                }
                AppTextField {
                    id: inputBox
                    height: dp(48)
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.leftMargin: Theme.contentPadding
                    anchors.rightMargin: Theme.contentPadding
                    font.pixelSize: sp(16)
                    placeholderText: qsTr("Type a message ...")
                    backgroundColor: "white"
                    verticalAlignment: Text.AlignVCenter
    
                    onAccepted: {
                        // Here we update the model
                        var model = conversationPage.model
                        model.push({me: true, text: inputBox.text})
                        conversationPage.model = model
                        inputBox.text = ""
                        conversationPage.listView.positionViewAtEnd()
                    }
                }
            }
        }
    }
    

     

    Now try running the app and entering text into a conversation’s text entry field.  Hit enter to send the message.  The length of the message is correct, however, the text is not visible so I’m assuming there’s something wrong with the text color (i.e. it matches the background or is transparent).

     

     

    #23825

    Luna
    x: modelData.me ? (bubble.width - width - bubble.spacing) : bubble.spacing

     

    Change the above line to:

    x: bubble.spacing

     

    So it was a problem with positioning of the background rectangle and / or the text positioning.

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.