分页切换显示效果
1.效果如图
2.背景
3.编码
工具按钮实现
- 按键的索引值:关联控制对应的视图
- 颜色线性渐变方向与显示图标文字的处理
- pushBtn的鼠标效果
import QtQuick 2.0
Rectangle {
id: toolBtn;
// 尺寸
height: 80;
width: 80;
// 索引号
property int index: 0;
signal clicked(int index);
// 顺时针旋转
rotation: 90;
// 背景颜色
property color bckgrndColor: "#00ffffff"; // 白色透明
// 引用
property alias iconSrc: btnIcon.source;
property alias text: btnText.text;
Rectangle {
id: background;
// 锚布局
anchors.fill: parent;
// 元素透明度
opacity: 0.1;
// 边界样式
// border.width: 2;
// border.color: "#ff808080";
}
Column {
id: vLayout;
// 锚布局
anchors.topMargin: 10;
anchors.leftMargin: 10;
anchors.fill: parent;
//spacing: 1; // children隔开1个像素
rotation: -parent.rotation;
Image {
id: btnIcon;
}
Text {
id: btnText;
// miniJXK字体
FontLoader {
id: miniJXK;
source: "Repository/Font/miniJXK.TTF";
}
font.family: miniJXK.name;
color: "#ffffffff";
}
}
// 渐变
gradient: colorGradient;
Gradient {
id: colorGradient;
GradientStop {
position: 0.0;
color: "#00ffffff";
}
GradientSto