Can not use flexboxlayout

Allon

Hi,
With version 6.10 comes a new feature:
Flexboxlayout
https://doc.qt.io/qt-6/qml-qtquick-layouts-flexboxlayout.html#details
However I just installed qt 6.10 and when I compile, QT does not find it, it says :
qrc:/qt/qml/testflexboxlayout/Main.qml:14:9: FlexBoxLayout is not a type

I am quite sure I am using the right QT on my PC
cmake -DQt6_DIR=/home/xxx/Qt6_10/6.10.0/gcc_64/lib/cmake/Qt6/ -DCMAKE_TOOLCHAIN_FILE=/home/xxx/Qt6_10/6.10.0/gcc_64/lib/cmake/Qt6/qt.toolchain.cmake -DCMAKE_PREFIX_PATH=/home/xxx/Qt6_10/6.10.0/gcc_64/ ..

Do I need to install a special component ? I think import QtQuick.Layouts come by default with qt quick ?

Thanks in advance for your answer.

Emmanuel

Axel Spoerl

In CMakeLists.txt you need to do e.g.

find_package(Qt6 REQUIRED COMPONENTS Quick QuickControls2 QuickLayouts)

and

target_link_libraries(MyQtQuickApp
    PRIVATE
        Qt6::Quick
        Qt6::QuickControls2
        Qt6::QuickLayouts
)

In the QML file, you need to import layouts:

import QtQuick.Layouts

Allon

I have added find_package(Qt6 REQUIRED COMPONENTS Quick QuickControls2 QuickLayouts)
but it still does not find FlexBoxLayout, still the same error message.
In CMakeCache.txt I see that I am pointing to qt 6.10
//The directory containing a CMake configuration file for Qt6QuickLayouts.
Qt6QuickLayouts_DIR:PATH=/home/charruau/Qt6_10/6.10.0/gcc_64/lib/cmake/Qt6QuickLayouts
Thanks in advance

GrecKo

Share with us your CMakeLists.txt, main.cpp and an example Main.qml reproducing this issue.

Allon

Thanks.
My CmakeLists

cmake_minimum_required(VERSION 3.16)

project(testflexboxlayout VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 REQUIRED COMPONENTS Quick QuickControls2 QuickLayouts)

qt_standard_project_setup(REQUIRES 6.8)

qt_add_executable(apptestflexboxlayout
    main.cpp
)

qt_add_qml_module(apptestflexboxlayout
    URI testflexboxlayout
    QML_FILES
        Main.qml
)

# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
# If you are developing for iOS or macOS you should consider setting an
# explicit, fixed bundle identifier manually though.
set_target_properties(apptestflexboxlayout PROPERTIES
#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.apptestflexboxlayout
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(apptestflexboxlayout
    PRIVATE Qt6::Quick
)

include(GNUInstallDirs)
install(TARGETS apptestflexboxlayout
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

Main.cpp

#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.loadFromModule("testflexboxlayout", "Main");

    return app.exec();
}

Main.qml

import QtQuick 6.0
import QtQuick.Controls 6
import QtQuick.Layouts

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "FlexBoxLayout Example"

    ScrollView {
        anchors.fill: parent

        FlexBoxLayout {
            anchors.fill: parent
            flow: FlexBoxLayout.LeftToRight
            wrapMode: Flex.Wrap                // Qt6: use Flex.Wrap
            spacing: 8
            justifyContent: FlexBoxLayout.Center

            Text { text: "the"; font.pixelSize: 20 }
            Text { text: "big"; font.pixelSize: 20 }
            Text { text: "red"; font.pixelSize: 20 }  // removed \n for clarity
            Text { text: "fox"; font.pixelSize: 20 }
        }
    }
}

Axel Spoerl

The solution is in my previous post.
The project doesn't link to QuickLayouts, which makes them unavailable.

JKSH

@Allon said in Can not use flexboxlayout:

FlexBoxLayout is not a type

The error message is correct: FlexBoxLayout does not exist. The correct name is FlexboxLayout (lowercase 'b'!)

Also, your code contains another error: FlexboxLayout does not have a spacing property. Here is a suggestion to add it: https://bugreports.qt.io/browse/QTBUG-138002

@Axel-Spoerl said in Can not use flexboxlayout:

The solution is in my previous post.
The project doesn't link to QuickLayouts, which makes them unavailable.

No, find_package() and target_link_libraries() are not required to import QML modules.

They are only needed if you want to call the module's C++ API -- for example, if you want to call the C++ function QQuickStyle::setStyle() then you need to find and link to Qt6::QuickControls2.

Allon

Hi,
This was the problem! I also just found out, I typed it and it worked and could not see what was the difference. I had to use a hexdump to see the error !
46 6C 65 78 62 6F 78 4C 61 79 6F 75 74 20 7B
46 6C 65 78 42 6F 78 4C 61 79 6F 75 74 20 7B
62 and 42.
Thanks a lot for your help :)
Emmanuel