Ограничить ширину пользовательского элемента рендеринга списка во Flex

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

Почему такой широкий?
(источник: tdwright.co.uk)

Что, как я уверен, вы согласитесь, ужасно безобразно.

Список создается так:

<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
    <mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>

И компонент itemrenderer выглядит так:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>

Я пробовал размещать width="100%" во многих местах, но безуспешно. Если кто-нибудь знает, как я могу контролировать это, я был бы очень благодарен.


list width apache-flex itemrenderer
person Tom Wright    schedule 23.07.2009    source источник
comment
Этот вопрос имеет более 2 тысяч просмотров и ему более 2 лет, но до сих пор нет ответа. Стало неактуально? (Я отказался от использования Flex.) Должен ли я предложить награду за него?   -  person Tom Wright    schedule 03.10.2011

Ответы (3)


arrow_upward
1
arrow_downward

Если вы установите эти свойства внутри обработчика элементов verticalScrollPolicy="off" horizontalScrollPolicy="off", полосы исчезнут.

Я не знаю, почему они выбирают для ужасного «выкл» вместо False

person Arno    schedule 23.07.2009
comment
Это скрывает полосы, но не ограничивает ширину, что почти ухудшает ситуацию. Спасибо за ваш ответ. - person Tom Wright; 23.07.2009
comment
какую ширину вы хотите ограничить? вы можете установить maxWidth внутри элемента визуализации, если знаете, сколько места вам нужно для отображения контента. Вы даже можете получить ширину родителя (tileList или что-то в этом роде) и установить ее как ширину. Есть много решений этой проблемы - person Arno; 23.07.2009
comment
maxWidth, похоже, не работает, но мне было бы интересно увидеть ответ, основанный на другом предложении. - person Tom Wright; 23.07.2009
comment
в вашем VBox в itemrenderer добавьте это свойство: width={this.parent.width - 10} не уверен, нужно ли -10. Но все же странно, что это происходит, потому что изображение внутри itemrenderer не шире списка. Некоторое свойство вызывает этот эффект, возможно, scaleContent? Или выравнивание по центру. Что вы можете попробовать, так это установить maxWidth и maxHeight на изображение. - person Arno; 23.07.2009
comment
width={this.parent.width - 10} не работает. И ширина = {this.parent.width} тоже. Получил предупреждение: привязка данных не сможет определить присваивание ширины. - person Tom Wright; 24.07.2009
comment
Они не используют «true» и «false», потому что существует три, а не два варианта политик прокрутки: «off», «on» и «auto». (Я думаю, вы согласитесь, что «истина», «ложь» и «авто» немного вводят в заблуждение) - person rinogo; 26.01.2010

arrow_upward
0
arrow_downward

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

Предполагая, что вы хотите, чтобы размер списка определялся по ширине в зависимости от размера содержащихся в нем элементов itemRenderer, эти элементы itemRenderer должны предоставлять информацию о ширине. Использование VBox таким образом с разрешенными полосами прокрутки означает, что VBox попытается «урегулировать» размер содержимого (изображения) и размер родителя. Так что да, первое, что нужно сделать, это отключить полосы прокрутки в VBox, предполагая, что вы не можете просто полностью избавиться от VBox. (Я предполагаю, что вам нужен VBox, чтобы вы могли поместить заголовок или что-то еще под изображением в качестве следующего шага)

Список, как вы его указали, имеет размер 100% от своего родителя, панели, которая сама имеет размер 100% от своего родителя. Вместо того, чтобы изменять размер этих элементов «сверху вниз», подумайте о том, чтобы не указывать их ширину, чтобы Flex вычислял требуемую ширину снизу вверх. Используйте maxWidth в списке или на панели, ограничивая их размер, если вам нужно расположить их относительно их сверстников.

Еще одна важная вещь, о которой нужно знать, это прием «minHeight=0». Оказывается, алгоритм изменения размера, используемый Flex, ведет себя совсем по-другому, когда для minHeight или minWidth установлено значение, отличное от NaN по умолчанию. Установка его на 0 чрезвычайно полезна во многих из этих случаев. Попробуйте minWidth=0 в VBox и/или в списке.

person verveguy    schedule 23.07.2009

arrow_upward
0
arrow_downward

В дополнение к отключению политики прокрутки установите для левого и правого элементов значение 0. Это должно привязать ширину к ширине родителя.

person Tim Keating    schedule 12.03.2011