B11图形用户界面设计课件.ppt

《B11图形用户界面设计课件.ppt》由会员分享，可在线阅读，更多相关《B11图形用户界面设计课件.ppt（104页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第11章章 图形用户界面设计图形用户界面设计11.1 java AWT和Swing基础11.2 常用容器11.2 布局管理器11.3 事件处理11.4 常用组件11.1 java AWT和和Swing基础基础11.1.1 java的AWT和Swing概述 11411.1.2 java的AWT组件和Swing组件11411.1.3 利用AWT组件和Swing组件进行程序设计的基本步骤11611.1.1 java的的AWT和和Swing概述概述AWT Abstract Window ToolKitAbstract Window ToolKit的缩写，是抽象窗口组件工的缩写，是抽象窗口组件工具包，

2、是具包，是 JavaJava语言中最早的用于编写图形界面应用程语言中最早的用于编写图形界面应用程序的工具包。该工具包提供了一套与本地图形界面进序的工具包。该工具包提供了一套与本地图形界面进行交互的接口。行交互的接口。AWTAWT组件集遵循最大公约数原则，即组件集遵循最大公约数原则，即AWTAWT只拥有所有平只拥有所有平台上都存在的组件的公有集合台上都存在的组件的公有集合重量级组件重量级组件11.1.1 java的的AWT和和Swing概述概述Swing 为了解决为了解决 AWT AWT 存在的问题而新开发的包。存在的问题而新开发的包。Swing Swing 是在是在AWTAWT的基础上构建的一

3、套新的图形界面系统，它提供了的基础上构建的一套新的图形界面系统，它提供了AWT AWT 所能够提供的所有功能，并且用纯粹的所能够提供的所有功能，并且用纯粹的JavaJava代码代码对对AWT AWT 的功能进行了大幅度的扩充。的功能进行了大幅度的扩充。轻量级组件轻量级组件11.1.2 java的的AWT组件和组件和Swing组件组件1基本概念组件（组件（ComponentComponent）是构成是构成GUIGUI的基本元素，如按钮、的基本元素，如按钮、标签、画布、复选框等。标签、画布、复选框等。容器（容器（ContainerContainer）组件）组件，简称容器，是一个可以包含，简称容器，

4、是一个可以包含组件和其他容器的组件组件和其他容器的组件. .如，如，JPanelJPanel, ,JTabbedPaneJTabbedPane、JScrollPaneJScrollPane等。等。非容器组件（原子组件）非容器组件（原子组件）则是不可以包含组件和其他则是不可以包含组件和其他容器的组件，如容器的组件，如J JButtonButton、JLabelJLabel、JTextFieldJTextField等。等。11.1.2 java的的AWT组件和组件和Swing组件组件1基本概念向容器组件中添加组件向容器组件中添加组件 panel.add(button) panel.add(butt

5、on)； 顶层容器是一个能够提供图形绘制的容器，是进行图形编程的基顶层容器是一个能够提供图形绘制的容器，是进行图形编程的基础，一切图形化的东西，都必然包括在顶层容器中。础，一切图形化的东西，都必然包括在顶层容器中。JFrameJFrame：用来设计类似于：用来设计类似于WindowsWindows系统中的窗口形式的应用程序。系统中的窗口形式的应用程序。 JDialogJDialog：和：和JFrameJFrame类似，只不过类似，只不过JDialogJDialog是用来设计对话框。是用来设计对话框。 JAppletJApplet：用来设计可以在嵌入在网页中的：用来设计可以在嵌入在网页中的Jav

6、aJava小程序。小程序。每一个窗口应用程序中有且只能有一个顶层容器组件。每一个窗口应用程序中有且只能有一个顶层容器组件。11.1.2 java的的AWT组件和组件和Swing组件组件1基本概念中间容器属于容器型组件，可包含组件和其他容器的中间容器属于容器型组件，可包含组件和其他容器的组件，但自身又必须包含在其他容器（如顶层容器）组件，但自身又必须包含在其他容器（如顶层容器）中，如中，如JPanel,JScrollPaneJPanel,JScrollPane等。等。特殊容器：特殊容器：在在GUIGUI上起特殊作用的中间层，如上起特殊作用的中间层，如,JRootPane,JRootPane。不可

7、编辑信息的显示组件：例如不可编辑信息的显示组件：例如JLabel, JLabel, JProgressBarJProgressBar等等可编辑信息的显示组件：如可编辑信息的显示组件：如, Jtable, JtextArea, Jtable, JtextArea等等11.1.2 java的的AWT组件和组件和Swing组件组件2组件的继承关系AWTAWT组件包含在组件包含在java.awtjava.awt包里，如包里，如ButtonButton、CheckboxCheckbox、ScrollbarScrollbar等，都是等，都是ComponentComponent类的子类。类的子类。Swing

8、Swing中大多数组件其名称都是在原来中大多数组件其名称都是在原来AWTAWT组件名称前组件名称前加上加上J J，例如，例如JButtonJButton、JCheckBoxJCheckBox、JScrollbarJScrollbar等，都等，都是是JComponentJComponent类的子类。类的子类。-11.1.3 利用利用AWT组件和组件和Swing组件进行程组件进行程序设计的基本步骤序设计的基本步骤1 引入包2 选择“外观和感觉”3 设置顶层容器4 设置布局管理5 向容器中添加组件6 对组件进行事件处理11.1.3 利用利用AWT组件和组件和Swing组件进行程组件进行程序设计的基本

9、步骤序设计的基本步骤1 引入包import javax.swing.import javax.swing.* *; ;import java.awt.import java.awt.* *; ;import .import .* *; ;import .import .* *; ;import .import .* *; ;import .import .* *; ;import .import .* *; ;11.1.3 利用利用AWT组件和组件和Swing组件进行程组件进行程序设计的基本步骤序设计的基本步骤2 选择“外观和感觉”在产生任何可视组件以前需设置好它们的外观和感觉。设置某种在产生

10、任何可视组件以前需设置好它们的外观和感觉。设置某种外观和感觉，需要使用外观和感觉，需要使用UIManagerUIManager类所提供的类所提供的setLookAndFeel()setLookAndFeel()静态方法。通常我们只会做两种选择：静态方法。通常我们只会做两种选择：javajava提供的跨平台的外观和感觉。可以利用提供的跨平台的外观和感觉。可以利用UIManagerUIManager类提供的类提供的getCrossPlatformLookAndFeelClassName()getCrossPlatformLookAndFeelClassName()静态方法获得类名。静态方法获得类名

11、。程序所处系统的外观和感觉。可以利用程序所处系统的外观和感觉。可以利用UIManagerUIManager类提供的类提供的getSystemLookAndFeel()getSystemLookAndFeel()静态方法获得目前操作平台的静态方法获得目前操作平台的Look and Look and FeelFeel类名称字符串。类名称字符串。11.1.3 利用利用AWT组件和组件和Swing组件进行程组件进行程序设计的基本步骤序设计的基本步骤3 设置顶层容器ApplicationApplication程序一般选择程序一般选择JFrame(JFrame(或或Frame)Frame)作为顶层容器（主

12、窗作为顶层容器（主窗口），口），AppletApplet程序一般选择程序一般选择JApplet(JApplet(或或Applet)Applet)作为顶层容器作为顶层容器（主窗口）。（主窗口）。4 设置布局管理布局管理就是创建这种类型的一个对象，并采用此对象来安排其布局管理就是创建这种类型的一个对象，并采用此对象来安排其它容器和基本组件。常用的四种布局管理器：它容器和基本组件。常用的四种布局管理器：FlowLayoutFlowLayout、BorderLayoutBorderLayout、CardLayoutCardLayout、GridLayoutGridLayout。5 向容器中添加组件利用

13、方法利用方法add()add()向有关容器添加组件，容器可以嵌套。向有关容器添加组件，容器可以嵌套。6 对组件进行事件处理设置监视器监视事件方法，并进行相应处理。设置监视器监视事件方法，并进行相应处理。11.2 常用容器常用容器11.2.1 框架11.2.2 面板 滚动窗口11.2.4 菜单设计11.2.5 对话框11.2.1 框架框架框架是一种顶层容器，是用来设计类似于Windows系统中的窗口形式的应用程序。AWTAWT中的中的FrameFrame类和类和SwingSwing的的JFrameJFrame类是用于建立框架的。类是用于建立框架的。JFrameJFrame类是类是FrameFra

14、me的子类。的子类。与与AWTAWT组件不同，组件不同，SwingSwing组件不能直接添加到顶层容器中，它必须组件不能直接添加到顶层容器中，它必须添加到一个与添加到一个与SwingSwing顶层容器相关联的内容面板（顶层容器相关联的内容面板（content panecontent pane）上。内容面板是顶层容器包含的一个普通容器，它是一个轻量级上。内容面板是顶层容器包含的一个普通容器，它是一个轻量级组件。基本规则如下：组件。基本规则如下： （1 1）把）把SwingSwing组件放入一个顶层组件放入一个顶层SwingSwing容器的内容面板上。容器的内容面板上。 （2 2）避免使用非）避免

15、使用非SwingSwing的重量级组件。的重量级组件。11.2.1 框架框架对JFrame添加组件有两种方式：1) 1) 用用getContentPane( )getContentPane( )方法获得方法获得JFrameJFrame的内容面板，再对其加的内容面板，再对其加入组件：入组件：frame.getContentPane().add(childComponent)frame.getContentPane().add(childComponent)2) 2) 建立一个建立一个JpanelJpanel或或 JDesktopPaneJDesktopPane之类的中间容器，把组件添之类的中间容

16、器，把组件添加到容器中，用加到容器中，用setContentPane()setContentPane()方法把该容器置为方法把该容器置为JFrameJFrame的内的内容面板：容面板： Jpanel contentPane=new Jpanel( );Jpanel contentPane=new Jpanel( ); /把其它组件添加到把其它组件添加到JpanelJpanel中中; ; frame.setContentPane(contentPane); frame.setContentPane(contentPane); /把把contentPanecontentPane对象设置成为对象设置

17、成为frameframe的内容面板的内容面板11.2.1 框架框架使用JFrame容器进行图形界面程序开发基本步骤：（1 1）创建的）创建的JFrameJFrame窗口是不可见的，要使得可见，需窗口是不可见的，要使得可见，需要使用要使用show()show()方法或方法或setVisible(Boolean b)setVisible(Boolean b)方法，其方法，其中中setVisiblesetVisible中的参数中的参数b=trueb=true。（2 2）使用）使用setSizesetSize方法设置窗口大小。方法设置窗口大小。（3 3）向）向JFrameJFrame中添加组件时，必须

18、先取得中添加组件时，必须先取得ContentPaneContentPane，然后再使用，然后再使用add()add()方法把组件加入到方法把组件加入到ContentPaneContentPane中，这与中，这与AWTAWT包中的包中的FrameFrame直接使用直接使用add()add()方法添加组件不同。方法添加组件不同。【实例11-3】 import java.awt.import java.awt.* *； import javax.swing.import javax.swing.* *； public class JFrameExamplepublic class JFrameExa

19、mplepublic static void main(String args )public static void main(String args )JFrameExample obj=new JFrameExample ( )JFrameExample obj=new JFrameExample ( )；obj.myJFrame( )obj.myJFrame( )； public void myJFrame( )public void myJFrame( )JFrame jframe=new JFrame(JFrame jframe=new JFrame(一个框架应用一个框架应用)；C

20、ontainer panel=jframe.getContentPane( )Container panel=jframe.getContentPane( )；panel.setLayout(new FlowLayout( )panel.setLayout(new FlowLayout( )；panel.add(new JButton( panel.add(new JButton( 欢迎使用欢迎使用JFrameJFrame！)；jframe.setSize(300,150)jframe.setSize(300,150)；jframe.show( )jframe.show( )； 1.1. 11

21、.2.2 面板面板Java中的JPanel组件属于容器型组件可以在JPanel中放置按钮、文本框等非容器组件，甚至还可以在JPanel中再放置若干个JPanel组件Swing采用JPanel定义面板，面板必须包含在另一个容器（如JFrame）中。【实例11-4】 import java.awt.import java.awt.* *; ; import javax.swing.import javax.swing.* *; ; public class JpanelExamplepublic class JpanelExample private void fillJPanel(Contain

22、er c) private void fillJPanel(Container c) Button button1,button2,button3; Button button1,button2,button3; button1=new Button(button1=new Button(确定确定););button2=new Button(button2=new Button(取消取消););button3=new Button(button3=new Button(保存保存); ); c.add(button1);c.add(button2);c.add(button3);c.add(bu

23、tton1);c.add(button2);c.add(button3); public static void main(String args)public static void main(String args)JpanelExample obj=new JpanelExample();JpanelExample obj=new JpanelExample();obj.myJPanel();obj.myJPanel();1.1. 【实例11-4】public void myJPanel()public void myJPanel()JFrame jframe=new JFrame(JF

24、rame jframe=new JFrame(一个面板应用一个面板应用););Container contentPane=jframe.getContentPane();Container contentPane=jframe.getContentPane();contentPane.setLayout(new FlowLayout();contentPane.setLayout(new FlowLayout();JPanel jpanel1=new JPanel();JPanel jpanel1=new JPanel();fillJPanel(jpanel1);fillJPanel(jpan

25、el1);jpanel1.setBackground(Color.BLUE);jpanel1.setBackground(Color.BLUE); jpanel1.setForeground(Color.RED);jpanel1.setForeground(Color.RED);JPanel jpanel2=new JPanel();JPanel jpanel2=new JPanel();fillJPanel(jpanel2);fillJPanel(jpanel2);jpanel2.setBackground(Color.WHITE);jpanel2.setBackground(Color.W

26、HITE);jpanel2.setForeground(Color.BLACK);jpanel2.setForeground(Color.BLACK);contentPane.add(jpanel1);contentPane.add(jpanel1);contentPane.add(jpanel2); contentPane.add(jpanel2); contentPane.add(new JButton(contentPane.add(new JButton(我不在那些面板里我不在那些面板里!);!);jframe.setSize(400,250);jframe.setSize(400,2

27、50);jframe.show();jframe.show(); 15.15. 11.2.3 滚动窗口滚动窗口JScrollPane类用来建立滚动窗口的，是用来建立滚动窗口的，是ContainerContainer（容器）的子类。（容器）的子类。由九个部分组成，包括一个中心显示地带、四个角和由九个部分组成，包括一个中心显示地带、四个角和四条边四条边右上角右下角左上角左下角图11.1 JScrollPane容器11.2.3 滚动窗口滚动窗口JScrollPane类与与JPanelJPanel的不同是面板中可以添加多个组件，滚动窗的不同是面板中可以添加多个组件，滚动窗口中只能添加一个组件口中只能添

28、加一个组件将组件添加到面板中，然后再把面板添加到滚动窗口将组件添加到面板中，然后再把面板添加到滚动窗口中。中。JScrollPaneJScrollPane类经常和类经常和JListJList、JLabelJLabel、JTextAreaJTextArea等类配合使用。等类配合使用。【实例11-5】import java.awt.import java.awt.* *; ;import javax.swing.import javax.swing.* *; ;public class myJScrollPanelExamplepublic class myJScrollPanelExamplep

29、ublic static void main(String args)public static void main(String args)JFrame jframe=new JFrame(JFrame jframe=new JFrame(按钮面板滚动窗口按钮面板滚动窗口););Container contentPane=jframe.getContentPane();Container contentPane=jframe.getContentPane();contentPane.setLayout(new FlowLayout();contentPane.setLayout(new Fl

30、owLayout();JPanel jpanel=new JPanel();JPanel jpanel=new JPanel();JScrollPane jscrollpane=new JScrollPane();JScrollPane jscrollpane=new JScrollPane();JButton jbutton1=new JButton(JButton jbutton1=new JButton(确定确定););JButton jbutton2=new JButton(JButton jbutton2=new JButton(取消取消););JButton jbutton3=ne

31、w JButton(JButton jbutton3=new JButton(保存保存););jpanel.add(jbutton1);jpanel.add(jbutton1);jpanel.add(jbutton2);jpanel.add(jbutton2);jpanel.add(jbutton3);jpanel.add(jbutton3);jscrollpane.setViewportView (jpanel);jscrollpane.setViewportView (jpanel);contentPane.add(jscrollpane);contentPane.add(jscrollp

32、ane);jframe.setSize(800,650);jframe.setSize(800,650);jframe.show();jframe.show(); 11.2.4 菜单设计菜单设计菜单：菜单栏（菜单：菜单栏（JMenuBarJMenuBar）类、菜单（）类、菜单（JMenuJMenu）类和菜单）类和菜单项（项（JMenuItemJMenuItem）类对象组成）类对象组成菜单菜单菜单栏菜单栏菜单项菜单项11.2.4 菜单设计菜单设计制作菜单的一般步骤：制作菜单的一般步骤： （1 1）创建一个）创建一个JMenuBarJMenuBar对象并将其加入到对象并将其加入到JFrameJFr

33、ame中。中。 （2 2）创建）创建JMenuJMenu对象。对象。 （3 3）创建）创建JMenuItemJMenuItem对象并将其添加到对象并将其添加到JMenuJMenu对象中。对象中。 （4 4）将）将JMenuJMenu对象添加到对象添加到JMenuBarJMenuBar中。中。【实例11-6】import javax.swing.import javax.swing.* *; ;import .import .* *; ;import java.awt.import java.awt.* *; ;public class myMenuExample extends JFrame

34、public class myMenuExample extends JFrame private JLabel display; private JLabel display; public myMenuExample() public myMenuExample() super( super( 菜单演示程序菜单演示程序 ); ); JMenuBar bar = new JMenuBar(); JMenuBar bar = new JMenuBar(); setJMenuBar(bar); setJMenuBar(bar); JMenu filemenu = new JMenu( JMenu

35、 filemenu = new JMenu( 文件文件 ); ); JMenuItem filenew=new JMenuItem( JMenuItem filenew=new JMenuItem(新建新建); ); JMenuItem fileopen=new JMenuItem(JMenuItem fileopen=new JMenuItem(打开打开.);.); JMenuItem filesave=new JMenuItem( JMenuItem filesave=new JMenuItem( 保存保存);); JMenuItem exit=new JMenuItem( JMenuIt

36、em exit=new JMenuItem(退出退出); ); exit.addActionListener(new ActionListener() exit.addActionListener(new ActionListener() public void actionPerformed(ActionEvent e)public void actionPerformed(ActionEvent e) System.exit( 0 ); System.exit( 0 ); 1.1. ); );【实例11-6】 filemenu.add(filenew); filemenu.add(file

37、new); filemenu.add(fileopen); filemenu.add(fileopen); filemenu.add(filesave); filemenu.add(filesave); filemenu.addSeparator(); filemenu.addSeparator(); filemenu.add(exit); filemenu.add(exit); bar.add(filemenu); bar.add(filemenu); JMenu formatMenu = new JMenu( JMenu formatMenu = new JMenu(格式格式); ); J

38、MenuItem colorMenu=new JMenuItem( JMenuItem colorMenu=new JMenuItem( 颜色颜色 ); );formatMenu.add(colorMenu);formatMenu.add(colorMenu);JMenuItem fontMenu=new JMenuItem( JMenuItem fontMenu=new JMenuItem( 字体字体 ); ); formatMenu.add(fontMenu );formatMenu.add(fontMenu );bar.add(formatMenu); bar.add(formatMen

39、u); setSize( 300, 200 );setSize( 300, 200 );show();show();19.19. 【实例11-6】 public static void main(String args)public static void main(String args) myMenuExample app = new myMenuExample(); myMenuExample app = new myMenuExample(); app.addWindowListener(new WindowAdapter() app.addWindowListener(new Win

40、dowAdapter() public void windowClosing( WindowEvent e ) public void windowClosing( WindowEvent e ) System.exit(0); System.exit(0); ); ); 34.34. 11.2.5 对话框对话框对话框是向用户显示信息并获取程序运行所需数据的窗口，可以起到与用户交互的作用。 Swing使用JOptionPane类提供许多现成的对话框，如：消息对话框、确认对话框、输入对话框等等。如果JOptionPane提供的对话框不能满足需要，可以使用JDialog类自行设计对话框。11.2.

41、5 对话框对话框1JOptionPane对话框类型（1 1）showMesageDialogshowMesageDialog：向用户显示一些消息。：向用户显示一些消息。（2 2）showConfirmDialogshowConfirmDialog：问一个要求确认的问题并：问一个要求确认的问题并得到得到yes/no/cancelyes/no/cancel响应。响应。（3 3）showInputDialogshowInputDialog：提示用户进行输入。：提示用户进行输入。（4 4）showOptionDialogshowOptionDialog：可选择的对话框。：可选择的对话框。这些方法中通过

42、返回一个整数，来表示用户点击了哪这些方法中通过返回一个整数，来表示用户点击了哪个按钮，返回值的有效值有个按钮，返回值的有效值有YES_OPTIONYES_OPTION、NO_OPTIONNO_OPTION、CANCEL_OPTIONCANCEL_OPTION、OK_OPTIONOK_OPTION和和CLOSED_OPTIONCLOSED_OPTION。 11.2.5 对话框对话框2模式和非模式对话框所谓模式对话框就是指必须经过确认才能继续程序的所谓模式对话框就是指必须经过确认才能继续程序的运行的对话框，创建的模式对话框有：口令对话框、运行的对话框，创建的模式对话框有：口令对话框、删除文件对话框

43、、选择参数对话框、错误提示对话框删除文件对话框、选择参数对话框、错误提示对话框等，这些对话框都是要求输入数据或获得确认按键后等，这些对话框都是要求输入数据或获得确认按键后才能关闭对话框的才能关闭对话框的所谓非模式对话框就是指显示对话框后，用户可以不所谓非模式对话框就是指显示对话框后，用户可以不用关闭此对话框继续程序的运行，如查找用关闭此对话框继续程序的运行，如查找/ /替换对话框、替换对话框、插入符号对话框就是非模式对话框。实际上大部分对插入符号对话框就是非模式对话框。实际上大部分对话框都是模式对话框。话框都是模式对话框。 11.2.5 对话框对话框3Dialog类如果如果JOptionPan

44、eJOptionPane提供的对话框无法满足我们的需求，提供的对话框无法满足我们的需求，就需要使用就需要使用JDialogJDialog来自行设计对话框。通过来自行设计对话框。通过DialogDialog类类可以创建模式对话框和非模式对话框。可以创建模式对话框和非模式对话框。【实例11-7】import java.awt.import java.awt.* *; ;import .import .* *; ;import javax.swing.import javax.swing.* *; ;public class myDialog extends JFrame public class

45、myDialog extends JFrame private JButton jbt; private JButton jbt; private JLabel jlabel; private JLabel jlabel; public myDialog() public myDialog() super( super(一个显示信息对话框的例子一个显示信息对话框的例子 ); ); Container cp=getContentPane(); Container cp=getContentPane(); cp.setLayout(new GridLayout(2,2,10,10); cp.set

46、Layout(new GridLayout(2,2,10,10); jbt=new JButton( jbt=new JButton(显示信息按钮显示信息按钮); ); cp.add(jbt); cp.add(jbt); jbt.addActionListener(new handle(); jbt.addActionListener(new handle(); jlabel=new JLabel(); jlabel=new JLabel(); cp.add(jlabel); cp.add(jlabel); setSize(500,450); setSize(500,450); show();

47、 show();1.1. 【实例11-7】public class handle implements ActionListenerpublic class handle implements ActionListener public void actionPerformed(ActionEvent e) public void actionPerformed(ActionEvent e) String title= String title=信息对话框信息对话框; String content= String content=请选择请选择 (yes/no)?;(yes/no)?; int

48、dialogtype=JOptionPane.YES_NO_OPTION; int dialogtype=JOptionPane.YES_NO_OPTION; int choice=3; int choice=3; if(e.getSource()=jbt) if(e.getSource()=jbt) choice=JOptionPane.showConfirmDialog(null,content,title,dialchoice=JOptionPane.showConfirmDialog(null,content,title,dialogtype); ogtype); if(choice=

49、0) jlabel.setText( if(choice=0) jlabel.setText(您选择的是您选择的是YES);YES); else jlabel.setText( else jlabel.setText(您选择的是您选择的是NO);NO); public static void main(String args) public static void main(String args) myDialog app=new myDialog(); myDialog app=new myDialog(); 19.19. 11.3 布局管理器布局管理器 FlowLayout布局 Bord

50、erLayout布局 GridLayout布局 CardLayout布局 null布局 FlowLayout布局布局java.FlowLayout类是类的直接子类。FlowLayout的布局策略是将遵循这种布局策略的容器中的组件按照加入的先后顺序从左向右排列，当一行排满之后就转到下一行继续从左至右排列，每一行中的组件都居中排列。 FlowLayout是Applet缺省使用的布局编辑策略。 FlowLayout布局布局FlowLayout类有三个构造方法 (1) FlowLayout( ) (1) FlowLayout( ) 用于创建一个版面设定为居中对齐、各组用于创建一个版面设定为居中对齐、各