Cách thiết kế bố cục chất lỏng đa cấp trong QML

Question

Tôi đã thiết kế bố cục trong QML để tìm hiểu thêm về các tính năng của nó và có một số câu hỏi về "Phương pháp hay nhất" trong thiết kế bố cục như vậy. Ở đây là:

cơ bản Đây là một ColumnLayout gồm ba RowLayout s, mỗi người với một số Rectangle s. Kích thước của mỗi Row và Rectangle nên được tính toán như:

• hàng đầu tiên: Chiều cao = 40%, Width = 100%
  • Red Rectangle điền toàn bộ khu vực
• Thứ hai liên tiếp : Chiều cao = 20%, Width = 100%
  • Dark-xanh Rectangle: Chiều cao = 100%, Width = 20%,
  • Rectangle Light-xanh: Height = 100%, Width = 80%
• thứ ba liên tiếp: Chiều cao = 40%, Width = 100%
  • Dark-xanh Rectangle: height = 100%, Width = 40%,
  • xanh Rectangle: Chiều cao = 100%, Width = 20%
  • Light-xanh Rectangle: Chiều cao = 100%, Width = 40%

Các QML tôi đã nảy ra đang làm việc và là trong những điều sau đây. Tôi có một số câu hỏi về nó:

1. tôi đã thiết lập chiều rộng và chiều cao tỷ lệ sử dụng Layout.preferredHeight: x * parent.height mẫu. Các tùy chọn khác đã gây ra một số vấn đề (ví dụ: fancyHeight đã gây ra cảnh báo vòng lặp ràng buộc). Cách tiếp cận của tôi có chính xác và hiệu quả không?
2. Là một hack, tôi đặt Bố cục.fillWidth: true cho thành phần đầu tiên của Hàng số 2 và Hàng số 3, điều này không có ý nghĩa đối với tôi, nhưng hoạt động. Nếu tôi đặt chiều rộng của chúng thành phần trăm (ví dụ: Bố cục.preferredWidth: 0.2 * parent.width) hàng của chúng sẽ thu gọn thành độ rộng 0. Đây có phải là hành vi mong đợi không? Có cách giải quyết nào tốt hơn không?
3. Bạn có đề xuất nào về bố cục không? Tôi đang đi đúng hướng chứ?

Đây là mã QML của tôi cho bố trí:

ApplicationWindow { 
    x: 500 
    y: 100 
    width: 250 
    height: 150 
    visible: true 

    ColumnLayout { 
     anchors.fill: parent 
     spacing: 0 
     RowLayout { 
      spacing: 0 
      Layout.preferredHeight: 0.4*parent.height 
      Layout.fillHeight: false 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "red" 
      } 
     } 
     RowLayout { 
      spacing: 0 
      Layout.preferredHeight: 0.2*parent.height 
      Layout.fillHeight: false 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "darkGreen" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 0.8*parent.width 
       color: "lightGreen" 
      } 
     } 
     RowLayout { 
      spacing: 0 
      Layout.preferredHeight: 0.4*parent.height 
      Layout.fillHeight: false 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "darkBlue" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 0.2*parent.width 
       color: "blue" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 0.4*parent.width 
       color: "lightBlue" 
      } 
     } 
    } 
} 

Cập nhật:

Tiếp cận của tôi có vẻ là hacky nhiều hơn tôi mong đợi:

1. Đưa chữ yếu tố khi trẻ em trong bố cục này tăng liên kết ing vòng cảnh báo như:

QML QQuickLayoutAttached: Ràng buộc vòng lặp phát hiện cho thuộc tính "preferredWidth"

Nếu một chữ bọc bên trong một Rectangle những lời cảnh báo biến mất.

2. Các khoảng cách: 0 dường như đóng một vai trò quan trọng. Bỏ qua nó sẽ gây ra cảnh báo vòng lặp ràng buộc.

Trong khi cách tiếp cận thiết kế bố cục lỏng trong QML hoạt động, nó có một số vấn đề nghiêm trọng và có thể không nằm trong "thực tiễn tốt nhất".

Answer 1

QtQuick.Layout không cung cấp bất kỳ cải tiến thực sự nào đối với hệ thống neo cổ điển. Tôi sẽ recommand để tránh chúng. Bạn có thể kiểm soát cách bố trí của mình bằng cách sử dụng các neo.

Dưới đây là thiết kế chính xác cùng mà không QtQuick.Layout:

ApplicationWindow { 
    x: 500 
    y: 100 
    width: 250 
    height: 150 
    visible: true 

    Column { 
     anchors.fill: parent 

     Row { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: 0.4 * parent.height 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: parent.width 
       color: "red" 
      } 
     } 

     Row { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: 0.2 * parent.height 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.2 * parent.width 
       color: "darkGreen" 
      } 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.8 * parent.width 
       color: "lightGreen" 
      } 
     } 

     Row { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: 0.4 * parent.height 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.4 * parent.width 
       color: "darkBlue" 
      } 
      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.2 * parent.width 
       color: "blue" 
      } 
      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.4 * parent.width 
       color: "lightBlue" 
      } 
     } 
    } 
} 

Cho đến nay tôi chưa bao giờ gặp bất kỳ thiết kế đó là không thể làm mà không QtQuick.Layout.

Answer 2

Nó bị cấm (và không cần thiết) để thử và tham chiếu chiều rộng và chiều cao của phụ huynh từ các mục bên trong bố cục.

Khi fillWidth (hoặc fillHeight) được thiết lập để true, sau đó mục được phân bổ không gian tương ứng với họ quy định preferredWidth (hoặc preferredHeight).

Do đó, cách chính xác để tạo Bố cục của bạn như sau. Tôi đã sửa đổi giao diện chỉ để hiển thị khoảng cách đó và Text cũng có thể được đặt tự do như mong muốn. Không có vòng ràng buộc.

ApplicationWindow { 
    x: 500 
    y: 100 
    width: 250 
    height: 150 
    visible: true 

    ColumnLayout { 
     anchors.fill: parent 
     spacing: 5 
     RowLayout { 
      spacing: 5 
      Layout.preferredHeight: 40 
      Layout.fillHeight: true 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "red" 
      } 
     } 
     RowLayout { 
      spacing: 5 
      Layout.preferredHeight: 20 
      Layout.fillHeight: true 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 20 
       Layout.fillWidth: true 
       color: "darkGreen" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 80 
       Layout.fillWidth: true 
       color: "lightGreen" 
      } 
     } 
     RowLayout { 
      spacing: 5 
      Layout.preferredHeight: 40 
      Layout.fillHeight: true 
      Text { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 40 
       Layout.fillWidth: true 
       color: "darkBlue" 
       text: "hello world!" 
       horizontalAlignment: Text.AlignHCenter 
       verticalAlignment: Text.AlignVCenter 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 20 
       Layout.fillWidth: true 
       color: "blue" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 40 
       Layout.fillWidth: true 
       color: "lightBlue" 
      } 
     } 
    } 
}