时间戳

首页 > 解决方案 > 代号一 - ComponentGroup + Accordions + Toggle Buttons 的滚动

codenameone - 代号一 - ComponentGroup + Accordions + Toggle Buttons 的滚动

问题描述

我有一个嵌套了 ComponentGroup + Accordions + Toggle Buttons 的表单（带有 BoxLayout.y）。当用户展开 Accordions（在 ComponentGroup 内）时，Toggle Buttons 列表（在 Accordions 内）很长并且不适合屏幕。

问题是表单（由 ComponentGroup + Accordions + Toggle Buttons 占据）不可滚动，我想是因为触摸的含义不明确（可能是用于选择列表中的项目或进行滚动） . 但是，我想在用户的脑海中并没有真正的歧义：如果用户做了一个简单的点击，那么他/她正在选择一个项目；如果用户点击然后移动手指而不停止点击，那么他/她正在尝试进行滚动。我想这是用户心目中的预期行为......否则，如果主 ComponentGroup 占据了所有屏幕，则滚动变得不可能（这是我的情况）。

目前，我发现了一个部分不令人满意的解决方案，在主 ComponentGroup 中添加了几毫米的填充，因此屏幕边框上几乎没有空间来进行滚动。但是它并不直观，因为用户通常希望能够在表单的任何位置滚动。

我的问题是如何在所有表单中启用滚动。

以下代码是代码结构的示例。实际代码由我编写的复杂解析器生成，它从 json 输入自动生成 UI：

Form hi = new Form("Hi World", BoxLayout.y());

// Warning: you need to set the theme property "ComponentGroupBool" to true
Button button1 = new Button("Button 1", "ButtonMenuCategories");
CheckBox button11 = CheckBox.createToggle("Button 1.1");
CheckBox button12 = CheckBox.createToggle("Button 1.2");
Button button13 = new Button("Button 1.3", "ButtonMenuCategories");
CheckBox button131 = CheckBox.createToggle("Button 1.3.1");
CheckBox button132 = CheckBox.createToggle("Button 1.3.2");
CheckBox button133 = CheckBox.createToggle("Button 1.3.3");
CheckBox button14 = CheckBox.createToggle("Button 1.4");
Button button2 = new Button("Button 2", "ButtonMenuCategories");
Button button3 = new Button("Button 3", "ButtonMenuCategories");
Button button4 = new Button("Button 4", "ButtonMenuCategories");
Button button5 = new Button("Button 5", "ButtonMenuCategories");

Accordion accordion13 = new Accordion();
accordion13.addContent(button13, FlowLayout.encloseCenter(ComponentGroup.enclose(button131, button132, button133)));
Accordion accordion1 = new Accordion();
accordion1.addContent(button1, FlowLayout.encloseCenter(ComponentGroup.enclose(button11, button12, accordion13, button14)));
Accordion accordion2 = new Accordion();
accordion2.addContent(button2, new Label("Hello"));
Accordion accordion3 = new Accordion();
accordion3.addContent(button3, new Label("Hello"));
Accordion accordion4 = new Accordion();
accordion4.addContent(button4, new Label("Hello"));
Accordion accordion5 = new Accordion();
accordion5.addContent(button5, new Label("Hello"));

Container menu = FlowLayout.encloseCenter(ComponentGroup.enclose(accordion1, accordion2, accordion3, accordion4, accordion5));

hi.add(menu);
hi.show();

标签： codenameone

解决方案

默认情况下，Form内容窗格是可滚动的，除非您使用setScrollableY(false). 当您设置时，BorderLayout这也是为您隐式完成的。由于您使用BoxLayout的内容Form是可滚动的（在大多数情况下应该是这样）。

但是，Accordion它也是可滚动的，这意味着您有两个嵌套的可滚​​动组件。我很难想象你在这里看到/感受到什么，但有一个明显的错误，你错过了：

accordion13.setScrollableY(false);
accordion1.setScrollableY(false);
accordion2.setScrollableY(false);
//... etc ...

推荐阅读