Руководство Flutter Expanded

Expanded
child
flex

1. Expanded

Expanded - это виджет, который помогает расширить пространство для дочернего виджета Row или Column по главной оси (main axis). Примечательно, что главная ось Row - это горизонтальная ось, а главная ось Column - вертикальная.

Expanded Constructor

const Expanded(
    {Key key,
    int flex: 1,
    @required Widget child}
)

Прежде всего, в качестве примера возьмем приведенную ниже иллюстрацию. В этом примере объект Row меет 5 дочерних виджетов. Вопрос состоит в том, как расширить пространство по горизонтали для 2-го и 4-го дочерних виджетов.

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Icon(Icons.ac_unit, size: 32, color: Colors.red),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Icon(Icons.add_circle, size: 96, color: Colors.green),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

Обертывание дочернего виджета объекта Row в Expanded объект поможет ему расширить пространство по горизонтали и занять остальную часть пространства Row.

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
        child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Expanded(
        child: Icon(Icons.add_circle, size: 96, color: Colors.green),
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

2. child

@required Widget child

3. flex

Свойство flex считается весом Expanded. Это свойство определяет, какое пространство будет выделено для Expanded. Выделенное пространство пропорционально значению flex. Значение flex по умолчанию равно 1.

int flex: 1

flex (ex1)

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
        child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
        flex: 3
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Expanded(
        child: Icon(Icons.add_circle, size: 96, color: Colors.green),
        flex: 2
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

flex (ex2)

Column (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
          child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
          flex: 3
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(90, 30))
          )
      ),
      Expanded(
          child: Icon(Icons.add_circle, size: 96, color: Colors.green),
          flex: 2
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

Руководство Flutter Expanded

1. Expanded

2. child

3. flex

Pуководства Flutter

Pуководства Flutter

Новейшие статьи