Git Product home page Git Product logo

fluentui's Introduction

QML FluentUI

A fluent design component library for Qt QML, You need Pyside6 PySide6-FluentUI-QML

win-badge ubuntu-badge macos-badge release-badge download-badge download-latest

English | 简体中文

This is a beautiful FluentUI component library based on Qt QML. Currently the main branch supports Qt 6. If you want to use it in Qt 5, checkout the Qt 5 branch.

Requirements

  • Qt Core, Qt Quick, Qt QML, Qt ShaderTool, Qt 5 Compatibility Module. (Essential)
  • Qt LinguistTool (optional,for translations)
  • Qt Svg (optional, however essential for Qt 5)

Use Qt Online Installers to acquire the modules (Recommended) or compile them first before using the library.

⚽ Get started

  • Download the pre-built release. (Please specify your platform and compilers.)

  • run example program.

or

  • Clone the repository.
git clone --recursive https://github.com/zhuzichu520/FluentUI.git
  • Build
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 <PATH_TO_THE_REPOSITORY>
cmake --build . --config Release --target all --parallel
  • Use your IDE (Qt Creator or CLion) to open the project. (only CMake supported).
  • Compile the project. Then try to execute the example demo program.

  • Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.

📑 Documentations

(Work in progress...🚀)

Supported components

Catalog Detail Notes / Demos
FluApp The initial entry of the program Router supported(SPA)
FluWindow Frameless Window *This only works on windows
FluAppBar Title bar on top of the window Drag, minimize, maximize and close are supported.
FluText Common text
FluButton Common button btn
FluFilledButton Filled button filledbtn
FluTextButton Text button textbtn
FluToggleButton Toggle buttons togglebtn
FluIcon Common icon icons
FluRadioButton radio button radiobtn
FluTextBox Single-line input box textbox
FluMultiLineTextBox Multi-lines input area textarea
FluToggleSwitch toggle switch toggleswitch

View more here!

Reference

License

This FluentUI library currently licensed under MIT License

Star History

Star History Chart

⚡ Visitor count

fluentui's People

Contributors

abc-xx avatar fejq avatar felixonmars avatar gaomengkai avatar imaben avatar jesseguox avatar kevinlq avatar liangliang723 avatar maplefater avatar mariuszmaximus avatar mentalfl0w avatar parker-int64 avatar pemvin avatar runhey avatar weypro avatar zhuzichu520 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fluentui's Issues

FluWindow 中如何使用 registerForPageResult?

请问如何在 FluWindow 中使用 registerForPageResult,以达到将打开的界面中填写的数据回传到主界面?
主界面是 FluWindow 的情况下,报错如下
image
博主给的模板是在 FluScrollablePage 下设置这个属性,使用正常,有方法能在 FluWindow 中使用吗?

内存与GPU占用问题

随着在左侧导航栏中点开的页面增多,使用的内存越来越大,从最开始的90MB增长到了500多MB。

鼠标悬浮/点击区域不准确

你好,体验了一下Example,FluentUI 实现的非常棒,对于qml刚入门的我有很大的帮助,非常感谢你的开源项目。

系统型号:windows 10 ThinkCenter
FluentUI Example 版本:1.1.9

在我体验过程中,遇到点问题,希望对产品的优化有帮助:

左侧导航栏及所有的按钮,鼠标影响区域都不准确。
1、左侧导航栏:
1.1 经常遇到鼠标在导航栏上,却无法点击。
1.2 点击某个导航栏 经常会错误的响应到相邻的导航栏按钮。比方说我鼠标在 TimePicker 上,但是点击后却响应了DatePicker

2、按钮:
2.1 所有按钮影响位置感觉都偏上,鼠标需要点击在按钮的top位置 偏上一点才可以响应
2.2 Basic input -> Buttons 右侧的Disabled 按钮,经常会点击不到 (尤其是 Standard Button)。我需要把鼠标放在这个Disabled Btn的很靠上的位置,才可以响应我的操作。

能否自定义全局字体

以前的方法是在main函数中定义,不过好像只对.ui有效,对qml无效。
这个是以前的方法

QApplication a(argc, argv);
QFont f;
f.setFamily(QFontDatabase::applicationFontFamilies (QFontDatabase::addApplicationFont(":/res/fonts.ttf")).at(0));
a.setFont(f);

另外,FluColorView 的两个竖着的颜色滑动条拖动一点就会拖不动变成整个页面上下拖动了

FluApp::navigate 单例模式

example程序里左下角每点击一次“About”就会弹出一个新窗口,这个不太合理。FluApp::navigate如果可以增加一个是否启用单例模式参数会更好,每次最多只能有一个该界面被打开。如果重复打开,就激活之前的界面。

QT6 支持

你好,
我看项目上你删除了qt6的分支,当前的版本在qt6下无法编译,需要使用Qt5Compat.GraphicalEffects, 后续是否会有qt6的支持;
而且当前的1.1.4这个版本在macos上一片白屏没有任何控件。

Icon的设置

请问FluPaneItem的ICON的设置如何使用本地文件,最好是矢量svg文件

程序无法动态切换语言

正常QML程序是可以切换语言并即时生效的,但是Fluent UI通过FluApp打开的页面无法即时更改显示语言,必须重新用FluApp打开界面才可以显示新语言。

ArchLinux 环境下编译失败

如题。

环境

QMake version 3.1
Using Qt version 6.5.0 in /usr/lib
cmake version 3.26.3

原因

QT_INSTALL_QML 不知道为什么变成了 /usr/lib/cmake/Qt6Core/../../../qml 也就是 /usr/qml

修复方式

手动修改 src/CMakeLists.txtset(QT_INSTALL_QML ${Qt6Core_DIR}/../../../qml)set(QT_INSTALL_QML /usr/lib/qt6/qml)

手动执行

mkdir build
cd build
cmake ../ -DCMAKE_BUILD_TYPE=Release
sudo make

为什么是手动呢?原因是因为我的 Qt Creator 不知道抽了什么疯,改 src/CMakeLists.txt 文件不生效。
另外求问 cmake 指定 QT 路径的方法。

建议

或许可以换一个方式探测 qml 路径?

Msys2 编译支持

  1. 编译环境: Msys2 环境
pacman -S mingw-w64-x86_64-cmake mingw-w64-x86_64-ninja
pacman -S --needed base-devel mingw-w64-x86_64-toolchain
pacman -S mingw-w64-x86_64-qt6
  1. 编译过程
cd FluentUI
mkdir build
cd build
cmake ../
ninja
  1. 编译输出结果
'C:\Users\xxx\local\msys2-qt6\mingw64\lib\cmake\Qt6Core\..\..\..\qml\FluentUI\..\..\bin\qmlplugindump.exe'  不是内部或外部命令,也不是可运行的程序
  1. 问题:请问有没有可能提供Msys2的编译支持。

Icon设置

Icon已经可以加载本地图像,但是对于矢量线条在夜间模式下会显示不清楚

为 QtQuick.Controls 中已有的控件定义主题

您好,我看您的实现方式是基于Controls已有组件重新封装一份,在Qt的文档中有提到关于自定义主题的部分,实现成主题的话就可以直接调用Controls组件而不用重新命名了。我在想这样实现是不是会好一些?

很多控件只有鼠标hovered而没有鼠标pressed的视觉反应

我看了下example程序,
FluSlider,FluToggleSwitch,FluTextBox具备hovered和pressed的视觉特效
FluButton,FluIconButton,FluNavigation缺少pressed的视觉特效
FluCheckBox缺少hovered和pressed的视觉特效

我觉得FluButton很常用,比较重要,它缺少鼠标按压的视觉效果

关于FluPivot的一点建议

组件名称: FluPivot,文件: FluPivot.qml

  • 问题描述1: FluPivot没有可供使用的currentIndex

在使用这种能够切换视图的组件的时候希望能够根据自己的想法切换currentIndex,此功能在FluFlipView中是提供了的。

解决办法:在FluPivot.qml加上如下属性

...
+ 12      property alias currentIndex: nav_list.currentIndex
...
  • 问题描述2: FluPivot组件高度(Height)问题

在布局中使用了

Layout.fillWidth: true
Layout.fillHeight: true

之后, 横向布局确实布满可用空间,但是纵向高度没占满导致FluPivotItem中的内容显示不全。

解决办法:手动设置了如下高度

height: 900

能够使内容显示出来,但是问题是两个或者多个FluPivotItem的高度全是手动设置的高度(900)了。

希望能达到的效果是根据页面纵向排列的内容多少而确认高度大小(目前想到的是根据FluPivotItem的高度来决定)

文档完善

麻烦把文档完善一下,谢谢!
包括编译环境(如qt版本等),使用方法等等。

一点小建议

做的挺好,不过建议优化一下FluArea,随窗口变化而自动调整组件位置;example 那个 Theming/Awesome,在最大窗口化时存在卡顿(可能与我电脑有关,组件太多绘制不过来)

文件读写ui

作者大大什么时候加一下文件读写界面的ui

建议:FluWindows的onClosing事件不做操作

我的程序有个需求,是在点击关闭按钮后,让用户选择是否真正退出,但是Fluent UI库已经对onClosing事件做了响应,导致所有窗口资源在我进行操作前就已经被销毁,是否可以在库的层面上去除对这一事件的响应呢?
image

我的系统是macOS。

Qt Creater编译失败

环境:
win11
qt creator 9.0.2
编译套件 qt 6.4.2 mingw64bit

FluentUI可以正常编译,但是example编译报错,请教下大佬是什么原因...
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.