如何在qml中自定義標題欄？

Question

我需要自定義我的應用程序的標題欄，例如在“Appstore”中：

我怎么能在qt中這樣做？

我已經嘗試將FrameWindow標志設置為FramelessWindowHint，但我必須實現所有功能（調整大小，拖動等）。 有什么好的解決方案嗎？

Answer 1

你的答案在這里：欲了解更多信息，請訪問鏈接： Snap2Chat自定義QML標題欄

TitleBar.qml示例文件

import bb.cascades 1.0

TitleBar 
{
    appearance: TitleBarAppearance.Plain
    kind: TitleBarKind.FreeForm

    property string titleText                   : "Snap2Chat";
    property variant titleTextColor             : Color.White
    property variant titleBarBackgroundColor    : Color.White
    property variant titleTextFontSize          : FontSize.Large
    property variant titleTextFontWeight        : FontWeight.W100

    property bool imageLogoVisibility           : false;
    property bool textLogoVisibility            : true;
    property bool cameraVisibility              : false;
    property bool closeVisibility               : false;
    property bool settingsVisibility            : false;

    signal closeButtonClicked();
    signal settingsButtonClicked();
    signal cameraButtonClicked();
    signal titleBarClicked();

    kindProperties: FreeFormTitleBarKindProperties 
    {
        content: 
        Container 
        {
            layout: DockLayout {}
            id: titleBackground
            background: titleBarBackgroundColor 
            horizontalAlignment: HorizontalAlignment.Fill

            Container 
            {
                layout: DockLayout {}
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
                leftPadding: 20
                rightPadding: leftPadding

                Container 
                {
                    id: leftButtons
                    horizontalAlignment: HorizontalAlignment.Left   
                    verticalAlignment: VerticalAlignment.Center

                    ImageButton 
                    {
                        id: closeButton
                        visible: closeVisibility
                        preferredHeight: 70
                        preferredWidth: 70
                        defaultImageSource: "asset:///images/titlebar/close.png"
                        onClicked: 
                        {
                            closeButtonClicked();
                        }
                    }

                    ImageButton 
                    {
                        id: cameraButton
                        visible: cameraVisibility
                        preferredHeight: 70
                        preferredWidth: 70
                        defaultImageSource: "asset:///images/titlebar/camera.png"
                        onClicked: 
                        {
                            cameraButtonClicked();
                        }
                    }
                }

                Container 
                {
                    id: centerButtons
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Center

                    ImageView 
                    {
                        visible: imageLogoVisibility
                        verticalAlignment: VerticalAlignment.Center
                        imageSource: "asset:///images/titlebar/logo.png"
                        preferredHeight: 70
                        scalingMethod: ScalingMethod.AspectFit
                    }

                    Label 
                    {
                        visible: textLogoVisibility
                        text: titleText
                        textStyle.color: titleTextColor
                        textStyle.fontSize: titleTextFontSize
                        textStyle.fontWeight: titleTextFontWeight
                    }

                    gestureHandlers: TapHandler 
                    {
                        onTapped: 
                        {
                            titleBarClicked();
                        }    
                    }
                }

                Container 
                {
                    id: rightButtons
                    horizontalAlignment: HorizontalAlignment.Right
                    verticalAlignment: VerticalAlignment.Center

                    ImageButton 
                    {
                        visible: settingsVisibility
                        preferredHeight: 70
                        preferredWidth: 70
                        defaultImageSource: "asset:///images/titlebar/settings.png"
                        onClicked: 
                        {
                            settingsButtonClicked();
                        }
                    }
                }
            }
        }
    }
}