Die Anleitung zu Flutter Expanded

Expanded
child
flex

1. Expanded

Expanded ist ein Widget, mit dessen Hilfe der Platz für ein untergeordnetes Widget von Row oder Column entsprechend der Hauptachse erweitert werden kann. Insbesondere ist die Hauptachse der Row die horizontale Achse und die Hauptachse von Column die vertikale Achse.

Expanded Constructor

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

Zunächst nehmen Sie die folgende Abbildung als Beispiel. In diesem Beispeil verfügt das Objekt Row fünf untergeordnete Widgets. Die Frage ist, wie der Platz für das 2. und 4. untergeordnete Widget horizontal erweitert werden kann.

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:(){}),
    ]
)

Durch das Umschließen eines untergeordneten Widget von Row in ein Objekt Expanded wird der Bereich horizontal erweitert und der restlichen Bereich von Row belegt.

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

Das Property flex wird als Gewicht der Expanded betrachtet. Es bestimmt, wie viel Speicherplatz für Expanded zugewiesen wird. Der zugewiesene Platz ist proportional zum Wert flex. Der Standardwert für flex ist 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:(){}),
    ]
)

Die Anleitung zu Flutter Expanded

1. Expanded

2. child

3. flex

Anleitungen Flutter

Anleitungen Flutter

Neueste Artikel