(中行雷威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)