blackberry-10 - 如何在黑莓 10 级联中创建具有我选择的背景颜色的按钮？

Question

我想在黑莓 10 级联中创建一个具有我选择的背景颜色的按钮。

我怎样才能做到这一点 ？

Answer 1

创建自己的按钮非常简单，至少一旦你习惯了 qml :)

下面是一个自定义按钮的示例，将它放在一个文件中，例如 CustomButton.qml。您还可以使用属性来传递颜色，使其易于重复使用。

Container {
    property alias text: label.text

    signal clicked()  //emits a clicked signal.
        gestureHandlers: [
        TapHandler {
                onTapped: {
                    clicked();
            }
        }
    ]

    layout: DockLayout {
    }

    Container {
        background: Color.Red
        horizontalAlignment: HorizontalAlignment.Fill
        Container {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            topPadding: 10
            bottomPadding: 15
            leftPadding: 20
            rightPadding: 20
            Label {
                id: label
                text: "demo"
                textStyle {
                    base: tsLabel.style
                }
                topMargin: 0
                bottomMargin: 0
                topPadding: 0
                bottomPadding: 0
            }
        }
    }

    attachedObjects: [
        TextStyleDefinition {
            id: tsLabel
            base: SystemDefaults.TextStyles.BodyText
            fontSize: FontSize.Small
            color: Color.White
            fontWeight: FontWeight.W100
        }
    ]
}

要在您的主页中使用它，您只需执行以下操作：

CustomButton {
    text: "my button"
    onClicked: {
        //do code
    }
}

为了增强这一点，您可以在 onTapped 函数中添加动画或颜色变化。您还可以为按钮图像使用 9patch，使用 imagePaint 而不是 Color.Red。