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

เมื่ออยู่ในขนาดเหมือนโทรศัพท์เริ่มต้นดูเหมือนว่า:

เมื่อขยายเป็นแท็บเล็ตหรือขนาดเหมือนเดสก์ท็อปดูเหมือนว่า:

ผมคิดว่าคุณสามารถมีผลนี้โดยใช้เงื่อนไขเลย์เอาต์