Qml模式视图

Qml模式视图

框图下图所示：

• Model
  数据来源
• Delegate
  一个描述model中每条数据的显示方式的控件（渲染数据方式）
• View
  可视的元素，使用delegate来显示model中的数据

例子

1. 列表
   这里将model单独写在MyModel.qml文件中

  import QtQuick 2.0

  ListModel {
      id: contactModel
      ListElement {
          name: "Bill Simth"
          number: "555 3264"
      }
      ListElement {
          name: "张三"
          number: "1234 5689"
      }
      ListElement {
          name: "李四"
          number: "1235 5689"
      }
  }

在MyList.qml中编写Delegate,View和highlight

  import QtQuick 2.0

  Rectangle {
      width: 180
      height: 200
      color: "green"

      Component {
          id: delegate
          Item {
              id: wrapper
              width: 180; height: 40
              Column {
                  x: 5; y: 5
                  Text {
                      text: '<b>Name:</b> ' + name
                      font.pixelSize: 20
                  }
                  Text {
                      text: '<b>Number:</b> ' + number
                      font.pixelSize: 16
                  }
              }
          }
      }

      Component {
          id: highlight
          Rectangle {
              color: "lightsteelblue"
              radius: 5
          }
      }

      ListView {
          id: listview1
          width: parent.width; height: parent.height
          model: MyModel {
          }
          delegate: delegate
          highlight: highlight
          focus: true
      }
  }

截图如下：

2. 栅格视图例子
model文件还是MyModel.qml,在MyGridView.qml文件中定义Delegate，view和highlight

import QtQuick 2.0

Rectangle {
     width: 180
     height: 200

     Component {
         id: delegate
         Item {
             id: wrapper
             width: 65; height: 65
             Column {
                 x: 5; y: 5
                 Image {
                     source: "images/personLogo.jpg"
                 }

                 Text {
                     text: name
                     font.pixelSize: 12
                 }
             }
         }
     }

     Component {
         id: highlight
         Rectangle {
             color: "lightgray"
             radius: 5
             width: 100
             height: 100
         }
     }

     GridView {
         width: parent.width; height: parent.height
         model: MyModel {}
         delegate: delegate
         highlight: highlight
         cellWidth: 65; cellHeight: 65
         focus: true
     }
 }

截图：
3. 路径视图
MyPathView.qml代码如下

 import QtQuick 2.0

 Rectangle {
     Component {
         id: delegate
         Item {
             id: wrapper
             width: 80; height: 80
             scale: PathView.scale
             opacity: PathView.opacity
             Column {
                 Image {
                     source: "images/QtLogo.jpg"
                 }
                 Text {
                     text: name
                     anchors.horizontalCenter: parent.horizontalCenter
                     font.pointSize: 16
                     color: wrapper.PathView.isCurrentItem ? "red" : "black"
                     font.bold: wrapper.PathView.isCurrentItem ? true : false
                 }
             }
         }
     }

     PathView {
         anchors.fill: parent
         model: MyModel {}
         delegate: delegate
         path: Path {
             startX: 120; startY: 100
             PathAttribute {
                 name: "scale"
                 value: 1.0
             }
             PathAttribute {
                 name: "opacity"
                 value: 1.0
             }
             PathQuad {
                 x: 120
                 y: 25
                 controlX: 260
                 controlY: 75
             }
             PathAttribute {
                 name: "scale"
                 value: 0.3
             }
             PathAttribute {
                 name: "opacity"
                 value: 0.5
             }
             PathQuad {
                 x: 120
                 y: 100
                 controlX: -20
                 controlY: 75
             }
         }
         focus: true
         Keys.onLeftPressed: decrementCurrentIndex()
         Keys.onRightPressed: incrementCurrentIndex()
     }
 }

• 其中，PathAttribute设置缩放，透明度等属性，
• 判断是否是当前的选中项，设置text字体的颜色和黑体

color: wrapper.PathView.isCurrentItem ? "red" : "black"
font.bold: wrapper.PathView.isCurrentItem ? true : false   

• 在PathView中设置键盘左右键来滑动Item

focus: true
Keys.onLeftPressed: decrementCurrentIndex()
Keys.onRightPressed: incrementCurrentIndex()

• 截图：
  

Repeator

顾名思义：repeator主要起到是重复组件的功能
• model的使用和前面的View元素很像
• model的数据类型可以是object list, a string list, a number, or a
Qt/C++ model
• 当前的 model index 可以通过 index 属性访问

import QtQuick 2.0

Row {
    Rectangle {
        width: 10
        height: 20
        color: "red"
    }
    Repeater {
        model: 10
        Rectangle{
            width: 20
            height: 20
            radius: 10
            color: "green"
        }
    }
    Rectangle {
        width: 10
        height: 20
        color: "blue"
    }
}

• 截图如下：
  

Flickable组件

Flickable {
    id: flick1
    anchors.top: parent.top
    anchors.topMargin: 660
    width: 200; height: 200
    contentWidth: image.width
    contentHeight: image.height
    Image {
        id: image
        source: "images/QtLogo.jpg"
    }
}

• 截图
  

用到的英文单词

1. The delegate is instantiated for each item on the path.
   对于路径上的每个项，委托都被实例化。

• instantiated：v. 实例化，具现化，实体化；举例说明（instantiate 的过去式和过去分词）

2. The items may be flicked to move them along the path.
   这些项目可能会在路径上移动。

• flicked：v. 轻弹；忽然摇动；轻轻拂去；用（鞭）抽打
  这里flick意为滑动

3. The value of an attribute at any particular point along the path is interpolated from the PathAttributes bounding that point.
   沿着路径的任何特定点上的属性值都可以从该点的边界路径属性中插入。

• interpolated:以内插值替换的曲线插补插值

• Velocity:速度

Qt版本：Qt Creator 4.2.1 Based on Qt 5.8.0 (MSVC 2015, 32 bit)

QML__Nokia内部培训资料(1).pdf - 113页

Qt帮助文档-PathView
Qt 5.8
Qt Quick
QML Types
PathAttribute QML Type