（01）uniGUI for C++ builder下手机登录窗口的布局与设计

 

                              (中行雷威2019.2.17，2019.2.21修改增加背景图)

 

（同一个世界，同一个梦想，交流学习C++Builder XE10，传承c++builder的魅力！欢迎各地朋友加入我的QQ群484979943,进群密码“BCB”，同时也请将该群号广为宣传，希望能够广集各方高手，共同进步。如需下载开发工具及源代码请加入我的QQ群。）

【阅读倡议】

1、有问题请留言;

2、没问题请点赞;

3、看连载请加群;

4、下源码请加群;

【开发工具】

1、C++Builder10.2.3 tokyo

2、FMSoft_uniGUI_Complete_Professional_1.70.0.1486（正版）

3、本案例资源下载

4、也可访问我的QQ文件共享：A02-源代码  下载

本人主笔的国内第一本uniGUI教学案例代码已诞生，分为cbuilder和delphi两个版本，买代码送手册，需要的朋友可以加入我的QQ技术交流群484979943、860634510、299497712给我（群主）留言。资料简介：https://blog.csdn.net/dlboy2018/article/details/88923832

 

一、设计目标

创建一个项目，开发一个登录界面，手机界面开发主要是居中和对齐问题，本例子主要讲解如何做好布局和对齐。

二、功能设计

1、创建项目

 

创建一个app项目，项目主目录指向“d:\bocAppFrame”，然后在项目include path和lib path分别添加“C:\Program Files (x86)\FMSoft\Framework\uniGUI\win32”，然后保存项目，关闭开发工程，重新打开项目。将Project-》Options-》c++Linker-》Link with Dynamic RTL 设为false，将Project-》Options-》packages-》runtime packcages设为false。

2、创建登录窗口

3、一层布局和设计

1）将登录窗口的AlignmentControl设为uniAlignmentServer（服务端自动对齐控制模式，由开头的Align属性控制显示对齐；另一个模式uniAlignmentClient是客户端对齐控制模式，由后续的Layout、LayoutAttribs、LayoutConfig等属性控制对齐和显示属性，前者在设计模式时就显示效果，后者设置属性时开发界面没有对齐变化，只在运行时显示效果，为方便设计和摆放控件一般两者结合使用）。

2）在登录界面上放一个unimContainerPanel1面板控件，AlignmentControl设为uniAlignmentServer，align=lClient居中铺满模式；再在面板1内放一个unimImage图像控件，align=lClient，Stretch=true自动拉伸模式，Transparent=true透明模式，Picture选择背景图片；再在面板1内放一个UnimContinerPanel2控件，align=alClient，alignmentControl=uniAlignmentClient，layout=vbox纵向排列，parentAlignmentControl=false。

4、二层布局和设计

在UnimContainerPanel2内摆放三个面板控件，分别是3、4、5号面板，其flex属性分别设置为3、3、4（分占屏幕的比例系数）,其中将4号面板的layout设为hbox（水平排列）。

5、三层布局和设计

1）登录输入控件设计

在UnimContainerPanel4的内部摆放三个面板，分别是6、7、8，将其flex分别设置为2、8、2，将7号面版的layout设为vbox（纵向排列），将7号面板的layoutAttribs-》align设置为center（居中对齐），在7号面版UnimContainerPanel7上摆放UnimEdit1、UnimEdit2、UnimToggle1、UnimBitBtn1分别用于输入用户、输入密码、保存密码、登录按钮。将这四个控件Align分别设置为alTop。将UnimEdit1和UnimEdit2的EmptyText分别设为“请输入用户名”“请输入密码”，将UnimEdit2的PasswordChar设为“*”，将UniEdit1和uniEdit2的text设置为空（为空时才能显示EmptyText的输入提示内容）。将UnimLoginForm1的ShowTitle设为false，不显示窗口标题栏。将unimToggle1的FieldLabel设为“记住密码”，FieldLabelAlign=laRight，将unimBitBtn1的Caption属性设为“登录”，将其UI属性设置为round（圆形按钮）。

2)企业logon设计

将三号面板的layout设为hbox，在三号面板内放两个面板一个图像控件，分别是9、10号面板和UnimImage1，将其flex分别设为1、2、1；将UnimImage1的center设为true，将其picture属性指向一个png图像文件，大小要合适，不能太大，否则不居中，将其layoutconfig-》margin属性设为30（四周留点空间）

 

 

三、代码实现

1、UnimBitBtn1的登录代码

void __fastcall TUnimLoginForm1::UnimBitBtn1Click(TObject *Sender)
{
if(UnimEdit1->Text.IsEmpty())
    {
    ShowMessageN("请输入你的用户名!");
    UnimEdit1->SetFocus();
    return;
    }
if(UnimEdit2->Text.IsEmpty())
    {
    ShowMessageN("请输入你的密码!");
    UnimEdit2->SetFocus();
    return;
    }
if(UnimEdit1->Text=="1" && UnimEdit2->Text=="1")
    {
    ShowMessageN("登录成功！");
    ModalResult=mrOk;
    this->Close();
    }
else
    {
    ShowMessageN("用户密码错误!");
    UnimEdit1->Clear();
    UnimEdit2->Clear();
    UnimEdit1->SetFocus();
    return;
    }
}

四、运行效果

1、编译并运行，在手机浏览器的地址栏输入http://22.36.26.xx:8077/m回车即可看到效果，做个内部管理的手机APP效果还是蛮可以滴。

（感谢我的QQ群484979943的珠海-elily）