단일 Ubuntu SDK가 별도의 레이아웃으로 터치 및 데스크탑을 대상으로 할 수 있습니까?

터치 앱이 동일한 UI로 데스크탑에서 실행된다는 것을 알고 있지만 데스크탑 모드에서 실행할 때 단일 Ubuntu SDK 앱이 데스크탑 스타일 UI 요소가있는 다중 창 UI를 가질 수 있는지 궁금합니다. 터치 플랫폼에서 실행할 때 별도의 터치 UI를 제공합니다.

창의 크기에 따라 레이아웃의 측면을 변경하는 방법은 여러 가지가 있습니다. 가장 기본적인 수준에서는 차원을 기준으로 속성을 다른 값으로 설정할 수 있습니다. 다음은 창을 더 크게 만들면 주황색으로 변하는 회색 사각형을 그리는 최소한의 예입니다.

로 실행 qmlscene path/to/file.qml

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    width: units.gu(50)
    height: units.gu(50)

    Rectangle {
        id: hello
        color: parent.width > units.gu(60) ? UbuntuColors.orange : UbuntuColors.warmGrey
        anchors.fill: parent
    }
}

물론 응용 프로그램에 더 복잡한 요소가 있으면 약간 지루할 수 있습니다. 이를 돕기 위해 Ubuntu 툴킷은 조건이 충족 될 때 활성화 될 다른 레이아웃을 정의 할 수 있는 ConditionalLayout 구성 요소를 제공합니다 . 이것은 동적으로 발생하며 창의 크기를 조정할 때 변경 사항을 볼 수 있습니다.

다음은보다 복잡한 예제입니다 ConditionalLayout.

import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem
import Ubuntu.Layouts 0.1

MainView {
    id: root
    width: units.gu(50)
    height: units.gu(75)

    Page {
        anchors.fill: parent

        Layouts {
            id: layouts
            anchors.fill: parent
            layouts: [

                ConditionalLayout {
                    name: "flow"
                    when: layouts.width > units.gu(60)

                    Flow {
                        anchors.fill: parent
                        flow: Flow.LeftToRight

                        ItemLayout {
                            item: "sidebar"
                            id: sidebar
                            anchors {
                                top: parent.top
                                bottom: parent.bottom
                            }
                            width: parent.width / 3
                        }

                        ItemLayout {
                            item: "colors"
                            anchors {
                                top: parent.top
                                bottom: parent.bottom
                                right: parent.right
                                left: sidebar.right
                            }
                        }
                    }
                }
            ]

            Column {
                id: sidebar
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                }
                Layouts.item: "sidebar"

                ListItem.Header {
                    text: "Ubuntu Color Palette"
                }

                ListItem.Standard {
                    id: orangeBtn
                    text: "Ubuntu Orange"
                    control: Button {
                        text: "Click me"
                        onClicked: {
                            hello.color = UbuntuColors.orange
                        }
                    }
                }

                ListItem.Standard {
                    id: auberBtn
                    text: "Canonical Aubergine"
                    control: Button {
                        text: "Click me"
                        onClicked: {
                            hello.color = UbuntuColors.lightAubergine
                        }
                    }
                }

                ListItem.Standard {
                    id: grayBtn
                    text: "Warm Grey"
                    control: Button {
                        text: "Click me"
                        onClicked: {
                            hello.color = UbuntuColors.warmGrey
                        }
                    }
                }
            } // Column

            Rectangle {
                id: hello
                Layouts.item: "colors"
                color: UbuntuColors.warmGrey
                anchors {
                    top: sidebar.bottom
                    bottom: parent.bottom
                    left: parent.left
                    right: parent.right
                }

                Label {
                    anchors.centerIn: parent
                    text: "Hello (ConditionalLayout) World!"
                    color: "black"
                    fontSize: "large"
                }
            }
        } // Layouts
    } // Page
} // Main View

기본 전화와 같은 크기 인 경우 다음과 같습니다.

태블릿 또는 데스크탑과 같은 크기로 확장되면 다음과 같습니다.

조건부 레이아웃을 사용 하여이 결과를 얻을 수 있다고 생각합니다 .