Михаиллл
МихаилллШілде 15, 2019, 4:10 Т.Ж.

Трудности с созданием ListView в QML

Добрый день.
Сделал несколько эллементов интерфейса.
Эти эллементы пытаюсь запихнуть в ListView интерфейс плывет, некоторые части не отображаются, а при нажатии снизу вверх ListView обновляется.
Скажите пожалуйста почему так? И как правильно добавлять в ListView? И можно ли Обойтись без ListView , просто размещая эллементы на основном окне, но так, что-бы была возможность их прогручивать?

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    id: mainElement
    width: 400
    height: 700

    ListView
    {
        id: listViewFerstWindow
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        model: 1

        delegate: Item
        {
            id: itemDelegateFirstWindow

    Rectangle {
        id: rectangle
        height: 19
        color: "#e3ded3"
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0

        Text {
            id: element1
            x: 78
            y: 4
            width: 214
            height: 14
            text: qsTr("8 (800) 700 0002 - отдел продаж")
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 12
        }
    }

    Rectangle {
        id: rectangle1
        height: mainElement.height * 0.15
        color: "#ffffff"
        anchors.top: rectangle.bottom
        anchors.topMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        Image {
            id: imageLabel
            width: parent.width * 0.75
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            fillMode: Image.PreserveAspectFit
            source: "qrc:/Images/Images/Xwd9C1BM5QA.jpg"
        }

        Button {
            id: buttonMenu
//            x: 314
//            y: 37
            anchors.left: imageLabel.right
            anchors.right: parent.right
            width: parent.height * 0.5
            height: parent.height * 0.8
            text: qsTr("")
            anchors.rightMargin: parent.height * 0.2
            anchors.leftMargin: parent.height * 0.2
            anchors.verticalCenter: parent.verticalCenter
            background: Rectangle{
                color: "white"
            }

            Image {
                id: image1
                anchors.fill: parent
                fillMode: Image.PreserveAspectFit
                source: "qrc:/Images/Images/menuRed.png"
            }
        }
    }

    Rectangle {
        id: rectangle2
        x: 141
        y: 143
        width: 99
        height: 26
        color: "#db4c4c"
        radius: height * 0.3

        MouseArea {
            id: mouseAreaRassrochka
            anchors.bottomMargin: 0
            anchors.fill: parent

            Text {
                id: element2
                x: 82
                y: parent.height * 0.05
                //width: 5
                height: 7
                text: qsTr("Продаем")
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.family: "Times New Roman"
                elide: Text.ElideLeft
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: parent.height * 0.4
            }

            Text {
                id: element3
                x: 87
                y: parent.height * 0.45
                text: qsTr("в рассрочку!")
                font.weight: Font.ExtraBold
                font.family: "Times New Roman"
                font.capitalization: Font.MixedCase
                color: "white"
                anchors.horizontalCenterOffset: 0
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: parent.height * 0.4
            }
        }
    }

    Rectangle{
        color: "red"
        width: 200
        height: 200
        y: 650
    }


}
    }



}


Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!

13
Pavel K.
  • Шілде 15, 2019, 4:29 Т.Ж.
  • (өңделген)

например для селфиш ОС есть SilicaFlickable — самый базовый контейнер, который позволяет прокручивать экран
или обрати внимание на VerticalScrollDecorator {}
ну или вот https://doc.qt.io/qt-5.9/qtquickcontrols2-gallery-pages-scrollbarpage-qml.html
делает тоже самое что и SilicaFlickable

//Page {
// id: page

SilicaFlickable {

 }

// }

    Михаиллл
    • Шілде 15, 2019, 4:36 Т.Ж.

    У меня нет селфиш, есть виндовс, на худой конец есть макос и линукс. Но можно ли в виндовсе это сделать?

      Алексей Внуков
      • Шілде 15, 2019, 4:38 Т.Ж.

      на первый взгляд плывет из-за не правильного делегата. заменить можно, но все зависит от задачь которые преследуются. обьясните что хотели добиться, чтоб понять куда пнуть исправлять.

        Михаиллл
        • Шілде 15, 2019, 4:44 Т.Ж.

        Мне нужно что-бы було окно, которое прокручивается по вертикали (т.к. много эллементов интерфейса и они не влезают по вертикали в видимую часть экрана). В него ничего не нужно добавлять и убирать.

          Pavel K.
          • Шілде 15, 2019, 4:46 Т.Ж.
          • (өңделген)

          Скорее всего у вас модель не обьявлена, вот мой пример кода, но раз вам только скроллер нужен поместите все в контейнер Flickable {}

           model: modelVm.newList // newList  возвращает  список обьектов из плюсов
                  delegate: Rectangle{
                      width: parent.width
                      height: childrenRect.height + Theme.paddingMedium * 1.5 // heith like children's
                      color: "transparent"
                      border{ color: "Orange"; width:4}
                      Column{
                          width: parent.width
                          anchors.top: parent.top
                          anchors.left: parent.left
                          anchors.right: parent.right
                          anchors.margins: Theme.paddingMedium
          
                          spacing: Theme.paddingMedium
                          Label{
                              width: parent.width
                              text: "UserId: " + model.modelData.userId
                              wrapMode: Text.WordWrap
                          }
          
                          Label{
                              width: parent.width
                              text: "title: " + model.modelData.title
                              wrapMode: Text.WordWrap
                          }
                          Label{
                              width: parent.width
                              text: "Body: " + model.modelData.body
                              wrapMode: Text.WordWrap
                          }
          
            R
            • Шілде 15, 2019, 4:46 Т.Ж.
            • (өңделген)

            важко розібратись у цьому вашому коді... так наперший погляд не варто писати

                    id: listViewFerstWindow
                    anchors.right: parent.right
                    anchors.rightMargin: 0
                    anchors.left: parent.left
                    anchors.leftMargin: 0
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 0
            

            якщо ви хочите заповнити весь простір, достатньо anchors.fill: parent

            і ніде не додано розмір елемента
            delegate: Item
            {
            id: itemDelegateFirstWindow

                    спробуйте дописати         
                    width: parent.width
                    height: 100
            
              Михаиллл
              • Шілде 15, 2019, 4:50 Т.Ж.

              Спасибо, сделал так, размеры теперь не плывут. Но глюк с вырубанием экрана при перетаскиванем вверх остался.
              Скажите пожалуйста, из-за чего это может быть?

                  ListView
                  {
                      id: listViewFerstWindow
                      anchors.right: parent.right
                      anchors.rightMargin: 0
                      anchors.left: parent.left
                      anchors.leftMargin: 0
                      anchors.bottom: parent.bottom
                      anchors.bottomMargin: 0
                      anchors.top: parent.top
                      anchors.topMargin: 0
                      model: 1
              
                      delegate: Item
                      {
                          id: itemDelegateFirstWindow
                          anchors.left: parent.left
                          anchors.right: parent.right
                          height: mainWindow1.height
              
                Михаиллл
                • Шілде 15, 2019, 4:55 Т.Ж.

                Может быть еще можно использовать ScrollView? Пробовал все поместить в ScrollView, но экран после этого не прокручивается.

                  Pavel K.
                  • Шілде 15, 2019, 4:56 Т.Ж.

                  советую заглянуть в офиц документацию по Qt https://doc.qt.io/qt-5.9/qtquickcontrols2-gallery-pages-scrollbarpage-qml.html
                  задайте фликабл контейнеру width: Theme.paddingLarge а hight : parent.heigh , где то намудрили скорее всего

                    Pavel K.
                    • Шілде 15, 2019, 5:02 Т.Ж.

                    https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollview.html
                    читайте внимательнее )))
                    Примечание. ScrollView не обрезает содержимое автоматически. Если он не используется как полноэкранный элемент, вам следует установить для свойства clip значение true, как показано выше.
                    и там еще пример реализации всякой есть

                      Михаиллл
                      • Шілде 15, 2019, 5:28 Т.Ж.
                      • Жауап шешім ретінде белгіленді.

                      Вот такой вариант заработал

                          Flickable {
                              id: flickable
                              anchors.right: parent.right
                              anchors.rightMargin: 0
                              anchors.left: parent.left
                              anchors.leftMargin: 0
                              anchors.bottom: parent.bottom
                              anchors.bottomMargin: 0
                              anchors.top: parent.top
                              anchors.topMargin: 0
                              contentHeight: 2000
                      
                        Алексей Внуков
                        • Шілде 15, 2019, 6:07 Т.Ж.

                        вопрос, а зачем вообще ListView если там будет только 1 элемент? и как говорилось выше, в данной ситуации, это не правильная запись

                                anchors.right: parent.right
                                anchors.rightMargin: 0
                                anchors.left: parent.left
                                anchors.leftMargin: 0
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 0
                                anchors.top: parent.top
                                anchors.topMargin: 0
                                contentHeight: 2000
                        

                        правильно будет написать

                         anchors.fill: parent
                        
                          Михаиллл
                          • Шілде 15, 2019, 7:24 Т.Ж.

                          Спасибо. Просто программа мне автоматом такую запись выдает порой.

                            Пікірлер

                            Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
                            Кіріңіз немесе Тіркеліңіз
                            Г

                            C++ - Тест 001. Первая программа и типы данных

                            • Нәтиже:66ұпай,
                            • Бағалау ұпайлары-1
                            t

                            C++ - Тест 001. Первая программа и типы данных

                            • Нәтиже:33ұпай,
                            • Бағалау ұпайлары-10
                            t

                            Qt - Тест 001. Сигналы и слоты

                            • Нәтиже:52ұпай,
                            • Бағалау ұпайлары-4
                            Соңғы пікірлер
                            G
                            GoattRockҚыр. 3, 2024, 1:50 Т.Қ.
                            Linux жүйесінде файлдарды қалай көшіруге болады Задумывались когда-нибудь о том, как мы привыкли доверять свои вещи службам грузоперевозок? Сейчас такие услуги стали неотъемлемой частью нашей жизни, особенно когда речь идет о переездах между …
                            d
                            dblas5Шілде 5, 2024, 11:02 Т.Ж.
                            QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                            k
                            kmssrАқп. 8, 2024, 6:43 Т.Қ.
                            Qt Linux - Сабақ 001. Linux астында Autorun Qt қолданбасы как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                            АК
                            Анатолий КононенкоАқп. 5, 2024, 1:50 Т.Ж.
                            Qt WinAPI - Сабақ 007. Qt ішінде ICMP Ping арқылы жұмыс істеу Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                            Енді форумда талқылаңыз
                            Evgenii Legotckoi
                            Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
                            добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
                            F
                            FynjyШілде 22, 2024, 4:15 Т.Ж.
                            при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …
                            BlinCT
                            BlinCTМаусым 25, 2024, 1 Т.Ж.
                            Нарисовать кривую в qml Всем привет. Имеется Лист листов с тосками, точки получаны интерполяцией Лагранжа. Вопрос, как этими точками нарисовать кривую? ChartView отпадает сразу, в qt6.7 появился новый элемент…
                            BlinCT
                            BlinCTМамыр 5, 2024, 5:46 Т.Ж.
                            Написать свой GraphsView Всем привет. В Qt есть давольно старый обьект дял работы с графиками ChartsView и есть в 6.7 новый но очень сырой и со слабым функционалом GraphsView. По этой причине я хочу написать х…
                            Evgenii Legotckoi
                            Evgenii LegotckoiМамыр 2, 2024, 2:07 Т.Қ.
                            Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Добрый день. По моему мнению - да, но то, что будет касаться вызовов к функционалу Андроида, может создать огромные трудности.

                            Бізді әлеуметтік желілерде бақылаңыз