Qt/QML (2-qism) da Magistrlik Tafsilotlarini Ko'rish qanday amalga oshiriladi

Men ilgari Qt/QML da Magistr ma'lumotlarini ko'rishni qanday amalga oshirishni so'radim:

Asosiy ko'rinish, aslida, bir qator elementlar bilan ListView (har bir element hozir yashil to'rtburchak tomonidan taqdim etilgan tafsilotlar versiyasini yangilashni boshlaydigan tanlangan elementni ifodalaydi (quyida biriktirilgan ekran tasvirini ko'ring)

Hozirgi paytda men quyidagi masalalar bilan bir nechta muammolarni hal qilyapman:

  • ListView butun ekran balandligini qoplaydigan qilib Layerni qanday o'zgartirishim kerak?

  • ListView orqali "aylantirganda", men ekranning titrashi juda ko'pligini ko'rganmisiz? Buni qanday qilib kamaytirishim mumkin?

  • Yuqoridagi holat satrini (batareya zaryadlari kabi qurilmalar haqidagi ma'lumotlarning ko'rsatilishi) ko'rsatilishining oldini olish uchun

enter image description here

Edit: Modified the code by adding the ListView in a ScrollView. In this case, the ScrollView's height is the same as the screen height, which is also what I wanted (minus a 50 offset at the top, see Figure below). I think that the ListView is behaving as expected and not occupying more space that its items.

enter image description here

Endi nima qilish kerak, SrollView fon rangini ListView rangiga mos keladigan tarzda o'zgartirish. Bunday holda, ListView butun maydonni egallab turganidek ko'rinadi.

0

6 javoblar

Vaziyat satrini yashirish uchun eng oddiy narsa - mavzuni belgilash va manifest faylida qo'llash. Boshqa echimlar faoliyatni o'zgartirishni talab qiladi.

yourApp/android/res/values ​​ da quyidagi tarkibga ega bo'lgan theme.xml yarating:

<?xml version="1.0" encoding="utf-8"?>

    

Keyin manifestda, ekran yo'nalishini qo'shgan qatorga quyidagi mavzuni qo'shing:

android:theme="@style/AppTheme"

Asosiy oynada maksimal darajadagi o'rniga Window.FullScreen ko'rinishini foydalaning.

Joylashtirish uchun siz kamroq qilishingiz mumkin. Layout bilan hech qanday xatolik yo'q, faqat IMO standart tugmalarga mos keluvchi "mikro" GUI elementlari uchun mos keladi. Mana bu erda yengil, ammo ishlab bir misol.

Row {
  anchors.fill: parent
  ListView {
    id: lv
    width: 200
    height: parent.height
    model: 30
    delegate: Rectangle {
      width: 200
      height: 50
      color: index == lv.currentIndex ? "lightgray" : "white"
      Text {
        text: "item " + index
        color: "red"
        anchors.centerIn: parent
      }
      MouseArea {
        anchors.fill: parent
        onClicked: lv.currentIndex = index
      }
    }
    Rectangle {
      anchors.right: parent.right
      width: 5
      height: parent.height * parent.visibleArea.heightRatio
      color: "grey"
      y: parent.height * parent.visibleArea.yPosition
    }
  }
  Rectangle {
    width: parent.width - lv.width
    height: parent.height
    color: "green"
    Text {
      anchors.centerIn: parent
      text: "selected item n" + lv.currentIndex
      color: "white"
      font.pointSize: 15
    }
  }
}

Natija:

enter image description here

Yuqoridagi bo'sh joyga ega bo'lishni istasangiz, oddiygina barcha ota-onani ildiz Row elementi bilan to'ldirmang, aksincha uni o'lchamang .

2
qo'shib qo'ydi

Vaziyat satrini yashirish uchun eng oddiy narsa - mavzuni belgilash va manifest faylida qo'llash. Boshqa echimlar faoliyatni o'zgartirishni talab qiladi.

yourApp/android/res/values ​​ da quyidagi tarkibga ega bo'lgan theme.xml yarating:

<?xml version="1.0" encoding="utf-8"?>

    

Keyin manifestda, ekran yo'nalishini qo'shgan qatorga quyidagi mavzuni qo'shing:

android:theme="@style/AppTheme"

Asosiy oynada maksimal darajadagi o'rniga Window.FullScreen ko'rinishini foydalaning.

Joylashtirish uchun siz kamroq qilishingiz mumkin. Layout bilan hech qanday xatolik yo'q, faqat IMO standart tugmalarga mos keluvchi "mikro" GUI elementlari uchun mos keladi. Mana bu erda yengil, ammo ishlab bir misol.

Row {
  anchors.fill: parent
  ListView {
    id: lv
    width: 200
    height: parent.height
    model: 30
    delegate: Rectangle {
      width: 200
      height: 50
      color: index == lv.currentIndex ? "lightgray" : "white"
      Text {
        text: "item " + index
        color: "red"
        anchors.centerIn: parent
      }
      MouseArea {
        anchors.fill: parent
        onClicked: lv.currentIndex = index
      }
    }
    Rectangle {
      anchors.right: parent.right
      width: 5
      height: parent.height * parent.visibleArea.heightRatio
      color: "grey"
      y: parent.height * parent.visibleArea.yPosition
    }
  }
  Rectangle {
    width: parent.width - lv.width
    height: parent.height
    color: "green"
    Text {
      anchors.centerIn: parent
      text: "selected item n" + lv.currentIndex
      color: "white"
      font.pointSize: 15
    }
  }
}

Natija:

enter image description here

Yuqoridagi bo'sh joyga ega bo'lishni istasangiz, oddiygina barcha ota-onani ildiz Row elementi bilan to'ldirmang, aksincha uni o'lchamang .

2
qo'shib qo'ydi

Men kerakli darajada ScrollView ni ko'rib chiqmoqchiman.

Men sizning namunangizdan olib tashladim, ListView ga klipni qo'shishni qo'shdim va bajarildim.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow
{
    id: appWindow
    width: 1024
    height: 800
    visible: true

    Item {
        y: 50
        Layout.fillHeight: true
        width: appWindow.width

        RowLayout {
            id: mainLayout
            anchors.fill: parent
            ListModel {
                id: navigation
                ListElement { item: "Item 1" }
                Component.onCompleted: {
                    for (var i = 2; i < 50; i++) append({ item: 'Item' + i })
                }
            }

            ListView {
                id: listview
                Layout.fillHeight: true
                Layout.preferredWidth: 300
                contentWidth: 300
                model: navigation
                clip: true //<--- Add this, so there won't be no elements outside the ListView-area
                delegate: Rectangle {
                    id: wrapper
                    width: 300
                    height: 50
                    Text {
                        id: itemInfo
                        text: item
                        color: "red"
                    }
                }
            }

            Rectangle {
                x: 300
                y: 50
                Layout.preferredWidth: appWindow.width - listview.width-4
                height: appWindow.height - 50
                color: "green"
                border.width: 1
            }
        }
    }
}

Siz noto'g'ri tushintirishingiz mumkin bo'lgan ba'zi narsalar mavjud:

  1. The ListView provides no background. If you want such, you need to draw something behind it, e.g. a Rectangle
  2. The ListView does not provide ScrollBars by itself. You need to add them like this:

    ScrollBar.vertical: ScrollBar { }

  3. The ScrollBar has no native style. And the handle will disapear by default. You can find more than one question here, on how to style a ScrollBar.

  4. If you don't clip the ListView you will see some elements protruding the ListView and suddenly disappear. If you have nothing that covers this anyway, you should set clip: true
1
qo'shib qo'ydi
Yuqorida aytib o'tilganidek, ota-kodni ScrollBar o'chirib tashladim va hamma narsa yaxshi ishlaydi
qo'shib qo'ydi muallif BigONotation, manba

Men kerakli darajada ScrollView ni ko'rib chiqmoqchiman.

Men sizning namunangizdan olib tashladim, ListView ga klipni qo'shishni qo'shdim va bajarildim.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow
{
    id: appWindow
    width: 1024
    height: 800
    visible: true

    Item {
        y: 50
        Layout.fillHeight: true
        width: appWindow.width

        RowLayout {
            id: mainLayout
            anchors.fill: parent
            ListModel {
                id: navigation
                ListElement { item: "Item 1" }
                Component.onCompleted: {
                    for (var i = 2; i < 50; i++) append({ item: 'Item' + i })
                }
            }

            ListView {
                id: listview
                Layout.fillHeight: true
                Layout.preferredWidth: 300
                contentWidth: 300
                model: navigation
                clip: true //<--- Add this, so there won't be no elements outside the ListView-area
                delegate: Rectangle {
                    id: wrapper
                    width: 300
                    height: 50
                    Text {
                        id: itemInfo
                        text: item
                        color: "red"
                    }
                }
            }

            Rectangle {
                x: 300
                y: 50
                Layout.preferredWidth: appWindow.width - listview.width-4
                height: appWindow.height - 50
                color: "green"
                border.width: 1
            }
        }
    }
}

Siz noto'g'ri tushintirishingiz mumkin bo'lgan ba'zi narsalar mavjud:

  1. The ListView provides no background. If you want such, you need to draw something behind it, e.g. a Rectangle
  2. The ListView does not provide ScrollBars by itself. You need to add them like this:

    ScrollBar.vertical: ScrollBar { }

  3. The ScrollBar has no native style. And the handle will disapear by default. You can find more than one question here, on how to style a ScrollBar.

  4. If you don't clip the ListView you will see some elements protruding the ListView and suddenly disappear. If you have nothing that covers this anyway, you should set clip: true
1
qo'shib qo'ydi
Yuqorida aytib o'tilganidek, ota-kodni ScrollBar o'chirib tashladim va hamma narsa yaxshi ishlaydi
qo'shib qo'ydi muallif BigONotation, manba
  1. For your ListView to take all the height, you can simply set it to fill the height of the layout. However make sure the Layout (and its parent in your case) have the right size too. Size defaults to (0,0) for Item in QML.

    ListView {
        id: listview
        //...
        Layout.fillHeight: true
        //...
    }
    
  2. Regarding the "flickering", you can try increasing the ListView cacheBuffer property, which corresponds to the content height, in pixels, which is preloaded. However if this is really flickering, there's probably little you can do.

Displey yangilanish tezligi bilan bog'liq noto'g'ri vaqt bilan yangilanib, odatda, bir nechta buferlar va/yoki sinxronizatsiya yordamida hal etiladi. QtQuick bu murakkablikni yashiradi va ochilish uchun OpenGLdan foydalanadi, lekin so'nggi Qt versiyalari bilan Androidda hech qanday titrash yo'qligini ko'rmadim.

  1. Mavjud satrlarni Android manifest faylini tartibga solish orqali olib tashlashingiz mumkin:
  2. Bu boshqa postda, yoki yomon holatda

1
qo'shib qo'ydi
ListView ning kattaligi Items ning umumiy hajmidan ancha kengroq bo'lishi mumkin. ScrollView dan foydalanmasligingiz kerak. Buning uchun avvalo aylantirish/sallanabilirlik ( ListView ichida mavjud) va QtQuick.Controls 1.x ga tegishli bo'lgan yomonroq bajarish va endi faol ravishda saqlanmaydi. Ish stolining mahalliy uslubiga ehtiyoj tug'ilsa, men faqatgina QtQuick.Controls 1.x uskaseini ko'rishingiz mumkin.
qo'shib qo'ydi muallif derM, manba
ListView-ning balandligini parent.height-ga o'zgartirish bu masalani hal qilmaydi. Endi ListView faqat bitta qatorni ko'rsatadi va endi kaydırilmaydi.
qo'shib qo'ydi muallif BigONotation, manba
Layout.fillHeight-ni to'g'ri deb belgilashga harakat qildim va u hali ishlamayapti. Keyin ListView-ni ScrollView-ga qo'yish bilan bir oz boshqacha yondashuvni sinab ko'rdim. Bu holda, ikkinchi ekran tasvirida ko'rsatilganidek, ScrollView ekranning to'liq balandligini egallaydi. Menimcha, ListView elementlarning umumiy balandligidan ko'proq joy egallamaydi. Endi men ScrollView fon rangini ListViewga moslashtirishim kerak. Va bu orada: "ScrollView" da ListView-ni qo'shganimdan beri endi "titrash" yo'q! :)
qo'shib qo'ydi muallif BigONotation, manba
Mening yomonligim Layout.fillHeight: rost (javobimni tahrirlangan) dan foydalanishingiz mumkin. Bundan tashqari, Item shingilingizning ota-onasini to'ldirish uchun o'rnatilganligiga ishonch hosil qiling
qo'shib qo'ydi muallif Adrien Leravat, manba
DerB kabi @BigLudinski aytadiki, ListView, albatta, uning mazmunidan kattaroqdir va mening javobimda ta'kidlashni xohlagan kabi, sizning ota-onangizning o'lchami bilan bog'liq muammo bor. Bu, albatta, titrashni tushuntiradi: sizning o'lchamlaringiz noto'g'ri. Elementlar hajmini ko'rish uchun Rectangle elementlari bilan disk raskadrovka usulini sinab ko'rishingiz mumkin. Uning biroz ibtidoiy, lekin u ishlaydi.
qo'shib qo'ydi muallif Adrien Leravat, manba
  1. For your ListView to take all the height, you can simply set it to fill the height of the layout. However make sure the Layout (and its parent in your case) have the right size too. Size defaults to (0,0) for Item in QML.

    ListView {
        id: listview
        //...
        Layout.fillHeight: true
        //...
    }
    
  2. Regarding the "flickering", you can try increasing the ListView cacheBuffer property, which corresponds to the content height, in pixels, which is preloaded. However if this is really flickering, there's probably little you can do.

Displey yangilanish tezligi bilan bog'liq noto'g'ri vaqt bilan yangilanib, odatda, bir nechta buferlar va/yoki sinxronizatsiya yordamida hal etiladi. QtQuick bu murakkablikni yashiradi va ochilish uchun OpenGLdan foydalanadi, lekin so'nggi Qt versiyalari bilan Androidda hech qanday titrash yo'qligini ko'rmadim.

  1. Mavjud satrlarni Android manifest faylini tartibga solish orqali olib tashlashingiz mumkin:
  2. Bu boshqa postda, yoki yomon holatda

1
qo'shib qo'ydi
ListView ning kattaligi Items ning umumiy hajmidan ancha kengroq bo'lishi mumkin. ScrollView dan foydalanmasligingiz kerak. Buning uchun avvalo aylantirish/sallanabilirlik ( ListView ichida mavjud) va QtQuick.Controls 1.x ga tegishli bo'lgan yomonroq bajarish va endi faol ravishda saqlanmaydi. Ish stolining mahalliy uslubiga ehtiyoj tug'ilsa, men faqatgina QtQuick.Controls 1.x uskaseini ko'rishingiz mumkin.
qo'shib qo'ydi muallif derM, manba
ListView-ning balandligini parent.height-ga o'zgartirish bu masalani hal qilmaydi. Endi ListView faqat bitta qatorni ko'rsatadi va endi kaydırilmaydi.
qo'shib qo'ydi muallif BigONotation, manba
Layout.fillHeight-ni to'g'ri deb belgilashga harakat qildim va u hali ishlamayapti. Keyin ListView-ni ScrollView-ga qo'yish bilan bir oz boshqacha yondashuvni sinab ko'rdim. Bu holda, ikkinchi ekran tasvirida ko'rsatilganidek, ScrollView ekranning to'liq balandligini egallaydi. Menimcha, ListView elementlarning umumiy balandligidan ko'proq joy egallamaydi. Endi men ScrollView fon rangini ListViewga moslashtirishim kerak. Va bu orada: "ScrollView" da ListView-ni qo'shganimdan beri endi "titrash" yo'q! :)
qo'shib qo'ydi muallif BigONotation, manba
Mening yomonligim Layout.fillHeight: rost (javobimni tahrirlangan) dan foydalanishingiz mumkin. Bundan tashqari, Item shingilingizning ota-onasini to'ldirish uchun o'rnatilganligiga ishonch hosil qiling
qo'shib qo'ydi muallif Adrien Leravat, manba
DerB kabi @BigLudinski aytadiki, ListView, albatta, uning mazmunidan kattaroqdir va mening javobimda ta'kidlashni xohlagan kabi, sizning ota-onangizning o'lchami bilan bog'liq muammo bor. Bu, albatta, titrashni tushuntiradi: sizning o'lchamlaringiz noto'g'ri. Elementlar hajmini ko'rish uchun Rectangle elementlari bilan disk raskadrovka usulini sinab ko'rishingiz mumkin. Uning biroz ibtidoiy, lekin u ishlaydi.
qo'shib qo'ydi muallif Adrien Leravat, manba