Добавить дополнительную строку для переполнения текста

ProgramBox

Добавить дополнительную строку для переполнения текста

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#angular #nativescript

Вопрос:

Как я могу добавить дополнительную строку под текстом в списке? Я использую nativescript, но если есть способ сделать это в angular, это тоже может сработать.

В моем приложении Nativescript (Angular) у меня есть список, который использует RadListView. Когда я нажимаю на текст в каждом элементе списка, текст расширяется. Иногда текст большего размера переходит на следующую строку. Это проблема, потому что RadListView не позволяет изменять размеры контейнеров вокруг текста (на iOS).

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

Я мог бы решить эту проблему, если бы под текстом в каждом элементе списка была дополнительная строка. Таким образом, если текст переполнится, он просто перейдет на следующую строку.

Но как я могу это сделать?

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

Пример:

 <RadListView [items]="textArray" iosOverflowSafeArea="false">
    <ng-template tkListItemTemplate let-item="item">
       <StackLayout iosOverflowSafeArea="false">
            <StackLayout style="border-width: 2; border-color: black">
                <Label [text]="item.text" textWrap="true" (tap)="makeTextBigger()"></Label>
            </StackLayout>
        </StackLayout>
    </ng-template>
</RadListView>

//currently, text will be hidden if it gets bigger and overflows to the next line

Ответ №1:

Это ограничение с iOS, оно не будет ретранслировать ячейку до тех пор, пока не будет запрошено. Вот обходной путь.

 var indexPaths = NSMutableArray.new();
indexPaths.addObject(NSIndexPath.indexPathForRowInSection(rowIndex, event.groupIndex));
listView.ios.reloadItemsAtIndexPaths(indexPaths);

Приведенный выше код принудительно выводит ячейку просмотра списка.

1. Спасибо. Я перешел по коду на playground по ссылке вашего форума, но у меня это не работает. Размер контейнера не изменяется. Это может быть потому, что природа моего массива структурирована иначе, чем в вашем примере. Вы знаете, существует ли массив, в который можно просто добавить строку под текстом при загрузке страницы, чтобы текст мог переполняться?

2. Это, безусловно, работает, не имеет значения, как структурирован ваш массив. Поделитесь своей версией Playground, возможно, я смогу взглянуть.

3. Спасибо, но как насчет оригинальной идеи — есть ли способ просто добавить дополнительную строку?

4. В вашей версии для игровой площадки я могу заставить расширение контейнера работать, но расширение «дает сбои»: 1) кнопки «Параметры» и «Отмена» мигают, а затем появляются, и 2) если вы закроете окно, кнопки закрываются слишком медленно, поэтому на мгновение они перекрывают поле ниже. Есть ли способ это исправить?

Ответ №2:

Если вы не хотите использовать решение forceLayout, тогда вам нужно поиграть с высотой метки. Здесь я обновил игровую площадку для вас.

   <Label [text]="country.name" class="list-group-item-heading" height="100" textWrap="true" verticalAlignment="center" style="width: 60%"></Label>

Label в ng0template имеет предопределенную высоту 100 поэтому в item tal, когда текст становится больше, его не нужно повторно воспроизводить, и textWrap здесь работает отлично.

1. Спасибо, но причина, по которой это нетривиально, заключается в том, что высота текста в разных элементах списка различается. Решение должно было бы включать либо (i) какой-либо способ всегда добавлять дополнительную строку в текстовое поле, либо (ii) измерить высоту текста, а затем добавить установленное значение к высоте выше этого.