qml style: Text.Sunken

Text.Sunken是QML中的一种文本样式，用于创建带有凹陷效果的文本。可以通过设置Text的style属性来应用该样式，例如：

Text {
    text: "Hello World"
    style: Text.Sunken
}

这将创建一个带有凹陷效果的“Hello World”文本。你也可以使用其他属性来自定义凹陷效果，例如设置阴影或边框颜色。

相关问题

horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter

在 QML 中，可以使用 Text 控件的 horizontalAlignment 和 verticalAlignment 属性来实现字体横向居中和竖向居中的效果。

1. 实现字体横向居中

要实现字体横向居中，可以将 Text 控件的 horizontalAlignment 属性设置为 Text.AlignHCenter。例如，如果想要一个 Text 控件中的字体横向居中，可以这样写：

Text {
    text: "Hello, World!"
    font.pixelSize: 24
    horizontalAlignment: Text.AlignHCenter
}

在上面的例子中，我们将 Text 控件的 horizontalAlignment 属性设置为 Text.AlignHCenter，即可实现字体横向居中的效果。

2. 实现字体竖向居中

要实现字体竖向居中，可以将 Text 控件的 verticalAlignment 属性设置为 Text.AlignVCenter，同时使用 RotationTransform 和 TranslateTransform 组件来实现。具体步骤如下：

- 使用 RotationTransform 组件将 Text 控件旋转 90 度，使其变为竖向显示。
- 使用 TranslateTransform 组件将 Text 控件向上平移半个控件高度，从而实现字体竖向居中效果。

示例代码如下：

Text {
    text: "Hello, World!"
    font.pixelSize: 24
    verticalAlignment: Text.AlignVCenter
    transform: [
        Rotation {
            origin.x: width/2
            origin.y: height/2
            angle: -90
        },
        Translate {
            y: width/2 - font.pixelSize/2
        }
    ]
}

在上面的例子中，我们使用了 RotationTransform 组件将 Text 控件旋转了 -90 度，然后使用了 TranslateTransform 组件将 Text 控件向上平移了半个控件高度，从而实现了字体竖向居中的效果。同时，我们将 Text 控件的 verticalAlignment 属性设置为 Text.AlignVCenter，使其在竖向上居中。

Row{ width: parent.width Repeater { model: buttonLabels.length Button{ width: parent.width / buttonLabels.length background: Rectangle { color: "#114670" // 设置背景颜色为红色 radius: 5 // 设置圆角半径为5 } contentItem: Text { id: btnText text: "第"+ buttonLabels[index] +"层" font.pointSize : 13 color: "#ffffff" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } onClicked: { floor = btnText.text console.log("Button clicked:", text) } } } } 这段代码中点击后改变背景颜色，将其他按键还原

可以 `Repeater` 中绑定一个 `currentIndex` 属性，表示当前选择的按钮索引，然后在 `Button` 的 `background` 中使用条件语句来判断是否为当前选中的按钮，从而设置不同的背景颜色。同时，在点击其他按钮时，将 `currentIndex` 修改为当前按钮的索引，这样就可以实现点击后改变背景颜色，将其他按键还原的效果。

以下是修改后的代码示例：

Row {
    width: parent.width
    Repeater {
        model: buttonLabels.length
        property int currentIndex: -1 // 添加 currentIndex 属性

        Button {
            width: parent.width / buttonLabels.length
            background: Rectangle {
                color: index === currentIndex ? "#114670" : "#ffffff" // 根据 currentIndex 判断是否选中
                radius: 5
            }
            contentItem: Text {
                id: btnText
                text: "第" + buttonLabels[index] + "层"
                font.pointSize: 13
                color: index === currentIndex ? "#ffffff" : "#114670" // 根据 currentIndex 判断字体颜色
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
            onClicked: {
                if (index !== currentIndex) { // 判断是否为当前选中的按钮
                    currentIndex = index // 修改 currentIndex 为当前按钮的索引
                    console.log("Button clicked:", text)
                }
            }
        }
    }
}