codestory

Die Anleitung zu Flutter Expanded

View more Tutorials:

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

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.