0.前言
我想通过编写一个完整的游戏程序方式引导读者体验程序设计的全过程。我将采用多种方式编写具有相同效果的应用程序,并通过不同方式形成的代码和实现方法的对比来理解程序开发更深层的知识。
了解我编写教程的思路,请参阅体现我最初想法的那篇文章中的“1.编程计划”和“2.已经编写完成的文章(目录)”:
学习编程从游戏开始——编程计划(目录) - lexyao - 博客园
我已经在下面这篇文章中介绍了使用LCL和FCL组件构建一个项目(pTetris)的过程,后续的使用Lazarus的文章中使用的例子都是以向这个项目添加新功能的方式表述的:
在Lazarus下的Free Pascal编程教程——用向导创建一个使用使用LCL和FCL组件的项目(pTetris) - lexyao - 博客园
应用程序的主窗口是应用程序与用户打交道的第一场所,主界面设计是否合理直接影响用户的第一感受,关系到一个应用程序的成败。在这篇文章里我将简单介绍Lazarus中常用的LCL的布局组件,推荐网上的相关文章,为构建应用程序主窗口的界面提供基础的支持。
在这篇文章里,我主要讲述以下几个方面的内容:
- 应用程序用户界面布局概述
- 组件与布局有关的属性
- 简单介绍Lazarus中常用的布局组件(容器组件)
- 结束语
了解不同方式实现同样效果的差异,请阅读以下文章:
1.应用程序用户界面布局概述
应用程序的用户界面是由若干组件组成的。用户界面的布局直接影响界面的美观,也影响着使用的方便程度。如何布置出既美观又使用方便的用户界面是程序设计的重要工作内容。
每个可视组件都是一个窗口。按是否能够容纳其他组件来给组件分类,可以分为容器类组件和非容器类组件。
容器类组件也是组件,具有所有组件都有的共同属性,同时又有作为容器能够容纳其他组件的特有属性。容器类组件除了本身显示信息的属性,还有适用于其容纳的组件布局有关的属性。
还有一类组件被称作布局组件,它们除了具有容器类组件的属性,还有专门为了布局而设置的属性。使用布局组件构建用户界面可以节省大量的时间,同时布局组件构建的用户界面具有很强的适应性。
灵活使用布局组件和与布局有关的组件属性,是布局的重要手段。
打开下面的网址可了解组件布局有关的属性:
Autosize / Layout/zh CN - Free Pascal wiki
2.组件与布局有关的属性
2.1 表示组件绝对位置和外观的属性
每个组件都是一个窗口,决定组件外形尺寸的是组件的宽度Width和高度Height属性,理论上组件的宽度和高度可以取任意大小,但超出了容器客户区的部分将会看不到,除非容器有滚动条。Constraints为组件的大小设置了最大值和最小值,当最大值等于最小值时,组件的大小成为不可变的。还有决定外部空白的BorderSpacing可以调整与相邻组件的间距。决定组件在容器中的位置的是Left和Top,也就是在容器客户区中的坐标。
容器类组件有边界宽度,边界以内的区域是用来容纳其他组件的客户区。
2.2 自动调整组件位置和大小的属性
组件的Left、Right决定组件的位置,Width、Height决定组建的尺寸,但组件的有些属性会让这四个属性中的一个或者多个根据容器或相邻组件自动变化,而无法通过修改这些属性改变他们。这类属性中常用的如下:
AutoSize:每个组件都有一个AutoSize属性,设置为true后组件给根据内部的文字、图标或者组件自动调整为一个合适的Width、Height。
Align:当Align取值为非alNone时,组件将按设置自动停靠,并根据停靠的容器客户区的边长确定组件的Width、Height。
TAlign = (alNone, alTop, alBottom, alLeft, alRight, alClient, alCustom); TAlignSet = set of TAlign;
Anchors:设置Anchors可以锚定组件与容器或兄弟组件的相对位置。
TAnchorKind = (akTop, akLeft, akRight, akBottom); TAnchors = set of TAnchorKind;
3.简单介绍Lazarus中常用的布局组件(容器组件)
Lazarus提供了多种布局组件,灵活运用这些布局组件可以很容易地布置出良好的应用程序界面。下面介绍在Lazarus中常用的布局组件的使用方法。
3.1 窗体TForm
TForm形成顶层窗口,使用户界面的主体,同时它也是一个容器类的组件,容纳界面中的所有组件。以下是TForm的介绍:
TForm/zh CN - Free Pascal wiki
3.2 TPanel组件
以下是介绍TPanel组件的网址:
TPanel - Lazarus wiki 中文版
TPanel 是在表单上创建面板的组件。TPanel 是 TWinControl 的后代,位于 Component Palette 的 Standard 选项卡下。TPanel 可以充当其他组件的可见容器。
在布局时,TPanel可以用做其他组件的容器,也可以作为空白区域的占位。
3.3 TFlowPanel组件
TFlowPanel是真正意义上的布局组件。以下是介绍TFlowPanel组件的网址:
TFlowPanel - Lazarus wiki 中文
TFlowPanel 是一个组件,它创建一个面板,该面板可以在表单上的 ControlList 中包含“流动”的其他组件(面板)。TFlowPanel 是 TWinControl 的后代,位于 Component Palette 的 Additional 选项卡下。TFlowPanel 充当其他组件的可见容器,这些组件没有固定位置,但可以在边界可能更改时“流动”(由于窗口大小调整或转动显示设备)。
TFlowPanel作为容器组件使用,它内部的组件的位置由TFlowPanel的FlowStyle属性的取值决定。可以是按行或者按列顺序排放。以下是FlowStyle属性的可取的值。
TFlowStyle = (fsLeftRightTopBottom, fsRightLeftTopBottom, fsLeftRightBottomTop, fsRightLeftBottomTop, fsTopBottomLeftRight, fsBottomTopLeftRight, fsTopBottomRightLeft, fsBottomTopRightLeft);
FlowStyle取值为fsLeftRightTopBottom时组件排列如下图所示:
FlowStyle取值为fsTopBottomLeftRight时组件排列如下图所示:
FlowLayout属性决定同一行或列中的组件的对齐方式,它的取值如下:
TTextLayout = (tlTop, tlCenter, tlBottom); property FlowLayout: TTextLayout
以下是FlowLayout=tlCenter时TFlowPanel中组件的排列方式:
3.4 TGroupBox组件
以下是介绍TGroupBox组件的网址:
TGroupBox - Lazarus wiki 中文wiki
TGroupBox 是一个容器,它允许在一个表单上对多个对象进行物理和概念分组。要在表单上使用 TGroupBox,您只需在 Component Palette 的 Standard 选项卡上选择它,然后单击表单来放置它。
3.5 三个容器组件的特点及应用
- TPanel组件作为容器时可以通过边框显示立体效果,也可以隐藏边框不露痕迹地排列其中的组件,其中的组件位置可以按自己的意图排列。TPanel还可以作为空白用于占位。虽然使用TBevel组件将Shape属性设置为bsSpacer时也可以作为空白用于占位,但使用起来总感觉不如TPanel方便。
- TFlowPanel组件作为容器,仅当内部组件需要对齐时才会显示出它的优势,否则使用TPanel比它更合适。
- TGroupBox组件作为容器,仅当需要用标题说明内部组件的用途时才会显示出它的优势,这是其他容器不可替代的功能。
4.结束语
Lazarus的组件提供了丰富的用于布局的属性,为程序员布置应用程序界面提供了很大的方便。具体采用哪一种方式布置界面更好,没有一定的答案。每个人有自己的爱好和习惯,适合自己的就是好的,只要能达到目的就行。所谓的殊途同归大概就是这个意思吧。
标签:容器,布局,TFlowPanel,Free,Pascal,Lazarus,组件,属性 From: https://www.cnblogs.com/lexyao/p/18622195