Правильный выбор выравнивания и распределения для Horizontal StackView

Ниже приведен скриншот, показывающий дизайн, который я хочу реализовать.

enter image description here

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

enter image description here

Я установил alignment горизонтальных видов стека fill и попытался изменить Distribution. Однако я не могу получить желаемый результат.

Какая комбинация alignment/distribution может дать желаемый эффект? Или мне следует исключить горизонтальные представления стека и заполнить представления внутри вертикального представления стека?

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

Federico Milani 22.05.2019 14:00

Что вы получаете сейчас? Опубликовать скриншот

RajeshKumar R 22.05.2019 15:13
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
2
450
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вы можете сделать это с помощью tableView , но если у вас есть несколько элементов,

enter image description here

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

enter image description hereenter image description here

для полного просмотра проверьте демо

https://github.com/ShKhan9/stackV

Решение работает, но мне интересно, если мы устанавливаем ширину и высоту изображения, не предотвращает ли это масштабирование изображения (1x, 2x, 3x изображения) для устройств разного размера?

Sujal 23.05.2019 10:53

нет, это не помешает, и вы можете увеличить эту ширину/высоту

Sh_Khan 23.05.2019 15:34

Следуйте шагам,

1. Добавьте vertical stackView с top, leading and trailing constraints к view.

Alignment - Fill
Distribution - Fill
Spacing - 20

2. Добавьте 1 horizontal stackView к vertical stackView

Alignment - Fill
Distribution - Fill
Spacing - 20

3. Добавьте imageView к height and width constraints set to 30 в приведенном выше horizontal stackView.

4. Дублируйте horizontal stackView в vertical stackView столько раз, сколько вам нужно.

enter image description here

Можно ли это сделать без определения высоты и ширины изображения (шаг 3) [см. мой комментарий под ответом Sh_Khan]? И шаг 4, похоже, не требуется.

Sujal 23.05.2019 10:57

Если у вас изображение небольшого размера, вам это не понадобится. Установка для contentMode imageView значения scaleAspectFit будет работать. И я Сент-4 не понадобится. Добавил, что по ошибке.

PGDev 23.05.2019 11:01

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