用户界面-Libgdx，stage在android上运行时创建重复的小部件

Question

我正试图在屏幕上显示一个TextField。当桌面版本运行时，它运行得很好，但当我运行android版本时，文本字段会重复，背景也会混乱。

屏幕截图

屏幕类别代码：

public class SetupScreen implements Screen
{
    private Stage stage;
    private Table table;
    private TextField paymentField;
    @Override
    public void show()
    {
        stage = new Stage();
        Gdx.input.setInputProcessor(stage);
        table = new Table();
        table.setFillParent(true);
        stage.addActor(table);
        Pixmap bgPixmap = new Pixmap(1, 1, Format.RGBA8888);
        bgPixmap.setColor(Color.GRAY);
        bgPixmap.fill();
        Texture bgTexture = new Texture(bgPixmap);
        Pixmap cursorPixmap = new Pixmap(1, 1, Format.RGBA8888);
        cursorPixmap.setColor(Color.WHITE);
        cursorPixmap.fill();
        Texture cursorTexture = new Texture(cursorPixmap);
        Pixmap selPixmap = new Pixmap(1, 1, Format.RGBA8888);
        selPixmap.setColor(Color.BLUE);
        selPixmap.fill();
        Texture selTexture = new Texture(selPixmap);
        TextFieldStyle textFieldStyle = new TextFieldStyle();
        textFieldStyle.background = new SpriteDrawable(new Sprite(bgTexture));
        textFieldStyle.cursor = new SpriteDrawable(new Sprite(cursorTexture));
        textFieldStyle.selection = new SpriteDrawable(new Sprite(selTexture));
        textFieldStyle.font = new BitmapFont();
        textFieldStyle.fontColor = Color.WHITE;
        paymentField = new TextField("", textFieldStyle);
        paymentField.setMessageText("Pay Rate");
        table.add(paymentField);
    }
    @Override
    public void render(float delta)
    {
        stage.act(delta);
        stage.draw();
    }
    @Override
    public void resize(int width, int height)
    {
        stage.getViewport().update(width, height);
    }
    @Override
    public void pause()
    {
    }
    @Override
    public void resume()
    {
    }
    @Override
    public void hide()
    {
    }
    @Override
    public void dispose()
    {
        stage.dispose();
    }
}

Answer 1

您的屏幕完全混乱，因为您没有在每帧的开头清除屏幕。

@Override
public void render(float delta) {
    Gdx.gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
    stage.act(delta);
    stage.draw();
}

UI需要注意的另一件事是，您应该将相机居中。否则，用户界面的左下角将位于屏幕的中间。

您可以使用Viewport.update()方法的最后一个参数来执行此操作。

@Override
public void resize(int width, int height) {
    stage.getViewport().update(width, height, true);
}