Как применять флекс во флаттере - PullRequest
Новая
       26

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

0 голосов
/ 24 февраля 2020

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

Для экземпляра - 

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. Пожалуйста, объясните мне, как с этим справиться.

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Виджеты внутри виджета Flex (например, Column, Row) могут быть помещены в виджет Flexible. Виджет Flexible имеет свойство flex. Флаттер имеет 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 ")
      ],
    )
  ],
),

);
0 голосов
/ 24 февраля 2020

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

Вы можете обернуть своих детей с помощью Expanded и дать 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 ")
        ],
      ),)
    ],
  ),
)

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

Подробнее об этом можно прочитать в официальных документах здесь

...