pascal-Pascal FMXUI：跨平台原生UI开发新选择

icy 昨天 14 抢沙发

默认

摘要： Pascal FMXUI：跨平台原生UI开发新选择项目概述 FMXUI 是一个基于 Delphi FireMonkey (FMX) 框架的现代化用户界面组件库，由开发者 yang...

Pascal FMXUI：跨平台原生UI开发新选择

项目概述

FMXUI 是一个基于 Delphi FireMonkey (FMX) 框架的现代化用户界面组件库，由开发者 yangyxd 创建并维护。该项目旨在为 Pascal 开发者提供一套美观、易用且功能丰富的 UI 控件，简化跨平台应用程序的开发流程。

核心特性

1. 跨平台支持

FMXUI 充分利用 FireMonkey 框架的跨平台能力，支持： - Windows - macOS - iOS - Android - Linux

2. 现代化UI组件

项目提供了一系列精心设计的UI控件，包括： - 增强型按钮和输入框 - 卡片式布局容器 - 现代化进度指示器 - 自定义导航组件 - 主题化对话框

3. 响应式设计

所有组件都支持自适应布局，能够根据不同屏幕尺寸和方向自动调整。

4. 主题系统

内置多套预定义主题，支持亮色/暗色模式切换，同时允许开发者自定义主题样式。

安装与配置

安装步骤

克隆项目到本地：

text

git clone https://github.com/yangyxd/FMXUI.git

在 Delphi IDE 中添加库路径：
- 打开 Delphi IDE
- 进入 Tools → Options → Language → Delphi Options → Library
- 添加 FMXUI 源码目录到 Library Path
在项目中引用所需单元：

text

uses
  FMXUI.Core, FMXUI.Controls, FMXUI.Themes;

使用示例

示例1：创建现代化按钮

text

procedure TForm1.CreateModernButton;
var
  Btn: TFMXUIButton;
begin
  Btn := TFMXUIButton.Create(Self);
  Btn.Parent := Self;
  Btn.Text := '点击我';
  Btn.Width := 120;
  Btn.Height := 40;
  Btn.Position.X := 100;
  Btn.Position.Y := 100;
  Btn.OnClick := ButtonClickHandler;
  
  // 设置按钮样式
  Btn.ButtonStyle := bsPrimary;
  Btn.CornerRadius := 8;
end;

示例2：使用卡片布局

text

procedure TForm1.CreateCardView;
var
  Card: TFMXUICard;
  LabelTitle, LabelContent: TLabel;
begin
  Card := TFMXUICard.Create(Self);
  Card.Parent := Self;
  Card.Width := 280;
  Card.Height := 180;
  Card.Position.X := 50;
  Card.Position.Y := 50;
  Card.Elevation := 4;
  Card.CornerRadius := 12;
  
  // 添加标题
  LabelTitle := TLabel.Create(Card);
  LabelTitle.Parent := Card;
  LabelTitle.Text := '产品介绍';
  LabelTitle.Position.X := 16;
  LabelTitle.Position.Y := 16;
  LabelTitle.TextSettings.Font.Size := 18;
  LabelTitle.TextSettings.Font.Style := [TFontStyle.fsBold];
  
  // 添加内容
  LabelContent := TLabel.Create(Card);
  LabelContent.Parent := Card;
  LabelContent.Text := '这是一个使用FMXUI创建的现代化卡片组件。';
  LabelContent.Position.X := 16;
  LabelContent.Position.Y := 50;
  LabelContent.Width := 248;
  LabelContent.WordWrap := True;
end;

示例3：主题切换功能

text

procedure TForm1.SwitchTheme;
begin
  // 切换到暗色主题
  FMXUIThemeManager.ApplyTheme('Dark');
  
  // 或切换到自定义主题
  // FMXUIThemeManager.LoadFromFile('CustomTheme.json');
end;

示例4：创建现代化输入表单

text

procedure TForm1.CreateModernForm;
var
  EditUsername, EditPassword: TFMXUIEdit;
  BtnSubmit: TFMXUIButton;
begin
  // 用户名输入框
  EditUsername := TFMXUIEdit.Create(Self);
  EditUsername.Parent := Self;
  EditUsername.PlaceholderText := '请输入用户名';
  EditUsername.Width := 200;
  EditUsername.Height := 40;
  EditUsername.Position.X := 50;
  EditUsername.Position.Y := 50;
  
  // 密码输入框
  EditPassword := TFMXUIEdit.Create(Self);
  EditPassword.Parent := Self;
  EditPassword.PlaceholderText := '请输入密码';
  EditPassword.Password := True;
  EditPassword.Width := 200;
  EditPassword.Height := 40;
  EditPassword.Position.X := 50;
  EditPassword.Position.Y := 100;
  
  // 提交按钮
  BtnSubmit := TFMXUIButton.Create(Self);
  BtnSubmit.Parent := Self;
  BtnSubmit.Text := '登录';
  BtnSubmit.Width := 200;
  BtnSubmit.Height := 40;
  BtnSubmit.Position.X := 50;
  BtnSubmit.Position.Y := 160;
  BtnSubmit.OnClick := SubmitButtonClick;
end;

项目结构

text

FMXUI/
├── Source/                    # 源代码目录
│   ├── Core/                 # 核心功能模块
│   ├── Controls/             # UI控件实现
│   ├── Themes/               # 主题系统
│   └── Utils/                # 工具类
├── Examples/                 # 示例项目
├── Documentation/            # 文档
└── Resources/               # 资源文件