GWT动态加载：构建不关闭的自定义下拉菜单

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Anchor; // 或者Button作为Load More
import com.google.gwt.user.client.Window; // 用于模拟异步回调

public class CustomDropdown extends Composite {

    private Button dropdownButton;
    private PopupPanel popupPanel;
    private VerticalPanel contentPanel; // 存放列表项和“加载更多”按钮
    private Anchor loadMoreAnchor; // 或者Button
    private int currentItemCount = 0;
    private final int ITEMS_PER_LOAD = 5;

    public CustomDropdown() {
        initUI();
    }

    private void initUI() {
        dropdownButton = new Button("选择项目");
        dropdownButton.addStyleName("custom-dropdown-button"); // 自定义CSS样式

        contentPanel = new VerticalPanel();
        contentPanel.addStyleName("custom-dropdown-content");

        popupPanel = new PopupPanel(true); // true表示点击外部区域自动关闭
        popupPanel.add(contentPanel);
        popupPanel.addStyleName("custom-dropdown-popup");

        // 初始加载一些数据
        loadInitialItems();

        // 为下拉按钮添加点击事件
        dropdownButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                if (!popupPanel.isShowing()) {
                    // 显示PopupPanel，并定位在按钮下方
                    popupPanel.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
                        @Override
                        public void setPosition(int offsetWidth, int offsetHeight) {
                            int left = dropdownButton.getAbsoluteLeft();
                            int top = dropdownButton.getAbsoluteTop() + dropdownButton.getOffsetHeight();
                            popupPanel.setPopupPosition(left, top);
                        }
                    });
                } else {
                    popupPanel.hide();
                }
            }
        });

        initWidget(dropdownButton); // 将按钮作为主组件
    }

    private void loadInitialItems() {
        // 清除现有内容（如果需要）
        contentPanel.clear();
        currentItemCount = 0;
        // 模拟加载前5个项目
        addItems(ITEMS_PER_LOAD);
        addLoadMoreButton();
    }

    private void addItems(int count) {
        for (int i = 0; i < count; i++) {
            Label item = new Label("项目 " + (currentItemCount + 1));
            item.addStyleName("custom-dropdown-item");
            // 为每个项目添加点击事件 (可选，根据需求决定是否关闭popup)
            item.addClickHandler(e -> {
                Window.alert("选择了: " + item.getText());
                // popupPanel.hide(); // 点击项目后是否关闭，根据需求决定
            });
            contentPanel.add(item);
            currentItemCount++;
        }
    }

    private void addLoadMoreButton() {
        // 移除旧的“加载更多”按钮（如果存在）
        if (loadMoreAnchor != null && contentPanel.getWidgetIndex(loadMoreAnchor) != -1) {
            contentPanel.remove(loadMoreAnchor);
        }

        loadMoreAnchor = new Anchor("加载更多...");
        loadMoreAnchor.addStyleName("custom-dropdown-load-more");
        loadMoreAnchor.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                // 模拟异步加载
                Window.alert("正在加载更多数据...");
                // 实际应用中这里会发起RPC调用
                // AsyncCallback<List<String>> callback = new AsyncCallback<List<String>>() {...}

                // 移除“加载更多”按钮
                contentPanel.remove(loadMoreAnchor);

                // 模拟加载更多数据
                addItems(ITEMS_PER_LOAD);

                // 重新添加“加载更多”按钮到末尾
                addLoadMoreButton();

                // 关键：保持PopupPanel打开
                // popupPanel.show(); // 实际上不需要再次调用show，因为它本来就没关闭
            }
        });
        contentPanel.add(loadMoreAnchor);
    }
}

/* custom-dropdown.css */

/* 下拉按钮样式 */
.custom-dropdown-button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    min-width: 150px;
    text-align: left;
    position: relative;
}

.custom-dropdown-button::after {
    content: '▼'; /* 下拉箭头 */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* 弹出面板样式 */
.custom-dropdown-popup {
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    background-color: #fff;
    border-radius: 4px;
    max-height: 200px; /* 限制高度，允许滚动 */
    overflow-y: auto;
    z-index: 1000; /* 确保在其他元素之上 */
}

/* 列表内容面板样式 */
.custom-dropdown-content {
    padding: 5px 0;
    min-width: 150px; /* 与按钮宽度一致 */
}

/* 列表项样式 */
.custom-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap; /* 防止文本换行 */
}

.custom-dropdown-item:hover {
    background-color: #e0e0e0;
}

/* 加载更多按钮样式 */
.custom-dropdown-load-more {
    display: block; /* 确保占据整行 */
    padding: 8px 12px;
    text-align: center;
    color: #007bff;
    cursor: pointer;
    text-decoration: none;
}

.custom-dropdown-load-more:hover {
    background-color: #f0f0f0;
    text-decoration: underline;
}