Qtquick Mobile Phone Slide interface Demo

This demo is just learned Qtquick, read the next QML document after the attempt. The first contact with Qtquick is to download Qt5 on the official website to see a UI development demonstration, at the time that Qt in C + + can also make the UI so good-looking. It took 4 days to learn seriously and the interface and C + + relationship is not very small, using the QML language, named Qtquick means the rapid development of products, so I try this demo to see how fast. Functional Requirements

This demo implements an iphone-like interface, just like the home screen can place a 4x4 number of app icons and three screens can slide. You can place a single line of 4 app icons at the bottom or swipe left or right. The page indicator of the current page of the main screen can indicate the current page, or touch the small white dot to page. And a drop-down menu.
Home Screen Implementation

Because it is a beginner, so the first problem encountered is the screen sliding problem, think a long way to check the document is science and Google. Finally, there are some ideas: if you can only switch the screen, it is very simple, according to the Mouse (gesture) action (such as the left mouse button on the left side of the screen, the mouse button is detected on the right side of the screen to release, you can judge the mouse gesture moves to the right), to realize the hidden or display screen. But what is needed here is a sliding screen, the sliding process must be smooth, and the page must be within the display range after the mouse release button. After scientific Google and querying the document, it was found that the self-brought ListView can perfectly implement the function of the main screen.

This feature does not need a ListView, but I try to achieve the effect is not good, so did not continue to try. Use off-the-shelf functionality first. The listview settings are as follows:

listview{
    id:pageview
    anchors.fill:parent
    model:pagemodel//Data Model
    Orientation: listview.horizontal//Horizontal Direction
    snapmode:listview.snaponeitem//each time an item
    Highlightrangemode is displayed: Listview.strictlyenforcerange
    highlightmoveduration:400
    cachebuffer:3//cachebuffer is not a pixel buffer,it Only maintains additional instantiated delegate
}    

The above code function is to place the ListView horizontally, then, the Snapmode property means that every time you swipe, just display an item, which is the full display of a page. If you continue to use the ListView to implement the bottom app bar, the settings are exactly the same. So, we have this piece of the ListView property set independent to make a control, in the QML is very convenient, only need to create a separate QML file, and then the file name can be used as the name of the control, import the road in other QML files or put in the same directory, you can directly call, For example now in the same directory we create a pageview.qml, file content:

Import QtQuick 
listview{
    id:pageview
    anchors.fill:parent
    model:pagemodel
    Orientation: Listview.horizontal
    SnapMode:ListView.SnapOneItem
    highlightRangeMode:ListView.StrictlyEnforceRange
    highlightmoveduration:400
    Cachebuffer:3//cachebuffer is not a pixel buffer,it only maintains additional Instan tiated Delegate
}

After that, we do not need to use the ListView in MAIN.QML to use PageView directly:

This step completes the UI of the general framework, the completion of this step to achieve the screen two sliding parts, the next step in the view of the model, it will be a bit difficult for beginners to focus on content, Model/view, and delegate (to this site to learn, very comprehensive, It's more comprehensive than Chinese, and it's really good to understand http://qmlbook.github.io/en/ch06/index.html. View represents the visual effect that the code finally renders, such as a ListView:

As shown in the picture, the ListView effect is such a single row of multiple rows of the table, the basic unit is a row, and model is based on this view, the model in each of the data will use the ListView row to display. The view and model are independent of each other, you can change the ListView to a GridView, and the data will be rendered to the right of the following diagram:

The use of the model is no longer said, the first consideration here is to display the data, is the application icon, so the data content has an icon file path, the application name text. Therefore, you can define a control button individually and create a new BUTTON.QML

Import QtQuick 2.2 Rectangle {Id:button Property real Buttonscale:1 property bool Pressed:false width : 128*buttonscale Height:144*buttonscale color: "Transparent"//border.width:3 property string Label: "Property string ImageSource:" "Signal ButtonClick () OnButtonClick: {buttonevent.getbuttonevent Tonlabel.text)} Image {id:buttonimage z:2 width:120*buttonscale; height:120*buttonsc Ale anchors.top:parent.top Anchors.topmargin:8*buttonscale Anchors.horizontalCenter:parent.hori Zontalcenter source:imagesource Mousearea {id:buttonmousearea Hoverenabled:tru E anchors.fill:buttonImage//onclicked:buttonclick () onpressed: {BU Ttonclick ()}}} Text {Id:buttonlabel anchors.top:buttonImage.bo Ttom Anchors.topmargin:0 Anchors.horizontalCenter:parent.horizontalCenter Font.pixelsize:20*buttonscale;font.bold:true Color: "White" Text:label}}

The custom button element is then stored as the model data, and the delegate is set so that the data in the model is displayed in 4x4 format. The final page rendering effect is shown in Figure 1. and each button (that is, the app icon) will respond instantly, in a uniform format. page Indicator (three small white dots on the main screen)

Directly on the code:

Row {
            Id:mainpageindicator property
            ListView target:mainpageview
            anchors.horizontalcenter: Mainpageview.horizontalcenter
            anchors.bottom:mainPageView.bottom
            anchors.bottommargin:209 *windowscale
            z:1
            Spacing:20*windowscale
            Repeater {
                opacity:0.8
                model:mainPageView.model.count
                Rectangle {
                    width:16*windowscale; Height:16*windowscale
                    radius:8*windowscale
                    color: Mainpageview.currentindex = = index? "White": "Grey"
                    Mousearea {
                        width:20*windowscale; Height:20*windowscale
                        anchors.centerIn:parent
                        onClicked:mainPageView.currentIndex = Index
                    }
                }
            }
        

Summary

Blog post is not organized, because the demo is simple, but it involves a lot of things, as a beginner, has not systematized these knowledge, so, rambling.
The knowledge and skills used in the demo are all available in the document, and it is important for the individual to be patient and read the document. Of course, Google is more.