如何使LWUIT列表相应地呈现每个项目内容的项目？

Question

我有一个LWUIT列表，其中包含代表Flight对象的项目，每个Flight项目显示其航班号，每个航班的出发和到达时间以及票价。

有些航班有两条航线（一条航线意味着航班的某段航班涉及中途停留，更换飞机或更换航空公司）所以这些航班项目需要与每条航班起飞时间和到达时间以及代码一起提供每条腿的起源和目的地。

首先，只有一条腿的物品会正常渲染，但是当我滚动列表并且开始渲染多条腿的物品时，物品会被错误地渲染，信息会被切断，更糟糕的是列表中的所有项目都受此影响，即使是只有一条腿的项目。

在此屏幕截图中，您可以在到达包含多条腿的项目之前查看列表项的外观：

然后，当我滚动列表并到达具有多条腿的项目时，所有项目都会在其腿部时间信息被剪切的情况下进行渲染，并且第一个项目的时间信息会粘贴在上面。他们的信息：

下面我提供了List Renderer类：

package com.yallaya.screens.elements;

import com.dotrez.model.Flight;
import com.dotrez.model.Segment;
import com.sun.lwuit.Component;
import com.sun.lwuit.Container;
import com.sun.lwuit.Font;
import com.sun.lwuit.Label;
import com.sun.lwuit.List;
import com.sun.lwuit.layouts.BoxLayout;
import com.sun.lwuit.list.ListCellRenderer;
import com.yallaya.Main;

/*
 * Renderer for a List of Flights to display
 */
public class FlightItem extends Container implements ListCellRenderer {

    /*
     * Components for this List Item
     */
    private Label flightNumberLbl = new Label("");
    private Label origin1Lbl = new Label("");
    private Label destination1Lbl = new Label("");
    private Label origin2Lbl = new Label("");
    private Label destination2Lbl = new Label("");
    private Label priceLbl = new Label("");

    /*
     * Constructor for this List Item
     */
    public FlightItem() {

        this.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
        this.getStyle().setBgColor(0xf0f0f0);
        this.getStyle().setBgTransparency(255);
        this.getStyle().setMargin(0, 0, 0, 0);
        this.getStyle().setPadding(5, 5, 0, 0);

        flightNumberLbl.getStyle().setMargin(14, 0, 0, 0);

        origin1Lbl.getStyle().setPadding(0, 0, 24, 0);
        origin1Lbl.getStyle().setMargin(0, 0, 0, 0);

        destination1Lbl.getStyle().setPadding(0, 0, 24, 0);
        destination1Lbl.getStyle().setMargin(0, 0, 0, 0);

        origin2Lbl.getStyle().setPadding(0, 0, 24, 0);
        origin2Lbl.getStyle().setMargin(0, 0, 0, 0);

        destination2Lbl.getStyle().setPadding(0, 0, 24, 0);
        destination2Lbl.getStyle().setMargin(0, 0, 0, 0);

        priceLbl.getStyle().setPadding(0, 0, 24, 0);
        priceLbl.getStyle().setMargin(14, 0, 0, 0);
        priceLbl.getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM));

        this.addComponent(flightNumberLbl);
        this.addComponent(origin1Lbl);
        this.addComponent(destination1Lbl);
        this.addComponent(origin2Lbl);
        this.addComponent(destination2Lbl);
        this.addComponent(priceLbl);

    }

    public void updateColorItem(boolean isSelected){
        if(isSelected){
            this.getStyle().setBgColor(0x9a3d96);
            flightNumberLbl.getStyle().setFgColor(0xffffff);
            origin1Lbl.getStyle().setFgColor(0xffffff);
            destination1Lbl.getStyle().setFgColor(0xffffff);
            origin2Lbl.getStyle().setFgColor(0xffffff);
            destination2Lbl.getStyle().setFgColor(0xffffff);
            priceLbl.getStyle().setFgColor(0xffffff);
        }
        else{
            this.getStyle().setBgColor(0xffffff);
            flightNumberLbl.getStyle().setFgColor(0x9a3d96);
            origin1Lbl.getStyle().setFgColor(0x555555);
            destination1Lbl.getStyle().setFgColor(0x555555);
            origin2Lbl.getStyle().setFgColor(0x555555);
            destination2Lbl.getStyle().setFgColor(0x555555);
            priceLbl.getStyle().setFgColor(0x555555);
        }
    }

    /*
     * Functions called to render this List Item
     */
    public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected) {

        Flight tmp = (Flight) value;
        int displayIndex = index + 1;
        flightNumberLbl.setText(displayIndex +  ". " + Main.localize("VUELO") + " #" + tmp.getFlightNumber());
        Segment tmpSeg = (Segment) tmp.getSegments().elementAt(0);

        String originStr = Main.localize("SALIDA") + " " + "(" + tmpSeg.getOrigin().getCode() + ")" + ": " + tmpSeg.getDepartureTimeString();
        String destinationStr = Main.localize("LLEGADA") + "(" + tmpSeg.getDestination().getCode() + ")" + ": " + tmpSeg.getArrivalTimeString() + "";

        origin1Lbl.setText(originStr);
        destination1Lbl.setText(destinationStr);

        if(tmp.getSegments().size() > 1){

            tmpSeg = (Segment) tmp.getSegments().elementAt(1);

            originStr = Main.localize("SALIDA") + " " + "(" + tmpSeg.getOrigin().getCode() + ")" + ": " + tmpSeg.getDepartureTimeString();
            destinationStr = Main.localize("LLEGADA") + "(" + tmpSeg.getDestination().getCode() + ")" + ": " + tmpSeg.getArrivalTimeString() + "";

            origin2Lbl.setText(originStr);
            destination2Lbl.setText(destinationStr);
        }
        /************************************************************************/
        /******************* UPDATE PIECE OF CODE STARTS HERE *******************/
        /************************************************************************/
        else{
            origin2Lbl.setText("");
            destination2Lbl.setText("");
        }
        /************************************************************************/
        /******************* UPDATE PIECE OF CODE ENDS HERE *******************/
        /************************************************************************/

        priceLbl.setText("$" + tmp.getAdultFare() + " " + tmp.getCurrency().getCode());

        updateColorItem(isSelected);

        return this;
    }

    /*
     * Function called to get this component when it get focus
     */
    public Component getListFocusComponent(List list) {
        return this;
    }

}

在其他平台上，我认为这个问题被称为“重影”，但我还没有找到一种方法来避免在诺基亚Asha的LWUIT中使用它。

我知道因为同一个渲染器用于渲染所有项目，所以这可能是导致问题的原因，在这种情况下，我需要一种方法在需要时以不同的方式渲染一个项目。

当其中一个项目必须显示不同长度的信息时，如何避免更改列表中的每个项目？

修改

我更新了我的代码，现在如果当前的Flight对象没有多条腿，那么我用空字符串设置第二条腿的标签，这解决了只有一条腿的物品的问题。

因此，我将问题的主题更改为具有多条腿的Flight项目上的问题，项目未正确调整大小并且没有找到方法来调整每个项目的内容，所有它们的颜色大小相同。

如何确保物品高度正确调整？

编辑2

我试图在if子句中更改渲染器的高度，我使用this.setHeight(800);检查了多少条腿（在模型中称为段）：

    if(tmp.getSegments().size() > 1){
        .....
        flightHolder.setHeight(800);
        this.setHeight(800);
    }
    else{
        .....
        flightHolder.setHeight(200);
        this.setHeight(200);
    }

但使用该方法无法获得不同的身高。

然后我尝试使用this.preferredH(800);并最终改变了大小：

    if(tmp.getSegments().size() > 1){
        ......
        flightHolder.setPreferredH(800);
        this.setPreferredH(800);
    }
    else{
        ...........
        flightHolder.setPreferredH(200);
        this.setPreferredH(200);
    }

但是所有物品都是用800渲染的，我猜这是因为最后一次飞行有多条腿，但我真的不知道，我希望为一条腿以上的航班设置更大的高度然后重置为较小的高度，只有一个人可以工作，但似乎每个项目的高度都相同，有人可以向我确认吗？

Answer 1

好。试试这个：

首先，您需要声明一个全局变量来保存默认行高。然后在构造函数中执行.setPreferredHeight（到默认高度全局变量）。

现在在你的：

if(tmp.getSegments().size() > 1){

将全局变量行高设置为*（乘以）除以段数，您应该具有正确的行高。

您可以使用边距/填充类似，使用段数来相应地定位元素。

我希望这会有所帮助，让我知道你是怎么过的。

菲尼克斯