QML - Kiểm soát chiều rộng và màu đường viền trên bất kỳ một mặt nào của phần tử Hình chữ nhật

Question

Hiện tại tôi đã có yêu cầu vẽ hình chữ nhật đại diện với sự trợ giúp của điều khiển ListView. Tôi đã có thể vẽ một loạt hình chữ nhật theo chiều ngang hoặc chiều dọc trong chế độ xem danh sách nhưng vấn đề là với đường viền của hình chữ nhật. Chiều rộng đường viền tại điểm giao nhau của hình chữ nhật liền kề có chiều rộng gấp đôi.

Hình chữ nhật đại biểu không là gì ngoài phần tử Hình chữ nhật nhanh Qt.

Có thể giới hạn chiều rộng đường viền trên bất kỳ một mặt nào của hình chữ nhật không?

Có thể thay đổi màu sắc trên một mặt không? (Một cái gì đó tương tự như QLineEdit - Nơi chúng tôi có thể kiểm soát chiều rộng và màu sắc biên giới đối với các cạnh)

Trân trọng, Santhosh.

Answer 1

Bạn có thể làm cho một yếu tố biên giới tùy chỉnh như thế này:

CustomBorder.qml

import QtQuick 1.0 

Rectangle 
{ 

    property bool commonBorder : true 

    property int lBorderwidth : 1 
    property int rBorderwidth : 1 
    property int tBorderwidth : 1 
    property int bBorderwidth : 1 

    property int commonBorderWidth : 1 

    z : -1 

    property string borderColor : "white" 

    color: borderColor 

    anchors 
    { 
     left: parent.left 
     right: parent.right 
     top: parent.top 
     bottom: parent.bottom 

     topMargin : commonBorder ? -commonBorderWidth : -tBorderwidth 
     bottomMargin : commonBorder ? -commonBorderWidth : -bBorderwidth 
     leftMargin : commonBorder ? -commonBorderWidth : -lBorderwidth 
     rightMargin : commonBorder ? -commonBorderWidth : -rBorderwidth 
    } 
} 

main.qml

import QtQuick 1.0 

Rectangle 
{ 
    width: 500 
    height: 500 
    color: "grey" 

    Rectangle 
    { 
     anchors.centerIn: parent 
     width : 300 
     height: 300 
     color: "pink" 

     CustomBorder 
     { 
      commonBorderWidth: 3 
      borderColor: "red" 
     } 
    } 


    Rectangle 
    { 
     anchors.centerIn: parent 
     width : 200 
     height: 200 
     color: "green" 

     CustomBorder 
     { 
      commonBorder: false 
      lBorderwidth: 10 
      rBorderwidth: 0 
      tBorderwidth: 0 
      bBorderwidth: 0 
      borderColor: "red" 
     } 
    } 


    Rectangle 
    { 
     anchors.centerIn: parent 
     width : 100 
     height: 100 
     color: "yellow" 

     CustomBorder 
     { 
      commonBorder: false 
      lBorderwidth: 0 
      rBorderwidth: 0 
      tBorderwidth: 10 
      bBorderwidth: 10 
      borderColor: "blue" 
     } 
    } 

} 

Trong ví dụ này tôi đã sử dụng các yếu tố tùy chỉnh để làm cho khác nhau hình chữ nhật có viền trên tất cả, một hoặc hai mặt.

Answer 2

Nếu bạn đang cố gắng thêm đường viền giữa các mục trong ListView, bạn nên sử dụng thuộc tính đã cho 'khoảng cách' để thiết lập đường viền chung giữa mỗi mục. Sau đó, bạn có khả năng có thể thêm một nền vào ListView để tùy chỉnh màu đường viền.

Ví dụ:

ListView { 
    spacing: 1 // or whatever you want the border to be 
} 

... Nhưng nếu bạn thực sự muốn có một biên giới cụ thể mà bạn luôn luôn có thể sử dụng hình chữ nhật để làm cho biên giới của riêng bạn:

Item { // this is your 'rectangle' 
    Rectangle { // the main thing 
     id: rec 
     anchors.fill: parent 
     anchors.leftMargin: 2 
     anchors.rightMargin: 5 
     // etc 
    } 

    Rectangle { // a border example 
     anchors.right: rec.right 
     height: parent.height 
     width: 5 
     color: "red" 
     // etc 
    } 
} 

Answer 3

Giải pháp đơn giản nhất cho một ListView là cung cấp cho đại biểu của bạn một đường viền 1 pixel và sau đó sử dụng khoảng cách -1 để mỗi ô chồng lên nhau 1 pixel:

ListView { 
    spacing: -1 
    delegate: Rectangle { 
     height: 40 
     width: parent.width 
     border.width: 1 
     border.color: "black" 
     z: listView.currentIndex === model.index ? 2 : 1 
     ... 
    } 
    ... 
} 

Nó sẽ hoạt động tương tự cho các chiều rộng đường viền khác.

EDIT: Đã thêm tính năng nâng cao đẹp từ nhận xét bên dưới để đảm bảo đường viền của mục đã chọn luôn ở trên tất cả các mục khác để bạn thay đổi nó để cho biết lựa chọn không bị che khuất bởi các đại biểu lân cận.