首页 > 其他分享 >Qml 中的那些坑(七)---ComboBox嵌入Popup时,滚动内容超过其可见区域不会关闭ComboBox弹窗

Qml 中的那些坑(七)---ComboBox嵌入Popup时,滚动内容超过其可见区域不会关闭ComboBox弹窗

时间:2024-11-11 18:42:23浏览次数:4  
标签:__ Popup ComboBox --- item contentItem 弹窗

【写在前面】

最近在写信息提交 ( 表单 ) 的窗口时发现一个奇怪的 BUG:

其代码如下:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button{
        text: "open"
        onClicked: popup.open();
    }

    Popup {
        id: popup
        width: 400
        height: 200
        anchors.centerIn: parent
        clip: true
        closePolicy: Popup.CloseOnPressOutside
        background: Rectangle { color: "#80800000" }
        contentItem: Flickable {
            id: flickable
            clip: true
            topMargin: 10
            contentWidth: implicitWidth
            contentHeight: 500
            ScrollBar.vertical: ScrollBar { width: 14 }
            /*onMovementStarted: {
                for (let key in contentItem.children) {
                    let item = contentItem.children[key];
                    if (item.objectName === "__ComboBox__")
                        item.popup.close();
                }
            }*/

            ComboBox {
                width: 160
                height: 40
                objectName: "__ComboBox__"
                model: ["aaaaaa", "bbbbbb", "cccccc", "dddddd"]
            }
        }
    }
}

可以看到,当 ComboBox 嵌入 Popup 时,点开 ComboBox,然后滚动内容超过其可见区域并不会关闭 ComboBox 弹窗,并且会超出其 父 Popup 范围。


【正文开始】

实际上,这是几乎存在在 Qt 所有版本 ( Qt5 ~ Qt6 ) 的 BUG,猜测其主要原因为弹窗无法对内部嵌套弹窗进行裁剪,因为此弹窗 ( Popup ) 并非真正的窗口 ( Window )

该 BUG 我已报告给官方:https://bugreports.qt.io/browse/QTBUG-130960?filter=-2

不过,在官方修复的版本出来之前,我实现的改动较小的修复办法为:

  • Qt5 中为:
Flickable {
    ...
    onMovementStarted: {
        for (let key in contentItem.children) {
            let item = contentItem.children[key];
            if (item.objectName === "__ComboBox__")
                item.popup.close();
        }
    }

    ComboBox {
        ...
        objectName: "__ComboBox__"
    }
}
  • Qt6 中为:
Flickable {
    ...
    onMovementStarted: {
        for (let item of contentItem.children) {
            if (item.objectName === "__ComboBox__")
                item.popup.close();
        }
    }

    ComboBox {
        ...
        objectName: "__ComboBox__"
    }
}

只需要在当视图由于用户交互或生成的 flick() 而开始移动时,关闭掉 ComboBox 的弹窗即可。

修复后的效果如下:

image


【结语】

最后,要说明并非只有本文中的例子会有该 BUG,所有形如下面的代码都可能出现。

Popup {
    Popup {
        ...
    }
}

而修复思路也大致相似。

标签:__,Popup,ComboBox,---,item,contentItem,弹窗
From: https://www.cnblogs.com/mengps/p/18540330

相关文章

  • 算法求解 -- (炼码 3853 题)检查是否有路径经过相同数量的0和1
    文章目录1.问题描述2.解决方案概述3.具体实现4.示例解析5.总结1.问题描述给定一个下标从0开始的m×n的二进制矩阵grid,对于任意一个坐标(row,col)的元素,仅可以向右走(row,col+1)或者向下走(row+1,col)。现在从坐标(0,0)出发至终点(m−1,n−1),判断......
  • 实验05多重循环---7-08 幸运彩票
    彩票的号码有6位数字,若一张彩票的前3位上的数之和等于后3位上的数之和,则称这张彩票是幸运的。本题就请你判断给定的彩票是不是幸运的。输入格式:输入在第一行中给出一个正整数N(≤100)。随后N行,每行给出一张彩票的6位数字。输出格式:对每张彩票,如果它是幸运的,就......
  • 4-5-1.C# 数据容器 - Stack(Stack 的定义、Stack 元素的基本操作、Stack 元素的遍历、S
    Stack概述Stack<T>遵循后进先出的规则存储元素Stack<T>支持泛型,可以指定存储的元素的类型Stack<T>不是线程安全的,在多线程环境中需要谨慎使用一、Stack的定义定义StackStack<int>nums=newStack<int>();定义Stack并填充一些元素Stack<int>nums......
  • 4-4-1.C# 数据容器 - Queue(Queue 的定义、Queue 元素的基本操作、Queue 元素的遍历、Q
    Queue概述Queue<T>遵循先进先出的规则存储元素Queue<T>支持泛型,可以指定存储的元素的类型Queue<T>不是线程安全的,在多线程环境中需要谨慎使用一、Queue的定义定义QueueQueue<int>nums=newQueue<int>();定义Queue并填充一些元素Queue<int>nums=......
  • 4-3-2.C# 数据容器 - Dictionary 扩展(Dictionary 存储对象的特性、Dictionary 与数组
    Dictionary概述Dictionary<TKey,TValue>存储的是键值对(Key-Value),通过键(Key)来存储或修改值(Value)Dictionary<TKey,TValue>存储的键值对是无序的Dictionary<TKey,TValue>存储的键是不可重复的Dictionary<TKey,TValue>支持泛型,可以指定存储的键值对的类型D......
  • 4-3-1.C# 数据容器 - Dictionary(Dictionary 的定义、Dictionary 元素的基本操作、Dict
    Dictionary概述Dictionary<TKey,TValue>存储的是键值对(Key-Value),通过键(Key)来存储或修改值(Value)Dictionary<TKey,TValue>存储的键值对是无序的Dictionary<TKey,TValue>存储的键是不可重复的Dictionary<TKey,TValue>支持泛型,可以指定存储的键值对的类型D......
  • MVVM(Model-View-ViewModel)模型
    MVVM(ModelViewViewModel)模型是一种常用于软件开发中的架构模式,尤其在前端框架(如Vue.js、React、Angular)中被广泛应用。它将程序的用户界面与业务逻辑分离,便于维护和扩展。 MVVM的三个组成部分1.Model(模型):  表示应用程序的核心数据和业务逻辑。  处理数据的获取......
  • 20222301 2024-2025-1 《网络与系统攻防技术》实验五实验报告
    1.实验内容(1)从www.besti.edu.cn、baidu.com、sina.com.cn中选择一个DNS域名进行查询,获取如下信息:①DNS注册人及联系方式②该域名对应IP地址③IP地址注册人及联系方式④IP地址所在国家、城市和具体地理位置(2)尝试获取BBS、论坛、QQ、MSN中某一好友的IP地址,并查询获取该好友所......
  • 题解:P11062 【MX-X4-T2】「Jason-1」加法
    一道简单的分讨。思路可分成两种情况。当\(a\)和\(b\)同号时:这种情况,显而易见的是\(|a-b|\)的最小值必定是\(|a|,|b|,|a-b|\)之一。当\(a\)和\(b\)异号时:对\((a,b)\)执行欧几里得算法可以将一个变为\(0\),另一个变为\(\gcd(a,b)\)(忽略正负号)。再将\(0\)变......
  • 2024 CSP-S 游记
    时光荏苒,光阴似箭,新一轮CSP又过去了。(吐槽SD不允许JS同报。)10.25晚在家中打去年S组的T2,并不理解为什吗是蓝题,按理说DP式子挺好推的。10.26早上fqr还吓唬我们没带身份证。早晨在集合地询问fqr最小生成树的重载运算符是什么意思,菜。在车上的闲事:观看蓝书。......