什么是组件_webview组件

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

1. FlowPanel 普通容器

1         //普通的容器,使用HTML默认的布局行为
2         FlowPanel flowPanel = new FlowPanel();
3         flowPanel.add(new Label("flowPanel"));
4         flowPanel.add(new Label("flowPanel"));
5 
6         for(int i = 0;i < 10;i++){
7             flowPanel.add(new RadioButton("test",String.valueOf(i)));
8         };

什么是组件_webview组件

2. HorizontalPanel 元素水平排列的容器

1         //元素水平排列的容器
2         HorizontalPanel horizontalPanel = new HorizontalPanel();
3         horizontalPanel.add(new Label("horizontalPanel"));
4 
5         for(int i = 0;i < 10;i++){
6             horizontalPanel.add(new RadioButton("test1",String.valueOf(i)));
7         };

3. VerticalPanel 元素垂直排列的容器

1         //元素垂直排列的容器
2         VerticalPanel verticalPanel = new VerticalPanel();
3         verticalPanel.add(new Label("VerticalPanel"));
4 
5         for(int i = 0;i < 10;i++){
6             verticalPanel.add(new RadioButton("test2",String.valueOf(i)));
7         };
8         rootPanel.add(verticalPanel);

4. FlexTable 弹性表格

 1         //弹性表格
 2         FlexTable flexTable = new FlexTable();
 3 
 4         //设置单元格的外边距
 5         flexTable.setCellSpacing(10);
 6         //设置单元格的内边距
 7         flexTable.setCellPadding(2);
 8         //设置单元格的边框粗细
 9         flexTable.setBorderWidth(2);
10 
11         //获取单元格格式编辑器
12         FlexTable.FlexCellFormatter flexCellFormatter = flexTable.getFlexCellFormatter();
13 
14         flexTable.setWidget(0,0,new Button("点击"));
15         //设置合并列的数量
16         flexCellFormatter.setColSpan(0,0,2);
17         //设置合并行的数量
18         flexCellFormatter.setWidth(0,0,"500px");
19 
20         //给单元格添加元素
21         flexTable.setWidget(1,0,new Button("点击"));
22         flexTable.setWidget(1,1,new Button("点击"));
23         flexTable.setWidget(2,0,new Button("点击"));
24         flexTable.setWidget(2,1,new Button("点击"));
25 
26         flexTable.setWidget(0,1,new Button("点击"));
27         flexCellFormatter.setRowSpan(0,1,3);
28         flexCellFormatter.setWidth(0,1,"200px");

5. Grid 网格

1         //grid网格，需要设置初始大小
2         Grid grid = new Grid(2,2);
3 
4         grid.setWidget(0,0,new HTML("你好"));
5         grid.setWidget(1,1,new HTML("结束"));

6. DeckPanel

 1         //实现类似于在同一个位置进行切换的效果
 2         DeckPanel deckPanel = new DeckPanel();
 3 
 4         deckPanel.setSize("300px","200px");
 5         deckPanel.add(new Label("标签1"));
 6         deckPanel.add(new Label("标签2"));
 7         deckPanel.add(new Label("标签3"));
 8         //根据索引来显示对应的Widget,按照添加的顺序来
 9         deckPanel.showWidget(0);
10         HorizontalPanel horizontalPanel1 = new HorizontalPanel();
11 
12         Button button = new Button("显示标签1");
13         Button button1 = new Button("显示标签2");
14         Button button2 = new Button("显示标签3");
15 
16         button.addClickHandler(new ClickHandler() {
17             @Override
18             public void onClick(ClickEvent event) {
19                 //显示对应位置
20                 deckPanel.showWidget(0);
21             }
22         });
23         button1.addClickHandler(new ClickHandler() {
24             @Override
25             public void onClick(ClickEvent event) {
26                 deckPanel.showWidget(1);
27             }
28         });
29         button2.addClickHandler(new ClickHandler() {
30             @Override
31             public void onClick(ClickEvent event) {
32                 deckPanel.showWidget(2);
33             }
34         });
35         horizontalPanel1.add(button);
36         horizontalPanel1.add(button1);
37         horizontalPanel1.add(button2);

7. HtmlPanel html容器

1         //html容器
2         String htmlStr = "<div style='color:red'>测试</div>";
3         HTMLPanel htmlPanel = new HTMLPanel(htmlStr);
4 
5         rootPanel.add(htmlPanel);

8. Composite 用于封装自定义的组件

 1 //封装好的组件    
 2 private static class MyLabel extends Composite{
 3         private Label label;
 4 
 5         public MyLabel() {
 6         }
 7 
 8         public MyLabel(String value) {
 9             label = new Label(value);
10 
11             //必要操作，包装你所用到的部件
12             initWidget(label);
13         }
14 
15     }
16 
17         //Composite用于包装部件来隐藏原有构建的方法。
18         MyLabel myLabel = new MyLabel("okok");

9. SimplePanel 简单容器

1         //简单容器,只允许有一个子元素
2         SimplePanel simplePanel = new SimplePanel();
3         simplePanel.setHeight("50px");
4         simplePanel.add(new Label("ok"));

10. ScrollPanel 显示滚动条的容器

1         //会显示滚动条的容器，只允许有一个子元素
2         ScrollPanel scrollPanel = new ScrollPanel();
3         scrollPanel.setSize("300px","100px");
4         FlowPanel flowPanel1 = new FlowPanel();
5 
6         flowPanel1.add(new HTML("<div style='width:200px;height:200px;background:red'></div>"));
7         flowPanel1.add(new HTML("<div style='width:200px;height:200px;background:blue'></div>"));
8         scrollPanel.add(flowPanel1);

11. FocusPanel 内容可聚焦容器

 1         //内容可聚焦，并添加捕获鼠标和键盘事件
 2         FocusPanel focusPanel = new FocusPanel();
 3 
 4         focusPanel.add(new Label("点击"));
 5         focusPanel.addClickHandler(new ClickHandler() {
 6             @Override
 7             public void onClick(ClickEvent event) {
 8                 Window.alert("点击");
 9             }
10         });

12. FormPanel 表单容器

 1         //表单容器
 2         FormPanel formPanel = new FormPanel();
 3         ArrayList<String> formCombines = new ArrayList<>(Arrays.asList("编号","姓名","年龄"));
 4         ArrayList<UIObject> formObjects = new ArrayList<>(Arrays.asList(new TextBox(),new TextBox(),new TextBox()));
 5         VerticalPanel verticalPanel1 = new VerticalPanel();
 6 
 7         for(int i = 0;i < (formCombines.size() == formObjects.size() ? formCombines.size() : 0);i++){
 8             HorizontalPanel horizontalPanel2 = new HorizontalPanel();;
 9 
10             horizontalPanel2.add(new Label(formCombines.get(i)));
11             horizontalPanel2.add((Widget) formObjects.get(i));
12 
13             verticalPanel1.add(horizontalPanel2);
14         }
15         formPanel.add(verticalPanel1);