Как применить гибкость во флаттере

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

Например -

return Container(
  child: new Row(
    children: <Widget>[
      new Column(
        children: <Widget>[new Text("Hello World")],
      ),
      new Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      )
    ],
  ),
);

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


flutter flutter-web flutter-layout flutter-flex
person Unbreakable    schedule 24.02.2020    source источник

Ответы (4)


arrow_upward
10
arrow_downward

Используя Expanded и установив свойство flex, мы можем присвоить каждому виджету в Row или Column собственный вес. Это означает, какую часть доступного пространства этого виджета ему разрешено заполнять. Таким образом, у нас может быть следующий код для горизонтального выравнивания:

По умолчанию Expanded занимает все доступное пространство, поэтому, если мы хотим, чтобы 2 виджета занимали 50% пространства, мы можем полностью удалить свойство flex.

Вот простой пример кода для понимания:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded"),
      ),
      body: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 6, // 60% of space => (6/(6 + 4))
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 4, // 40% of space
              child: Container(
                color: Colors.purple,
              ),
            ),
          ],
        ),
      ),
    );
  }

введите здесь описание изображения

person Paresh Mangukiya    schedule 05.10.2020
comment
Проблема с расширенным заключается в том, что он может иметь только один дочерний элемент. - person user3808307; 11.10.2020
comment
@user3808307 user3808307 вы можете просто поместить еще одну строку/столбец внутрь Expanded, если хотите иметь несколько дочерних элементов. - person jdepoix; 08.06.2021

arrow_upward
7
arrow_downward

Expanded похож на Flex и поддерживает добавление flex,

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

Обновленный код:

Container(
  child: new Row(
    children: <Widget>[
      new Expanded ( 
        flex:1,
        child : Column(
        children: <Widget>[new Text("Hello World")],
      ),),
      new Expanded( 
        flex :2,
        child: Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      ),)
    ],
  ),
)

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

Вы можете прочитать больше в официальной документации здесь

person leoelstin    schedule 24.02.2020

arrow_upward
6
arrow_downward

Виджеты внутри виджета Flex (например, Column, Row) можно обернуть гибким виджетом. Виджет Flexible имеет свойство flex. Flutter имеет 3 гибких виджета: Гибкий, Расширенный и спейсер

return Container(
child: new Row(
  children: <Widget>[
    Flexible(
      flex: 1 /*or any integer value above 0 (optional)*/,
      child: Column(
        children: <Widget>[
          Expanded(
              flex: 1 /*or any integer value above 0 (optional)*/,
              child: new Text("Hello World")),
        ],
      ),
    ),
    new Column(
      children: <Widget>[
        new Text(
            "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
      ],
    )
  ],
),

);
person Isti01    schedule 24.02.2020

arrow_upward
0
arrow_downward

#FlexFit.loose : ребенок вынужден заполнить доступное пространство.

#FlexFit.tight или Expanded : дочерний элемент может быть не больше доступного пространства.

person Md omer arafat    schedule 06.12.2020