Got it, let's break down how to grab only the visible items in your Tree Widget as you scroll—this is a smart optimization to avoid wasting resources on processing every single node when you only care about what's on screen. Here's how to approach it across common frameworks and scenarios:

The core idea is two-fold:

• Identify the visible viewport: Get the rectangle of the Tree Widget's scrollable area.
• Check item visibility: For each tree item, verify if it intersects with the viewport (and is actually visible, i.e., not hidden by a collapsed parent).
• Optimize for large trees: Instead of iterating every single node, use framework APIs to find the first/last visible items and only process the range in between.

Qt Tree Widget #

Qt has built-in methods to make this straightforward. Here's a practical snippet:

// Get the Tree Widget's viewport bounds
QRect visibleRect = ui->treeWidget->viewport()->rect();

// Find the first and last visible items (using viewport coordinates)
QTreeWidgetItem* firstVisible = ui->treeWidget->itemAt(visibleRect.topLeft());
QTreeWidgetItem* lastVisible = ui->treeWidget->itemAt(visibleRect.bottomLeft());

if (!firstVisible || !lastVisible) return {};

QList<QTreeWidgetItem*> visibleItems;

// Recursively collect visible items (including expanded children)
auto collectVisible = [&](QTreeWidgetItem* item) {
    // Check if the item's on-screen rect overlaps with the viewport
    if (ui->treeWidget->visualItemRect(item).intersects(visibleRect)) {
        visibleItems.append(item);
        // If the item is expanded, check its children too
        if (item->isExpanded()) {
            for (int i = 0; i < item->childCount(); ++i) {
                collectVisible(item->child(i));
            }
        }
    }
};

// Start collecting from the first visible item's top-level parent (covers all visible nodes)
QTreeWidgetItem* current = firstVisible;
while (current->parent()) current = current->parent();
collectVisible(current);

// Now visibleItems contains only what's in the viewport!

Web (Native JS + HTML Tree) #

If you're working with a custom HTML tree (e.g., nested <ul>/<li>), use getBoundingClientRect() to check visibility:

function getVisibleTreeItems(treeContainer) {
    const visibleItems = [];
    const viewportRect = treeContainer.getBoundingClientRect();
    const allTreeItems = treeContainer.querySelectorAll('.tree-item');

    allTreeItems.forEach(item => {
        const itemRect = item.getBoundingClientRect();
        // Check two things: 1) item overlaps with viewport, 2) item isn't hidden by a collapsed parent
        const isInViewport = 
            itemRect.top <= viewportRect.bottom && 
            itemRect.bottom >= viewportRect.top;
        const isVisible = getComputedStyle(item).display !== 'none';

        if (isInViewport && isVisible) {
            visibleItems.push(item);
        }
    });

    return visibleItems;
}

// Attach to scroll event to update on scroll
document.getElementById('tree-container').addEventListener('scroll', () => {
    const visibleItems = getVisibleTreeItems(document.getElementById('tree-container'));
    console.log('Current visible items:', visibleItems);
});

React (Virtual Scrolling for Large Trees) #

For large React trees, use a virtual scrolling library like react-window to handle visibility out of the box. Here's a simplified example:

import { FixedSizeList } from 'react-window';
import { useState } from 'react';

// Custom Tree Item component
const TreeItem = ({ node, isExpanded, onToggle, style }) => (
    <div style={style}>
        <button onClick={onToggle}>{isExpanded ? '▼' : '▶'}</button>
        {node.label}
    </div>
);

const VirtualTree = ({ treeData }) => {
    const [expandedKeys, setExpandedKeys] = useState(new Set());

    // Flatten tree to only include visible nodes (based on expanded state)
    const getVisibleNodes = (data, expanded) => {
        let result = [];
        data.forEach(node => {
            result.push(node);
            if (expanded.has(node.id) && node.children) {
                result = [...result, ...getVisibleNodes(node.children, expanded)];
            }
        });
        return result;
    };

    const visibleNodes = getVisibleNodes(treeData, expandedKeys);

    // Handle scroll to get visible range
    const handleScroll = ({ scrollTop }) => {
        const itemHeight = 30; // Fixed height per item
        const startIdx = Math.floor(scrollTop / itemHeight);
        const endIdx = Math.min(startIdx + Math.floor(window.innerHeight / itemHeight), visibleNodes.length - 1);
        
        const visibleItems = visibleNodes.slice(startIdx, endIdx + 1);
        console.log('Visible tree items:', visibleItems);
    };

    return (
        <FixedSizeList
            height={500}
            itemCount={visibleNodes.length}
            itemSize={30}
            onScroll={handleScroll}
        >
            {({ index, style }) => (
                <TreeItem
                    node={visibleNodes[index]}
                    isExpanded={expandedKeys.has(visibleNodes[index].id)}
                    onToggle={() => {
                        const newExpanded = new Set(expandedKeys);
                        newExpanded.has(visibleNodes[index].id) 
                            ? newExpanded.delete(visibleNodes[index].id) 
                            : newExpanded.add(visibleNodes[index].id);
                        setExpandedKeys(newExpanded);
                    }}
                    style={style}
                />
            )}
        </FixedSizeList>
    );
};

• Always account for collapsed parents: Even if an item is in the viewport bounds, if its parent is collapsed, it's not actually visible—don't include it.
• Performance matters: For trees with hundreds/thousands of nodes, avoid full traversals. Use framework APIs to get visible bounds first (like Qt's itemAt or React virtual scroll's range).
• Dynamic item heights: If your tree items have variable heights, adjust the visibility check to use accurate bounding rects instead of fixed size calculations.

内容的提问来源于stack exchange，提问作者Hacker6914