QML ListView จะเป็นสีเทาหรือลบข้อความขององค์ประกอบเมื่อเลือกองค์ประกอบที่อยู่ติดกัน

ดังนั้นในการทดสอบโปรแกรมของฉัน ฉันค้นพบสิ่งที่แปลกประหลาดที่สุด

ฉันมีองค์ประกอบ ListView ที่มีโมเดล C++ ที่กำหนดเองและผู้รับมอบสิทธิ์ที่ค่อนข้างเรียบง่าย ผู้รับมอบสิทธิ์แต่ละคนคือคลาส MyButton ซึ่งเป็นเพียงคลาส Text(z:2) คลาส Image(z:1) และคลาส MouseArea คลาส Image นั้นเป็นพื้นหลัง และมีรูปภาพโปร่งแสงซึ่งจะทึบแสงเมื่อ MouseArea ถูก onPressed()

ตอนนี้ส่วนที่แปลก

เมื่อ ListView มี 4 องค์ประกอบ องค์ประกอบจะทำงานตามปกติ ยกเว้นเมื่อผู้ใช้เลือกรายการ #3 จากนั้นเลือกรายการ #2 หรือ #1

  • เมื่อรายการที่เลือกเปลี่ยนจาก #3->#1 ข้อความในรายการ #2 จะเป็นสีเทาเมื่อเทียบกับสีขาวปกติ
  • เมื่อรายการที่เลือกไปจาก #3->#2 ข้อความในรายการ #2 จะหายไปโดยสิ้นเชิง

หลังจากทดสอบและเอาหัวโขกโต๊ะมาหลายชั่วโมง ฉันก็ได้ค้นพบอะไรเพิ่มเติมอีกเล็กน้อย:

  • ความทึบของ MyButton หรือลูกๆ ของมันไม่เคยเปลี่ยนแปลง
  • สีขององค์ประกอบข้อความของ MyButton ไม่เคยเปลี่ยนแปลง
  • เนื้อหาขององค์ประกอบการทดสอบของ MyButton ไม่เคยเปลี่ยนแปลง
  • หลังจากออฟเซ็ตข้อความนอก MyButton บางส่วนแล้ว พฤติกรรมที่ผิดปกตินี้จะส่งผลต่อข้อความที่เหลืออยู่ภายในขอบเขตของลูก Image ของ MyButton เท่านั้น
  • ระดับ Z ของ MyButton หรือลูกๆ ของมันไม่เคยเปลี่ยนแปลง แม้ว่าจะดูเหมือนกับว่ารูปภาพของ MyButton วางอยู่ด้านบนของข้อความก็ตาม
  • รูปภาพอื่นจะไม่ถูกวางทับองค์ประกอบ MyButton หากเป็นกรณีนี้ เมื่อไปจาก #3->#1 คุณจะเห็นภาพของรายการ #2 เข้มขึ้น
  • เมื่อเลื่อน ListView ทุกอย่างจะกลับสู่สภาวะปกติ

เมื่อ ListView มี 4 องค์ประกอบ ด้านล่างนี้คือความผิดปกติ:

  • เมื่อ #4->#1: #2 และ #3 เป็นสีเทา
  • เมื่อ #4->#2: #2 หายไป
  • เมื่อ #4->#3: #3 หายไป
  • เมื่อ #3->#2: #2 หายไป
  • เมื่อ #3->#1: #2 กลายเป็นสีเทา

ซึ่งสอดคล้องกับรูปภาพและข้อความภายในคลาส MyButton ที่ถูกจัดเรียงใหม่ โดยวางรูปภาพไว้ที่ระดับ Z เหนือข้อความ อย่างไรก็ตาม ระดับ z ถูกบังคับในคำจำกัดความ MyButton และสัญญาณ onZChanged จะไม่ถูกสร้างขึ้นเมื่อเหตุการณ์เหล่านี้เกิดขึ้น

ด้านล่างเป็นรหัสที่เกี่ยวข้อง:

//MyButton:
import QtQuick 2.0

Item {
    id: button
    property string source: ""
    property string source_toggled: source
    property string button_text_alias: ""
    signal pressed
    width: button_image.sourceSize.width
    height: button_image.sourceSize.height
    property bool toggled: false

    Image{
        id: button_image
        z: 1
        source: toggled ? parent.source_toggled : parent.source

    }
    MyText{
        z: 2
        text_alias: button_text_alias
        anchors.centerIn: parent
    }

    MouseArea {
        id: button_mouse
        anchors.fill: parent
        onPressed: button.pressed()
    }
}


//ListView:
Component{
    id: p_button
    MyButton{
        source: picture_path + "bar.png"
        source_toggled: picture_path + "bar_selected.png"
        toggled: model.isCurrent
        onClicked: {
            profile_model.setCurrent(model.index)
        }
        button_text_alias: model.display
    }
}
ListView{
    id: p_list
    width: 623
    height: count*74 -1
    spacing: 1
    interactive: false
    model: p_model
    delegate: p_button
}

ฉันไม่สามารถนึกถึง - สิ่งใด - ที่อาจทำให้เกิดพฤติกรรมนี้ได้ .. มีความคิดเห็นใดบ้าง


person Paul Killam    schedule 21.04.2017    source แหล่งที่มา


คำตอบ (1)


ฉันสามารถแก้ไขข้อผิดพลาดนี้ได้โดยแบ่งผู้รับมอบสิทธิ์ออกเป็น:

Component{
    id: p_button
    Item{
        property bool toggled: model.isCurrent
        width: button_image.sourceSize.width
        height: button_image.sourceSize.height
        Image{
            id: button_image
            visible: !toggled
            source: picture_path + "bar.png"
        }
        Image{
            visible: toggled
            source: picture_path + "bar_selected.png"
        }
        MouseArea{
            anchors.fill: parent
            onClicked: p_model.setCurrent(model.index)
        }
        MyText{
            text_alias: model.display
            anchors.centerIn: parent
        }
    }
}

ดังนั้นแทนที่จะสลับแหล่งที่มาของวัตถุ มีวัตถุสองชิ้นที่มองเห็นได้/มองไม่เห็นตามค่าบูลีน การทำเช่นนี้ทำให้เกิดปัญหาได้ แม้ว่าฉันจะยังไม่ทราบสาเหตุก็ตาม

person Paul Killam    schedule 25.04.2017