Почему я должен использовать [расширенное] / [гибкое] сгибание поверх выравнивания [Align]?

#user-interface #dart #flutter #alignment

#пользовательский интерфейс #dart #флаттер #выравнивание

Вопрос:

Мне было интересно, почему следует использовать [Expanded] / [Flexible] сгибание поверх [Align] выравнивания? Вы можете точно выровнять свой виджет по [Align] и даже потенциально избежать [Padding] .

Давайте посмотрим на это с другой точки зрения, является ли использование flex of [Expanded] / [Flexible] более эффективным и быстрым, чем [Align] ?

Ответ №1:

Между Expanded/Flex и Align нет сравнения. Взгляните на следующий фрагмент.

  Column(
  children: [
    Container(color: Colors.blue, height: 200),
    Align(child: Container(color: Colors.green)), // doesn't show anything
    Expanded(child: Container(color: Colors.orange)), // shows up in the remaining space
  ],
);
  

Наличие Align в качестве родительского элемента Container ничего не покажет на экране, но если вы используете Expanded/Flex , это займет оставшееся место.

Комментарии:

1. @TheUniqueProgrammer Да, это будет видно потом, я просто хотел показать разницу, запрошенную оператором, между этими двумя виджетами на примере.

2. Ну, это не показывает разницы, поскольку @TheUniqueProgrammer показал, что это то же самое, когда используется Expanded Align .

Ответ №2:

Не уверен, на что вы ссылаетесь. Expanded предназначен для (более или менее) «выбора», какой виджет внутри Row / Column должен заполнить оставшееся пространство. В то время как Align просто позиционирует дочерний элемент внутри себя при заданном выравнивании.

Комментарии:

1. Например, я должен использовать Expanded Align, если я хочу что-то выровнять, в противном случае это на это не влияет. Интересно, лучше ли это, чем Expanded (flex) Padding?

2. Это сбивает с толку.. можете ли вы показать пример кода? не уверен, что вы имеете в виду, говоря «это не влияет».. наличие a Expanded внутри a Row / Column всегда должно иметь эффект

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

4. конечно, это так.. если у вас есть Column with crossAxisAlignment = CrossAxisAlignment.stretch и у вас есть Align (дочерний элемент: Text(‘blubb’)), он расположит ваш текстовый виджет blubb по центру по горизонтали.

5. Очевидно, что вы не можете Align разместить свой виджет вертикально в a Column , потому что Align у вас не будет больше свободного места, чем размер его дочернего виджета.. для этого Expanded и предназначен. расти, чтобы заполнить доступное пространство.