Текст выходит за пределы строки (окна) на круглом прямоугольнике. (Решение без использования Qt5Compat.GraphicalEffects и OpacityMask)

У меня есть qml ListView, и внутри него я загружаю My ListModel. Мой компонент делегата представляет собой прямоугольник, содержащий компонент Text. Проблема заключается в том, что когда я прокручиваю ListView, некоторый алфавит, например «H», выходит за пределы определенного прямоугольника. Мой определенный прямоугольник имеет закругленный край (радиус), и алфавит появляется на закругленном крае. Есть ли какое-нибудь решение?

Увеличенное изображение

Обычный вид

Пример кода — это краткое изложение основного кода, представьте, что представление списка — это весь алфавит.

blabla.qml

Rectangle{
    anchors.fill: parent
    color: "#141414"

    // Rect to keep listView component
    Rectangle {
        id: rectList
        anchors.centerIn: parent
        width: 200
        height: 400
        radius: 10
           
        ListModel{
            id: bla
            ListElement{name: "A"} ....}

        Component{
            id: delegateComponent
            Rectangle{
                id: rectListView
                width: rectList.width
                height: 30// txt.implicitHeight //removed implicitHeight
                color: "transparent"
                // radius: 10
                z: -1
                readonly property ListView __lv: ListView.view // read only property for saving model current index
                Text {
                    id: txt
                    property string __longString
                    anchors.fill: rectListView
                    anchors.left: rectListView.left
                    anchors.bottomMargin: 5
                    width: rectListView.width
                    height: rectListView.height
                    text: model.name
                   }
               }

           ListView{
               id: lv
               model: listModel
               delegate: delegateComponent
               anchors.fill: parent
               anchors.centerIn: parent
               focus: true
               clip: true
               cacheBuffer: 5000
               spacing: 15
   }

ОБНОВИТЬ:

Попробуйте онлайн

Вы говорите, что какой-то текст выглядит нормально, но только часть текста рисуется за пределами вашего прямоугольника?

JarMan 21.11.2022 17:03

Обратите внимание, что ваш пример кода не определяет высоту/ширину для вашего прямоугольника делегата.

JarMan 21.11.2022 17:05

@JarMan да, точно. Текст находится внутри прямоугольника. Если вы увеличите изображение, вы увидите его в левом нижнем углу.

siamak mirifar 21.11.2022 22:39

Ваше изображение очень маленькое, и трудно понять, как вы ожидаете, что оно будет выглядеть. Не помешала бы более полная картина.

JarMan 21.11.2022 23:46

@JarMan Я обновил его новым изображением. Но проблема та же, в некоторых случаях некоторые пиксели выходят за края, что даже на большом изображении нужно увеличивать, чтобы увидеть.

siamak mirifar 22.11.2022 14:18

Спасибо за обновленный пример. Вы говорите, что хотите, чтобы он обрезал закругленный угол?

JarMan 22.11.2022 16:26

Отсечение выполняется только для прямоугольных областей по соображениям производительности. QTBUG-9008 Для этого можно использовать OpacityMask ТАК.

iam_peter 22.11.2022 16:55

@JarMan да, я не хочу, чтобы края компонента в listView выходили за угол (радиус). Это выглядит действительно ПЛОХО, я узнал в section.property, что прямоугольник без радиуса много стоит.

siamak mirifar 22.11.2022 18:09

@iam_peter OpacityMask предназначен для QtGraphicalEffects и доступен в Qt5. Я использую Qt6 (мне нужно).

siamak mirifar 22.11.2022 18:15
doc.qt.io/qt-6/qml-qt5compat-graphicaleffects-opacitymask.ht‌​ml API совместимости
iam_peter 22.11.2022 18:19

@iam_peteruinfortunetly Я не могу использовать QtGraphicalEffects, у меня нет доступа к этому API.

siamak mirifar 23.11.2022 10:11

@siamakmirifar меняющиеся требования нехороши. В будущем, пожалуйста, постарайтесь больше заявить о своих требованиях и/или попробуйте разделить свои вопросы на несколько вопросов, и, если каждая часть действительно помогает вам, подумайте о присуждении баллов за каждую часть, в которой вам помогают. Пожалуйста, помогите предоставить больше информации, дающей некоторое представление о проблеме, которую вы решаете, например (1) платформа, (2) версия Qt, (3) и почему ваша библиотека неполна.

Stephen Quan 23.11.2022 21:47

@ Стивен Куан, вы правы, извините, это было плохо. Я пока не доминирую в Qml и требованиях к проекту. Я использую платформу Linux и Qt6. К сожалению, у меня нет Qt5 API и Qt5Compat, так решила компания. Они хотят, чтобы все библиотеки были родными для Qt6!

siamak mirifar 24.11.2022 10:20
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
0
13
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я очистил ваш QML:

  • Я помещаю прямоугольник в свойства фона, например. Страница и рамка
  • Я удалил ненужные параметры размеров и сохранил основные.
  • В вашем ListView были и anchors.fill, и anchors.centerIn, он должен иметь только один
  • Я добавил больше данных в вашу ListModel
  • Я исправил отступ и сделал ваш фрагмент доступным для выполнения

Поскольку мы используем Frame, мы даем QML подсказку, что этот объект будет получать свою высоту из компонента Text, который находится внутри. Ширина Frame я использую присоединенное свойство ListView.view.width.

Text нужно только установить width: parent.width, чтобы наследовать ширину заполнения внутри Frame. Я также установил wordWrap: Text.WordWrap так, чтобы, пока width ограничено, высота поля Text увеличивалась, если текст должен быть многострочным. Если Text растет, Frame автоматически растет вместе с ним.

[РЕДАКТИРОВАТЬ]

С добавлением новых требований я внес следующие дополнительные изменения:

  • Используйте padding: 0 на Frame
  • Представьте Qt5Compat.GraphicalEffects и OpacityMask
import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
Page {
    Rectangle {
        id: backgroundRect
        anchors.fill: parent
        color: "#89a"
    }

    Frame {
        id: frame
        anchors.centerIn: parent
        width: 200
        height: 400
        padding: 0
        background: Rectangle {
            radius: 10
        }
        ListView {
            id: listView
            model: SampleListModel { }
            anchors.fill: parent
            clip: true
            delegate: Frame {
                width: ListView.view.width
                background: Rectangle {
                    color: index & 1 ? "#eee" : "#ccc"
                }
                Text {
                    width: parent.width
                    text: model.name
                    wrapMode: Text.WordWrap
                }
            }
            section.property: "group"
            section.delegate: Frame {
                width: ListView.view.width
                background: Rectangle {
                    color: "#60a2b3"
                }
                Text {
                    anchors.centerIn: parent
                    text: section
                }
            }
        }
    }

    Item {
        id: backgroundMask
        anchors.fill: parent
        visible: false
        Rectangle {
            x: frame.x
            y: frame.y
            width: frame.width
            height: frame.height
            radius: 10
         }
    }

    OpacityMask {
        anchors.fill: parent
        source: backgroundRect
        maskSource: backgroundMask
        invert: true
    }
}

// SampleListModel.qml
import QtQuick
import QtQuick.Controls

ListModel {
    id: listModel
    ListElement { name: "A"; group: "Group A" }
    ListElement { name: "B"; group: "Group A" }
    ListElement { name: "C"; group: "Group B" }
    ListElement { name: "D"; group: "Group B" }
    ListElement { name: "E"; group: "Group C" }
    ListElement { name: "F"; group: "Group C" }
    ListElement { name: "G"; group: "Group C" }
    ListElement { name: "H"; group: "Group C" }
    ListElement { name: "01010101001000111010100101010101110010111100011101101001010"; group: "Group D" }
    ListElement { name: "User2"; group: "Group D" }
    ListElement { name: "User3"; group: "Group D" }
    ListElement { name: "User4"; group: "Group D" }
    ListElement { name: "User5"; group: "Group D" }
    ListElement { name: "User6"; group: "Group D" }
    ListElement { name: "User7"; group: "Group D" }
    ListElement { name: "User8"; group: "Group D" }
    ListElement { name: "User9"; group: "Group D" }
    ListElement { name: "User10"; group: "Group D" }
    ListElement { name: "User11"; group: "Group D" }
    ListElement { name: "User12"; group: "Group D" }
    ListElement { name: "User13"; group: "Group D" }
    ListElement { name: "01010101001000111010100101010101110010111100011101101001010"; group: "Group D" }
    ListElement { name: "User2"; group: "Group D" }
    ListElement { name: "User3"; group: "Group D" }
    ListElement { name: "User4"; group: "Group D" }
    ListElement { name: "User5"; group: "Group D" }
    ListElement { name: "User6"; group: "Group D" }
    ListElement { name: "User7"; group: "Group D" }
    ListElement { name: "User8"; group: "Group D" }
    ListElement { name: "User9"; group: "Group D" }
    ListElement { name: "User10"; group: "Group D" }
    ListElement { name: "User11"; group: "Group D" }
    ListElement { name: "User12"; group: "Group D" }
}

Вы можете Попробовать онлайн!

Я обновил код, вы можете проверить его в Интернете (пожалуйста, проверьте сообщение еще раз в разделе «Обновление»: ссылка). В вашем примере кода список не заполняет фон. Между ними есть зазор.

siamak mirifar 22.11.2022 14:16

Спасибо. Кажется, отлично работает. Я проверю это завтра в своем проекте. Я ограничен некоторыми библиотеками, и я не уверен, что у меня есть Qt5Compat.GraphicalEffects и OpacityMask.

siamak mirifar 22.11.2022 23:08

К сожалению, я не могу использовать OpacityMask. У меня нет доступного API в моих источниках (я ограничен некоторыми API). Есть ли способ сделать это с помощью LayerEffects?

siamak mirifar 23.11.2022 10:09

Другие вопросы по теме