QML FluentUI

To avoid compilation failures and character encoding issues (mojibake), follow these rules for text and internationalization:

• File Encoding: Use UTF-8 without BOM.
• Avoid Hardcoded Chinese: Do not include Chinese characters directly in the code or comments, as this can change file formats and cause build errors.
• Use Internationalization Functions: Always use the provided translation functions instead of hardcoded strings:
  • In C++: Use the tr() function.
  • In QML: Use the qsTr() function.

To build the library from source, clone the repository recursively and use CMake with the Ninja generator. You must provide the path to your Qt SDK via -DCMAKE_PREFIX_PATH.

Note: The main branch supports Qt 6. For Qt 5 support, switch to the Qt 5 branch.

git clone --recursive https://github.com/zhuzichu520/FluentUI.git
cd FluentUI
mkdir build
cd build
cmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <仓库路径>
cmake --build . --config Release --target all --parallel

The Script-DeployRelease script automates the deployment process by executing Qt's deployment tools.

Note: This script is only supported on Windows and macOS. It is not supported on Linux.

Before using the QML FluentUI library, ensure your environment meets the following requirements:

Required Modules:

• Qt Core
• Qt Quick
• Qt QML
• Qt ShaderTool
• Qt 5 Compatibility Module (Important)

Optional Modules:

• Qt LinguistTool (for translations)
• Qt Svg (Required if using Qt 5)

It is recommended to use the Qt Online Installer to obtain these modules.

Use the Script-UpdateTranslations script to manage your translation workflow. This is required whenever you add new tr() (C++) or qsTr() (QML) calls to your code.

Workflow:

1. Add tr() or qsTr() functions to your source code.
2. Run Script-UpdateTranslations to update the .ts files.
3. Write your translations in the .ts files.
4. Run Script-UpdateTranslations again to update the .qm files, making the translations effective in the application.

Use the Script-UpdateTranslations script to manage translation files (.ts and .qm) after adding new translatable strings via tr() or qsTr():

1. Run the script to update the .ts files based on your code changes.
2. Write the necessary translations in the .ts files.
3. Run the script again to update the .qm files, making the translations effective in the application.

When developing with the FluentUI scaffolding, ensure the following environment settings are met to avoid compilation failures:

• macOS Permissions: Grant full permissions to the entire project path to prevent compilation errors caused by missing permissions.
• File Encoding: Use UTF-8 without BOM. Avoid using Chinese characters (including comments) directly in the code, as they may change the file format or cause garbled text during compilation.
• Internationalization (i18n): Instead of hardcoding Chinese characters, use the provided internationalization functions:
  • In C++: Use the tr() function.
  • In QML: Use the qsTr() function.

The Script-DeployRelease script automates the deployment process by executing Qt's deployment tools.

• Supported Platforms: Windows and macOS.
• Functionality: Executes windeployqt on Windows or macdeployqt on macOS.
• Note: This script is not supported on Linux.

QML FluentUI provides a variety of components designed to follow Fluent Design principles. Key components include:

• FluApp: Application entry point with SPA (Single Page Application) routing support.
• FluWindow: Frameless window (Windows only).
• FluAppBar: Title bar for windows supporting dragging, minimizing, maximizing, and closing.
• FluText: General text component.
• FluButton / FluFilledButton / FluTextButton: Various button styles.
• FluToggleButton: Toggleable button.
• FluIcon: General icon component.
• FluRadioButton: Radio button.
• FluTextBox / FluMultiLineTextBox: Single-line and multi-line input fields.
• FluToggleSwitch: Switch component.

Use these components for advanced UI patterns:

• FluMenu: A popup menu component.
• FluCarousel: A carousel for cycling through content.
• FluScrollbar: A scroll bar component.
• FluMediaPlayer: Multimedia playback components.
• FluFlipView: A flip view component for content transitions.
• FluTheme: Manages theme settings, including theme color changes and dark mode support.

Use these components to define the main structure and windowing behavior of your application:

• FluApp: The initial entry point of the program. Supports Single Page Application (SPA) routing.
• FluWindow: A frameless window component (Note: This component only works on Windows).
• FluAppBar: A title bar component for the top of the window. Supports dragging, minimizing, maximizing, and closing.
• FluNavigationView: A responsive navigation view for application structure.