12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象

1.Row布局

• Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局。
• 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息.

示例如下所示,通过Positioner获取每个元素位置标签:

Window {
    width: 320;
    height: 240;
    visible: true;
    Row {
        anchors.centerIn: parent
        spacing: 4
        Repeater {
          model: 4
          Rectangle {
              id: rect
              width: 30; height: 30
              border.width: 1
              Text {
                  text: rect.Positioner.index
              }
              color: {
                  if (Positioner.isFirstItem) {
                    return "red"
                  } else if (Positioner.isLastItem) {
                    return "yellow"
                  } else {
                    return "lightsteelblue"
                  }
              }
          }
        }
    }
}

效果如下所示:

Repeater对象介绍

Repeater对象是个重复组件对象,上面示例中的"model: 4"表示内部的顶层item需要加载的个数.

而model其实是个var类型属性,如果我们设置为int类型,那么表示需要加载的个数,并且还提供一个index只读属性给我们使用.

如果设置为字符串数组,那么就提供一个modelData只读属性给我们使用.如下图所示:

2.Column布局

• 和Row类似,不过是以列的方式进行排列item,并且每个item都有个Positioner附加属性.

将上面示例中的Row改为Column,如下图所示:

3.Grid布局

• 以网格的方式进行排列item.每个item默认都会放于每个单元格的左上角.
• 并且每个item都有个Positioner附加属性.
• Grid默认为4列，然后根据item成员个数动态计算行数,我们也可以通过rows和columns属性来设置行列数.

示例如下所示:

Window {
    visible: true
    width: 320;
    height: 240;

    Grid {
        anchors.centerIn: parent
        spacing: 4
        Repeater {
          id: repeat
          model: 10
          Rectangle {
              id: rect
              border.width: 1
              Text {
                  text: rect.Positioner.index
              }
              color: {
                  console.log((Positioner.index + 1) * 10)
                  if (Positioner.isFirstItem) {
                    return "red"
                  } else if (Positioner.isLastItem) {
                    return "yellow"
                  } else {
                    return "lightsteelblue"
                  }
              }
              width: (repeat.model - Positioner.index + 1) * 5
              height: (repeat.model - Positioner.index + 1) * 5
          }
        }
    }
}

效果如下所示:

可以看到columns默认为4,并且每个Item绘制的位置都默认从网格的左上角开始绘制.不过我们可以通过horizontalItemAlignment和verticalItemAlignment属性来设置每个网格的对齐方式.

而Grid的flow属性则是用来设置布局流方向,取值有:

• Grid.LeftToRight(默认,从每一行左往右布局)
• Grid.TopToBottom(从每一列上往下布局,直到放满一列才会放下一列)

4.Flow布局

• Flow布局和Grid布局有点类似，但是Flow没有行列属性， 他会根据自身宽高来动态计算item的行列.
• 它的默认布局方向(flow属性)为Flow.LeftToRight,也就是从左往右排列,如果剩余的宽度不足,则从下一行继续左往右排列.
• 除此之外,还可以改为Flow.TopToBottom,从上往下排列,如果一列排完,则排下一列.

示例如下所示:

Window {
    visible: true

    Flow {
        width: parent.width
        height: parent.height
        spacing: 4
        Repeater {
          id: repeat
          model: 12
          Rectangle {
              id: rect
              border.width: 1
              Text {
                  text: rect.Positioner.index
              }
              color: {
                  console.log((Positioner.index + 1) * 10)
                  if (Positioner.isFirstItem) {
                    return "red"
                  } else if (Positioner.isLastItem) {
                    return "yellow"
                  } else {
                    return "lightsteelblue"
                  }
              }
              width: (repeat.model - Positioner.index + 1) * 5
              height: (repeat.model - Positioner.index + 1) * 5
          }
        }
    }
} 

效果如下所示:

如上图所示,可以看到当排"格子3"的时候,由于第一排剩余宽度不足,所以排在了第二行了.

当我们改变窗口大小,Flow就会立即进行重排.

5.布局嵌套

• 布局与布局可以进行嵌套,比如Row和Column嵌套就可以实现一个Grid布局.

示例如下所示:

Window {
    visible: true

    Column {
        anchors.centerIn: parent
        Rectangle { width: 200; height: 10; color: "red" }

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

}

效果如下所示:

下章学习:13.Quick QML-RowLayout、ColumnLayout、GridLayout布局管理器介绍、并通过GridLayout设计的简易网站导航界面