# 一步一步学习使用LiveBindings(10) LiveBindings绑定到漂亮的TCombobox

一步一步学习使用LiveBindings(10) LiveBindings绑定到漂亮的TCombobox

这一课,将演示如何绑定到TCombobox,这个控件通常用来给用户提供选项列表。它们具有比VCL控件较强的定制性,可以使用样式窗口对每一个项进行外观的定制。

如果读者已经看过《一步一步学习使用LiveBindings(9)》,那应该会比较熟悉这一课的案例,因为笔者将上一节的案例LiveBindings_BindFormat的源代码复制到了这一节作为起点。

在上一节的员工管理窗口中,有一个Title职位字段,在真实的项目这个字段应该是一个下列拉表框供用户选择,而不是一个文本输入框,以避免用户胡乱输入太多的职位而无法管理,效果如下所示:

我们通常会有一个表来存放职位信息,接下来一步一步演示如何实现从数据源到Combobox下拉表列框的绑定。

1. 打开LiveBindings_BindFormat项目的主窗体,从工具栏中拖一个TProtoTypeBindSource控件到主窗体上,将其命名为TitleBindSource,然后右击该控件,打开Fields Editor,定义如下的几个字段和生成器。

几个字段的作用如下:

  • ContactTitle:职位名称
  • TitleImageIndex:职位的图片索引,演示如何给Combobox绑定一张图片。
  • TitleDescription:职位描述
  • TitleColor:将用于职位的颜色。

2. 在主窗体上右击鼠标,从弹出的菜单中选择"LiveBinding Wizard...",使用向导,选择"Link a Control with a field"菜单项,创一个新的TCombobox到数据源TitleBindSource的连接,指定FieldName为ContactTitle,向导会自动将Combobox控件的Synch与TitleBindSource的*进行连接,并有一个指向Item.Text的单向连接。

绑定的连接是一个类型为TLinkListControlToField连接类型,FireMonkey的ListBox、ListView都会使用这种类型来绑定数据。

设计器中的Combobox除了Synch之外,还有如下的几个可绑定类型:

  • SelectedValue:当选中项时,SelectedValue返回的给其他数据源的数据。
  • Item.Text:显示在Combobox中的项的文本。
  • Item.ImageIndex:显示在Combobox的图片索引。
  • Item.LookupData:SelectedValue将返回的值类型,也就是要搜寻的数据。

在这里需要将SelectedValue连接到EmployeeBindSource控件的Title字段,以便将当前选中的Contact Title更新到EmployeeBindSource的底层表。

在设计器中拖动SelectedValue到EmployeeBindSource控件的Title字段,设计器会弹出一个提示:

向导会删除Synch到*的连接,接下来将如下图连接Item.ImageIndex,并指定Item.LookupData到ContactTitle,以确保SelectedValue会返回职位名称。

3. 选中Combobox控件,指定其Images属性为一个TImageList,这样就会在列表项左侧显示图片。

最终效果如下所示:

4. 在代码部分,更新了EmployeeObjectU.pas,添加了一个新的类TEmployeeTitle,现附上更新后的代码

EmployeeObjectU.pas

Pascal 复制代码
unit EmployeeObjectU;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, System.StrUtils;

type
  TEmployee = class
  private
    FContactBitmap: TBitmap;      //联系人图片
    FContactName: string;         //联系人名称
    FTitle: string;               //职位
    FHireDate: TDate;             //雇佣日期
    FSalary: Integer;             //薪水
    FAvailNow: Boolean;           //是否在职
  public
    constructor Create(const NewName: string;
                       const NewTitle: string;
                       const NewHireDate: TDate;
                       const NewSalary: Integer;
                       const NewAvail: Boolean);
    property ContactBitmap: TBitmap read FContactBitmap write FContactBitmap;
    property ContactName: string read FContactName write FContactName;
    property Title: string read FTitle write FTitle;
    property HireDate: TDate read FHireDate write FHireDate;
    property Salary: Integer read FSalary write FSalary;
    property AvailNow: Boolean read FAvailNow write FAvailNow;
  end;

type
  TEmployeeTitle = class
  private
    FContactTitle: string;                 //职位名称
    FTitleColor: Cardinal;                 //显示颜以
    TTitleImageIndex: Integer;             //显示图标索引
    TTitleDescription: string;             //职位描述
  public
    constructor Create(const NewTitle: string;
                       const NewTitleDesc: string;
                       const NewTitleColor: Cardinal;
                       const NewImageIdx: Integer);
    property ContactTitle: string read FContactTitle write FContactTitle;
    property TitleColor: Cardinal read FTitleColor write FTitleColor;
    property TitleImageIndex: Integer read TTitleImageIndex write TTitleImageIndex;
    property TitleDescription: string read TTitleDescription write TTitleDescription;
  end;


implementation

{ TEmployee }

constructor TEmployee.Create(const NewName, NewTitle: string;
  const NewHireDate: TDate; const NewSalary: Integer; const NewAvail: Boolean);
var
  NewBitmap: TBitmap;
  ResStream: TResourceStream;
begin
  //将根据联系人名称姓来关联资源文件
  ResStream := TResourceStream.Create(HINSTANCE, 'Bitmap_' + LeftStr(NewName, Pos(' ', NewName) - 1), RT_RCDATA);
  try
    NewBitmap := TBitmap.Create;
    NewBitmap.LoadFromStream(ResStream);
  finally
    ResStream.Free;
  end;

  FContactName   := NewName;
  FTitle         := NewTitle;
  FContactBitmap := NewBitmap;       //来自资源的图片
  FHireDate      := NewHireDate;
  FSalary        := NewSalary;
  FAvailNow      := NewAvail;
end;


{ TEmployeeTitle }

constructor TEmployeeTitle.Create(const NewTitle, NewTitleDesc: string;
  const NewTitleColor:Cardinal;const NewImageIdx: Integer);
begin
  FContactTitle   := NewTitle;
  FTitleColor     := NewTitleColor;
  TTitleImageIndex := NewImageIdx;       //来自TImageList的图片
  TTitleDescription:= NewTitleDesc;
end;

end.

在主窗体中,为TitleBindSource的OnCreateAdapter事件添加了如下的代码来:

Pascal 复制代码
procedure TfrmMain.TitleBindSourceCreateAdapter(Sender: TObject;
  var ABindSourceAdapter: TBindSourceAdapter);
begin
  bsEmployeeTitle:= TListBindSourceAdapter<TEmployeeTitle>.Create(self, nil, True);
  //赋值给TBindSourceAdapter
  ABindSourceAdapter := bsEmployeeTitle;
end;

在FormCreate中关联了List.

Pascal 复制代码
procedure TfrmMain.FormCreate(Sender: TObject);
begin
  LoadData;  //加载数据
  //设置员工列表
  bsEmployee.SetList(FEmployeeList, False);
  bsEmployee.Active := True;
  //设置员工编号列表
  bsEmployeeTitle.SetList(FEmployeeTitleList, False);
  bsEmployeeTitle.Active := True;
end;

最后,通过处理LinkFillControlToField.OnFillingListItem事件,让其在填充列表项时,指定一个列表项的样式:

Pascal 复制代码
procedure TfrmMain.LinkFillControlToFieldFillingListItem(Sender: TObject;
  const AEditor: IBindListEditorItem);
begin
  //指定列表项的样式
  (AEditor.CurrentObject as TListBoxItem).StyleLookup :='listboxitembottomdetail';
end;

显示效果如下所示:

选择使用FireMonkey的程序员,一定时会被其强大的自定义样式定义所吸引的,在接下来的课程中,将会讨论如何自定义样式。

相关推荐
MicrosoftReactor1 小时前
技术速递|Copilot 的 Next Edit Suggestions(NES)现已在 JetBrains IDE 中开放公测
ide·copilot
n12352359 小时前
AI IDE+AI 辅助编程,真能让程序员 “告别 996” 吗?
ide·人工智能
小冷coding13 小时前
随时随地写代码:Jupyter Notebook+cpolar让远程开发像在本地一样流畅
ide·python·jupyter
996终结者18 小时前
软件使用教程(四):Jupyter Notebook 终极使用指南
ide·python·jupyter
zhong liu bin1 天前
maven【maven】技术详解
java·ide·python·spring·maven·intellij-idea
扯淡的闲人1 天前
Visual Studio Code的使用简介
ide·vscode·编辑器
小妖同学学AI2 天前
百度发布Comate AI IDE,我要把Cursor卸载了!
ide·人工智能·百度·ai编程
三天不学习2 天前
【全面指南】Claude Code 从入门到精通:安装、配置、命令与高级技巧详解
ide·ai编程·claude code
BillKu2 天前
Delphi 5 中操作 Word 表格时禁用鼠标交互
word·delphi