Một Ubuntu SDK duy nhất có thể chạm và máy tính để bàn với bố cục riêng biệt không?

Tôi biết rằng các ứng dụng cảm ứng sẽ chạy trên máy tính để bàn có cùng giao diện người dùng, nhưng tôi đã tự hỏi liệu một ứng dụng Ubuntu SDK có thể có giao diện người dùng đa cửa sổ với các thành phần UI kiểu máy tính để bàn hay không khi chạy ở chế độ máy tính để bàn cung cấp giao diện người dùng riêng biệt khi chạy trên nền tảng cảm ứng.

Thay đổi các khía cạnh của bố cục tùy thuộc vào kích thước của cửa sổ có thể được thực hiện theo một số cách. Ở cấp độ cơ bản nhất, bạn chỉ có thể đặt thuộc tính thành các giá trị khác nhau dựa trên kích thước. Dưới đây là một ví dụ tối thiểu vẽ hình vuông màu xám chuyển sang màu cam nếu bạn làm cho cửa sổ lớn hơn:

Chạy với 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
    }
}

Tất nhiên, nếu bạn có các yếu tố phức tạp hơn cho ứng dụng của mình, điều này có thể hơi tẻ nhạt. Để giải quyết vấn đề này, Bộ công cụ Ubuntu cung cấp một thành phần ConditableLayout nơi bạn có thể xác định các bố cục khác nhau sẽ được kích hoạt khi đáp ứng một điều kiện. Điều này xảy ra một cách linh hoạt và bạn có thể thấy những thay đổi khi bạn thay đổi kích thước cửa sổ.

Đây là một ví dụ phức tạp hơn bằng cách sử dụng 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

Khi ở kích thước giống như điện thoại mặc định, nó trông giống như:

Khi nó được mở rộng thành kích thước giống như máy tính bảng hoặc máy tính để bàn, nó trông giống như:

Tôi nghĩ rằng bạn có thể có kết quả này bằng cách sử dụng Bố cục có điều kiện .