[FMX]使用TabControl实现滑动页面效果 – QDAC数据访问组件网站

在 FMX 中，要实现多页面滑动效果，实际上很简单，不需特别复杂的代码。下面列出了作者的一些实现的一些步骤：

1、由于对于默认的 Tab 显示方式不喜欢，作者决定自己实现一个 Tab，这个 Tab 只显示上一页、当前和下一页的 Tab 标题，我们为此在页面首部放置了一个 Panel ，左右各有一个 SpeedButton，分别左对齐和右对齐，用来显示上一页和下一页的标题，同时提供点击时跳转到该页面的功能，我们将其分别命名为 sbPrior、lsbNext。中间放置一个 Label ，对齐方式填充客户区，命名为blPageTitle。至于Panel，我们命名为 pnlHeader，让其上对齐。

剩下的各个字体和背景设置，可以根据自己的需要随便改了，与主题无关，此处省略5000字……

2、在页面上放置一个 TabControl，我们将其命名为 tcPages，设置其 TabPosition 为 None 来隐藏默认的标签。然后添加一些 TabItem，设置其 Text 为不同的文本，以便区分。

3、拉一个 GestureManager 来管理滑动操作。设置 pnlHeader 和 TabControl 的 Touch.GestureManager 属性为此 GestureManager，然后分别选中 Touch.Gestures.Standard 中的 Left 和 Right。

好了，布局的事就到此为止，现在是编码：

1、sbPrior 和 sbNext 分别用于切换上一页和下一页，分别在其的 OnClick 事件中编写类似如下代码：

procedure TForm1.sbNextClick(Sender: TObject);
begin
if tcPages.ActiveTab.Index < tcPages.TabCount - 1 then
  tcPages.Next();
end;
 
procedure TForm1.sbPriorClick(Sender: TObject);
begin
if tcPages.ActiveTab.Index > 0 then
  tcPages.Previous();
end;

2、设置 pnlHeader 和 tcPages 的 OnGesture 共用一个事件响应函数，响应手势操作：

procedure TForm1.tcPagesGesture(Sender: TObject;
  const EventInfo: TGestureEventInfo; var Handled: Boolean);
begin
case EventInfo.GestureID of
  sgiRight:
    begin
    tcPages.Previous();
    Handled:=True;
    end;
  sgiLeft:
    begin
    tcPages.Next();
    Handled:=True;
    end;
end;
end;

3、在 tcPages.OnChang 事件中处理页面变更时修改 lblPageTitle 和 sbPrior、sbNext 的标题：

procedure TForm1.tcPagesChange(Sender: TObject);
begin
if tcPages.ActiveTab.Index > 0 then
  sbPrior.Text := tcPages.Tabs[tcPages.ActiveTab.Index - 1].Text
else
  sbPrior.Text := '';
if tcPages.ActiveTab.Index < tcPages.TabCount - 1 then
  sbNext.Text := tcPages.Tabs[tcPages.ActiveTab.Index + 1].Text
else
  sbNext.Text := '';
lblPageTitle.Text := tcPages.ActiveTab.Text;
end;

4、为了在程序启动时，上面的标题栏显示正常，我们在窗体的 OnCreate 事件里调用一个 tcPagesChange 函数来更新下显示：

procedure TForm1.FormCreate(Sender: TObject);
begin
tcPagesChange(Sender);
end;

5、OK，现在可以编译并运行下程序，看一下效果了。手指头在上面划拉划拉吧!

登录