项目运行时表格内星级排名控件显示在表格外的问题咨询

我一眼就看出问题出在哪了！你当前的写法犯了两个关键错误，直接导致Slider跑到表格外、列里显示文本的问题：

• 你额外调用了add(createStarRankSlider(...))，这会把Slider直接添加到Form上，自然就脱离表格布局跑到外面了；
• Codename One的Table默认会把单元格内的对象转成字符串显示，所以列里出现的其实是Slider对象的toString()结果，而非渲染出滑块组件。

正确的解决步骤 #

1. 修正表格行数据

先把rows数组里的最后一列换成文章ID（用来绑定Slider的更新逻辑），不要直接放Slider，也别调用add()把Slider加到Form上：

rows[iter] = new Object[]{
    articles.get(iter).getName(),
    articles.get(iter).getDescription(),
    articles.get(iter).getLabel(),
    articles.get(iter).getQuantity(),
    articles.get(iter).getRating(),
    articles.get(iter).getId_article() // 替换成文章ID，后续渲染Slider时用
};

2. 给表格列设置自定义单元格渲染器

创建Table后，给最后一列（索引为5，因为数组从0开始）设置自定义渲染器，让它在单元格内渲染Slider组件：

Table table = new Table(model);
// 为第6列设置自定义渲染器
table.setCellRenderer(5, new DefaultTableModel.DefaultTableRenderer(false) {
    @Override
    public Component getCellComponent(Table table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
        // 获取当前行的文章ID
        int articleId = (Integer) value;
        // 创建星级Slider
        Slider starRank = createStarRankSlider(articleId);
        // 从表格模型中获取当前行的评分值，设置给Slider
        int currentRating = (Integer) table.getModel().getValueAt(row, 4);
        starRank.setValue(currentRating);
        // 返回Slider作为单元格组件
        return starRank;
    }
});

3. 调整Slider创建方法的细节

还要修正一个逻辑错误：你原来用starRank.getIncrements()获取的是滑块步长，不是当前选中的评分值，应该改成starRank.getValue()；另外可以按需调整Slider的尺寸适配单元格：

private Slider createStarRankSlider(int id) {
    Slider starRank = new Slider();
    starRank.setEditable(true);
    starRank.setMinValue(0);
    starRank.setMaxValue(10);
    int fontSize = Display.getInstance().convertToPixels(3);
    Font fnt = Font.createTrueTypeFont("Handlee", "Handlee-Regular.ttf").derive(fontSize, Font.STYLE_PLAIN);
    Style s = new Style(0xffff33, 0, fnt, (byte) 0);
    Image fullStar = FontImage.createMaterial(FontImage.MATERIAL_STAR, s).toImage();
    s.setOpacity(100);
    s.setFgColor(0);
    Image emptyStar = FontImage.createMaterial(FontImage.MATERIAL_STAR, s).toImage();
    initStarRankStyle(starRank.getSliderEmptySelectedStyle(), emptyStar);
    initStarRankStyle(starRank.getSliderEmptyUnselectedStyle(), emptyStar);
    initStarRankStyle(starRank.getSliderFullSelectedStyle(), fullStar);
    initStarRankStyle(starRank.getSliderFullUnselectedStyle(), fullStar);
    // 可以去掉固定尺寸，让表格单元格自动适配，或者按需调整
    // starRank.setPreferredSize(new Dimension(fullStar.getWidth() * 5, fullStar.getHeight()));
    starRank.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent evt) {
            // 用getValue()获取当前选中的评分值
            ServiceTask.getInstance().UpdateRank(id, starRank.getValue());
        }
    });
    return starRank;
}

这样修改后，Slider就会正确渲染在表格的对应单元格内，不会跑到表格外部，列里也不会显示无用的文本了。

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