Convert Figma logo to code with AI

jaredtao logoTaoQuick

a cool QtQuick/qml component library and demo(一套酷炫的QtQuick/Qml基础库和示例)

1,344
359
1,344
8

Top Related Projects

2,546

The source code for the upcoming qml book

A curated list of awesome Qt and QML libraries, resources, projects, and shiny things.

Quick Overview

TaoQuick is a Qt/QML component library designed to simplify the development of cross-platform applications. It provides a collection of custom QML components and utility functions, aiming to enhance the efficiency and aesthetics of Qt-based user interfaces.

Pros

  • Rich set of pre-built QML components for rapid UI development
  • Cross-platform compatibility (Windows, Linux, macOS, Android, iOS)
  • Comprehensive documentation and examples
  • Active development and community support

Cons

  • Requires familiarity with Qt and QML
  • May have a learning curve for developers new to Qt ecosystem
  • Some components might not fit all design requirements out-of-the-box
  • Dependency on Qt framework limits use in non-Qt projects

Code Examples

  1. Creating a custom button:
import TaoQuick 1.0

TButton {
    width: 120
    height: 40
    text: "Click Me"
    onClicked: console.log("Button clicked!")
}
  1. Using a loading indicator:
import TaoQuick 1.0

CusLoading {
    width: 100
    height: 100
    running: true
}
  1. Implementing a custom dialog:
import TaoQuick 1.0

CusDialog {
    title: "Confirmation"
    content: "Are you sure you want to proceed?"
    onAccepted: console.log("User accepted")
    onRejected: console.log("User rejected")
}

Getting Started

  1. Clone the TaoQuick repository:

    git clone https://github.com/jaredtao/TaoQuick.git
    
  2. Add TaoQuick to your project's .pro file:

    include(path/to/TaoQuick/TaoQuick.pri)
    
  3. Import TaoQuick in your QML files:

    import TaoQuick 1.0
    
  4. Start using TaoQuick components in your QML:

    TaoQuickApp {
        // Your app content here
    }
    

Competitor Comparisons

2,546

The source code for the upcoming qml book

Pros of qmlbook

  • Comprehensive educational resource for learning QML
  • Covers a wide range of QML topics and concepts
  • Regularly updated with new content and examples

Cons of qmlbook

  • Primarily focused on documentation rather than providing reusable components
  • May not offer as many ready-to-use UI elements for rapid development

Code comparison

TaoQuick:

import TaoQuick 1.0

TaoButton {
    text: "Click me"
    onClicked: console.log("Button clicked")
}

qmlbook:

import QtQuick 2.12
import QtQuick.Controls 2.12

Button {
    text: "Click me"
    onClicked: console.log("Button clicked")
}

The code comparison shows that TaoQuick provides custom components (like TaoButton) with pre-built styling and functionality, while qmlbook focuses on teaching standard QML components and best practices.

TaoQuick is more suitable for developers looking for a ready-to-use UI component library, while qmlbook is better for those wanting to learn QML from the ground up and understand its core concepts.

A curated list of awesome Qt and QML libraries, resources, projects, and shiny things.

Pros of awesome-qt-qml

  • Comprehensive collection of Qt/QML resources and libraries
  • Regularly updated with community contributions
  • Covers a wide range of topics and use cases

Cons of awesome-qt-qml

  • Lacks actual code implementations or examples
  • Not a ready-to-use framework or component library
  • May require additional research to find suitable solutions

Code Comparison

TaoQuick provides ready-to-use QML components:

import TaoQuick 1.0

TButton {
    text: "Click me"
    onClicked: console.log("Button clicked")
}

awesome-qt-qml doesn't contain code, but links to resources:

## UI Components
- [QML Material](https://github.com/papyros/qml-material) - Material Design implemented in QML
- [Fluid](https://github.com/lirios/fluid) - Cross-platform QtQuick components for building fluid and dynamic applications

Summary

TaoQuick is a practical QML component library with ready-to-use elements, while awesome-qt-qml serves as a curated list of Qt/QML resources. TaoQuick is more suitable for developers looking for immediate implementation, whereas awesome-qt-qml is better for those seeking a variety of tools and libraries to explore.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

简体中文


Contents

TaoQuick

This is a QtQuick/Qml Component library, integrated some commonly used QtQuick components, and

make the appropriate function expansion to facilitate development of Qml applications.

Badge preview

Project

Best Practices planLicense
CII-badgelicense-badge

Qt marketplace

https://marketplace.qt.io/collections/newest/products/taoquick

Build

WindowsUbuntuMacOSAndroidIOS
win-badgeubuntu-badgemacos-badgeandroid-badgeios-badge

Release

ReleasedDownloadDownload count
release-badgedownload-badgedownload-latest

Repository status

TagLanguagesTop Languagecode sizerepo size
tag-latestlanguangestaolanguagecode-sizerepo-size

Issue

Issuespull request
issuse-badgepull-request

Other status

commit freqlast commitdateforksstars
commit-activecommit-latestrelease-dateforks-badgestars-badge

Some Demo Preview

Main Page

Change Skin

Multi-Language

Some Button Controls

Data entry Controls

Table Controls

ListView with tab

Rect Drag Controls

Wizard

Mouse Click Effect

Atom Joggle

ShaderToy-Snail

ShaderToy-SuperMario

Environment

  • Qt 5.9

  • Qt 5.12

  • Qt 5.15

  • Qt6.2 (at branch qt6)

Project Struct

Project Struct as flow:

echo content as table:

ContentReferenceRemark
srcTaoQuick Core Librarysome qml code, picture and scripts for support designer, not has c++ code
exampessome demoshow how to use TaoQuick Core Library
3rdpartythrid party library
mkspecsqmake extern
.githubgithub-actionsCI CD

TaoQuick Core Library

Core Library source code path:

src/TaoQuick/Qml

Content:

To avoid confusion with Qt default components, TaoQuick components names all begin with Cus (The abbreviation of Custom)

CusConfig is global configuration, mainly contain font、 theme and so on, all components are displayed in this configuration

Other Contents reference to above table:

ContentReferenceRemark
BasicBasic Controlssuch as Text, ToolTip, It is used to unify the basic components in the whole project and facilitate the global replacement when the project becomes huge
CusBackgroundA simple background boxit is usually placed at the beginning of the program to absorb mouse focus from the white space
CusButtonbuttonSome commonly used buttons have been encapsulated, and various effects can be customized again
CusCheckBoxCheckBox
CusComboBoxComboBox
CusImageBasic Image
CusInputInput
CusLabelLabel
CusListViewListSimaple custom scrollbars
CusPopupPopup
CusScrollScrollBar
CusSliderSlider
CusSpinBoxSpinBox
CusTableTableIt needs to be used with specific C++ model to support the selection, check, draw rect selection, anti-selection, continuous selection and all selection
EffectEffectAnimation、PageSwitch and ShaderToy
MiscOthers

Use TaoQuick

get code

git clone https://github.com/jaredtao/TaoQuick.git
cd TaoQuick 

qmake

You just need import '.pri' file to project and add import Path to QmlEngine, TaoQuick will be use as local file or qrc resource.

Compared with 'Qml module' and 'Qml C++ plugin', this usage has the following advantages:

  • After importing '.pri', no additional compile, generation of dll or plugin are required

  • No additional copy resources are required to deployment the program

  • After importing '.pri', Qt Creater can support TaoQuick Qml code highlighting and double-clicking the Follow symbol

  • After import the module 'import TaoQuick 1.0' in Qml, you can use the TaoQuick component in The Designer mode of Qt Creater by dragging or visual property editor.(principle: Generate metainfo required by Designer via some script)

detail use step:

  1. copy 'TaoQuick' directory and 'TaoQuick.pri' file from TaoQuick/src to your project

  2. Import 'TaoQuick.pri' files in your project 'pro' file

for eaxmple:

include(TaoQuick.pri)

TaoQuick.pri will define a MACRO: TaoQuickImportPath.

Debug mode will use TaoQuick as local file, and release mode for qrc resource.

  1. add import path in cpp

Before load source qml, TaoQuick need add import path to QmlEngine and set imagePath to context.

if use QQuickView, TaoQuick can be use as flow:

    view.engine()->addImportPath(TaoQuickImportPath);
    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);

if use QmlEngine, TaoQuick can be use as flow:

    engine.addImportPath(TaoQuickImportPath);
    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);

cmake

TaoQuick start support cmake after version 0.5.0 , it's same as qmake.

detail use step:

  1. copy 'TaoQuick' directory and 'taoQuick.cmake' file from TaoQuick/src to your project

  2. Import 'taoQuick.cmake' files in your project 'CMakeLists.txt' file

include(taoQuick.cmake)

taoQuick.cmake will define a MACRO: TaoQuickImportPath.

Debug mode will use TaoQuick as local file, and release mode for qrc resource.

Release mode taoQuick.cmake also define a MACRO TaoQuickRes, that location to qrc file.

your project should add TaoQuickRes to executable, like this:

if (CMAKE_BUILD_TYPE MATCHES "Release")
    add_executable(MyApp ${someSource} ${TaoQuickRes})
else()
    add_executable(MyApp ${someSource})
endif()
  1. add import path in cpp

Before load source qml, TaoQuick need add import path to QmlEngine and set imagePath to context.

if use QQuickView, TaoQuick can be use as flow:

    view.engine()->addImportPath(TaoQuickImportPath);
    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);

if use QmlEngine, TaoQuick can be use as flow:

    engine.addImportPath(TaoQuickImportPath);
    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);

Sponsorship

If you feel the share content is good, treat the author a drink.

it's WeChat Pay and Alipay