qml布局

锚(anchors)

anchors锚布局,是一种使用相对位置的布局方式

  • anchors.margins、anchor.topMargin、anchor.bottomMargin、anchor.leftMargin、anchor.rightMargin可以设置边界宽度
  • anchors.top、anchors.bottom、anchors.left、anchors.right进行对齐
  • anchors.verticalCenter和anchors.horizontalCenter进行纵向居中和横向居中。
  • anchors.centerIn居中
  • achros.fill属性充满一个区域

Row

QML 中的 Row 元素会将其子控件都排列在同一行,相互不重叠。使用它的spacing 属性来定义子控件之间的距离。

Row {
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

Column

Column元素会将其子控件都排列在同一列,相互不重叠。使用它的spacing 属性来定义子控件之间的距离。

Column {
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

Grid

QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内,相互不重叠,每一个子控件都被放置在一个网格单元的(0,0)位置,也就是左上角。Grid的rows和columns属性定义网格的行数和列数,列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离,这里注意水平和垂直方向的spacing都是一样的。

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
    Rectangle { color: "cyan"; width: 50; height: 50 }
    Rectangle { color: "magenta"; width: 10; height: 10 }
}
# qml  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×