Kích thước của các phần tử trong QML

Question

Tôi mới sử dụng QML. Như tôi đã hiểu, tất cả các phần tử đều có chiều rộng và chiều cao liên quan để xác định kích thước của chúng. Nếu người dùng thay đổi độ phân giải màn hình, kết quả cuối cùng trông có vẻ lạ. Có cách nào kích thước của các yếu tố có thể được điều khiển động dựa trên độ phân giải màn hình không?

Answer 1

Thay vì sử dụng giá trị cố định, bạn có thể nhân height và width của phần tử gốc theo các yếu tố, xác định kích thước của các phần tử tỷ lệ thuận với kích thước phần tử gốc. Ngoài ra, bạn có thể sử dụng QML anchors. Với điều này, bạn có thể tạo GUI hoàn toàn có thể mở rộng:

import QtQuick 1.0 

Item { 
    id: root 

    // default size, but scalable by user 
    height: 300; width: 400 

    Rectangle { 
     id: leftPanel 

     anchors { 
      top: parent.top 
      left: parent.left 
      bottom: parent.bottom 
     } 
     width: root.width * 0.3 
     color: "blue" 
    } 

    Rectangle { 
     id: topPanel 

     anchors { 
      top: parent.top 
      left: leftPanel.right 
      right: parent.right 
     } 
     height: root.height * 0.2 
     color: "green" 
    } 


    Rectangle { 
     id: contentArea 

     anchors { 
      top: topPanel.bottom 
      left: leftPanel.right 
      right: parent.right 
      bottom: root.bottom 
     } 
     color: "white" 

     Text { 
      text: "Hi, I'm scalable!" 
      anchors.centerIn: parent 
      font.pixelSize: root.width * 0.05 
     } 
    } 
} 

Tôi không biết cách nào để có độ phân giải màn hình với QML thuần túy có sẵn ở tất cả các môi trường.

Để xác định độ phân giải màn hình trên thiết bị di động, bạn có thể sử dụng QML Screen Element.

Trong các ứng dụng dành cho máy tính để bàn, bạn có thể nhận được độ phân giải màn hình bằng C++ (ví dụ: QDesktopWidget) và đặt nó available in QML.