Codenameone 重新访问应用程序屏蔽门（材料屏蔽门）

我正在尝试在我的应用程序上创建一个类似于城市指南登录屏幕（2）的登录屏幕：

我从Materiall Design Demo和PSD上的博客到应用程序重访博客使用了以下代码作为我的表单：

        f = new Form(new BorderLayout());
    f.setUIID("loginForm");
    f.getTitleArea().setUIID("Container");
    f.getToolbar().hideToolbar();
    Label logo = new Label();
    logo.setIcon(theme.getImage("logoHolder.png"));
    Container titleContainer = Container.encloseIn(
            new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER),
            logo, BorderLayout.CENTER);
    titleContainer.setUIID("loginTitleContainer");

    TextField login = new TextField("", "Your email address", 40, TextField.EMAILADDR);
    TextField password = new TextField("", "Your password", 40, TextField.PASSWORD);
    login.getAllStyles().setMargin(LEFT, 0);
    password.getAllStyles().setMargin(LEFT, 0);
    Label loginIcon = new Label("", "TextField");
    Label passwordIcon = new Label("", "TextField");
    loginIcon.getAllStyles().setMargin(RIGHT, 0);
    passwordIcon.getAllStyles().setMargin(RIGHT, 0);
    FontImage.setMaterialIcon(loginIcon, FontImage.MATERIAL_MAIL_OUTLINE, 3);
    FontImage.setMaterialIcon(passwordIcon, FontImage.MATERIAL_LOCK_OUTLINE, 3);

    Button loginButton = new Button();
    loginButton.setIcon(theme.getImage("login_login.png"));
    loginButton.setUIID("removePadding");
    Button exitButton = new Button();
    exitButton.setIcon(theme.getImage("login_exit.png"));
    exitButton.setUIID("removePadding");
    Button forgotButton = new Button("Forgot password?");
    forgotButton.setUIID("forgotPass");

    Label vSpacer = new Label();
    vSpacer.setUIID("longVSpacer");
    Label vSpacer1 = new Label();
    vSpacer1.setUIID("longVSpacer");
    Label vSpacer2 = new Label();
    vSpacer2.setUIID("vSpacer");
    Label vSpacer3 = new Label();
    vSpacer3.setUIID("vSpacer");

    Container loginCon = BoxLayout.encloseY(
            vSpacer1,
            BorderLayout.center(login).
                    add(BorderLayout.WEST, loginIcon),
            BorderLayout.center(password).
                    add(BorderLayout.WEST, passwordIcon),
            vSpacer,
            loginButton,
            vSpacer2,
            exitButton,
            vSpacer3,
            forgotButton
    );

    f.add(BorderLayout.NORTH, titleContainer);
    f.add(BorderLayout.CENTER, loginCon);
    f.show();

现在，对于UIID，“removePadding”将所有填充设置为零，并将左边距设置为3

vSpacer设置了顶部和底部边距，以便在垂直方向上允许合理的空间

当我没有将文本字段添加到框布局时，一切正常，但一旦我将任何文本字段添加到框布局中，north容器将从左到右收缩，并且不会覆盖整个宽度

但是当从框布局中删除文本字段并添加按钮时，例如，north容器覆盖了整个宽度

我试着玩按钮UIID“removePadding”填充和边距，但一点运气都没有

以下是在边框布局中添加文本字段以及图标时我的屏幕的外观：

以下是当我从框布局中删除文本字段，只保留按钮时屏幕的外观：

此外，文本字段在未选择的UIID上都有下划线图像。但是，电子邮件字段在未选中时不会显示下划线，而在未选中时，只有密码字段显示下划线。这看起来像个虫子

替换：

TextField tf = new TextField("Hello");
tf.setWidth(300);

与：

调用

setWidth

总是一个错误，布局管理器将根据运行时确定的首选大小调整UI的大小。300像素在高DPI手机上太小，在低DPI设备上太大。构造函数的第二种形式接受columns属性的值，该值根据字符宽度（例如字母W*5的宽度）确定文本字段的宽度。

替换：

TextField tf = new TextField("Hello");
tf.setWidth(300);

与：

---

调用

setWidth

总是一个错误，布局管理器将根据运行时确定的首选大小调整UI的大小。300像素在高DPI手机上太小，在低DPI设备上太大。构造函数的第二种形式接受columns属性的值，该值根据字符宽度（例如字母W*5的宽度）确定文本字段的宽度。

屏幕截图会有所帮助…亲爱的Shai感谢您的及时回复。实际上，我没有在布局中使用变量tf。我在我的框布局中使用登录、登录、密码和密码图标、登录按钮、退出按钮和放弃按钮。此框布局在窗体边框布局中居中。问题是当我在框布局中使用文本字段：login和password时，居中的框布局会向右移动，而北标题容器会从左向右收缩。请帮助我，这对我的申请非常重要！！！当使用模拟器中的component inspector工具查看占用空间的内容时，即使没有设置大小的textfield也会导致相同的问题。这不是文本字段，因为它们显然没有延伸到那里。由于标题区域位于北部，它应该与文本字段相关的区域完全分开，因此这意味着某些内容正在改变表单的整个内容。从简短的回顾中，我怀疑这一行

f.setUIID（“loginForm”）男人！！！你是最棒的！！！万分感谢！！！很乐意帮忙。顺便说一句，与其说谢谢，不如说这些会有帮助：接受答案和投票表决也会很好；-）屏幕截图会有帮助…亲爱的Shai谢谢你的及时回复。实际上，我没有在布局中使用变量tf。我在我的框布局中使用登录、登录、密码和密码图标、登录按钮、退出按钮和放弃按钮。此框布局在窗体边框布局中居中。问题是当我在框布局中使用文本字段：login和password时，居中的框布局会向右移动，而北标题容器会从左向右收缩。请帮助我，这对我的申请非常重要！！！当使用模拟器中的component inspector工具查看占用空间的内容时，即使没有设置大小的textfield也会导致相同的问题。这不是文本字段，因为它们显然没有延伸到那里。由于标题区域位于北部，它应该与文本字段相关的区域完全分开，因此这意味着某些内容正在改变表单的整个内容。从简短的回顾中，我怀疑这一行
f.setUIID（“loginForm”）男人！！！你是最棒的！！！万分感谢！！！很乐意帮忙。顺便说一句，与其说谢谢，不如说这些会有帮助：接受答案和投票表决也会很好；-）