Nativescript: Как сделать так, чтобы метка не превышала ширину ее контейнера во flexbox сетки? - PullRequest
Новая
       34

Nativescript: Как сделать так, чтобы метка не превышала ширину ее контейнера во flexbox сетки?

0 голосов
/ 15 апреля 2020

Я пишу приложение с NativeScript 6.4.1 и Angular 8.

. На домашней странице моего приложения мне нужен список кнопок с надписью под кнопкой.

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

Я попытался использовать FlexboxLayout для этой цели, но я заметил, что родительские контейнеры просто расширяются: https://play.nativescript.org/?template=play-ng&id=jbpqMk&v=5

Полагаю, мне нужна гибкость в макете; может быть, есть возможность настроить, если его 2 или 3 столбца.

Было бы лучше использовать GridLayout?

Вот фрагмент кода:

home. html 

<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
    <ns-home-button *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>

Желаемый результат:

enter image description here

Текущий результат:

enter image description here

1 Ответ

1 голос
/ 15 апреля 2020

Интересно, что ячейки, которые вы показали в вашей демонстрации, правильно выровнены в соответствии с вашими спецификациями потока. Использование GridLayout было бы возможным , но не совсем идеально. Для GridLayout потребуется подсчет и указание всех его строк, что раздражает, и оно также заставит своих дочерних элементов соответствовать ему, а не расширяться на основе дочерних элементов (например, FlexboxLayout или StackLayout).

Вместо этого просто добавьте ширину к каждому элементу. Два самых простых способа сделать это - обернуть каждый элемент: 

<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
    <StackLayout width="33%" *ngFor="let n of list">
        <ns-home-button name="{{ n.name }}"></ns-home-button>
    </StackLayout>
</FlexboxLayout>

или изменить компонент spe c: 

<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
    <ns-home-button width="33%" *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>

    @Input() width: string;

<FlexboxLayout [width]="width" ...>
    ...
</FlexboxLayout>
...