codestory

Die Anleitung zu Flutter IndexedStack

View more Tutorials:

1- IndexedStack

IndexedStack ist eine Unterklasse von Stack. Im Gegensatz zu Stack zeigt IndexedStack jeweils höchsten ein untergeordnetes Widget. Die anderen Widget werden versteckt. Sie können angeben, welches untergeordnete Widget über das Property index angezeigt werden soll. Wenn der Wert von index null ist, werden keine untergeordneten Widgets angezeigt.
IndexedStack constructor
IndexedStack(
  {Key key,
  AlignmentGeometry alignment: AlignmentDirectional.topStart,
  TextDirection textDirection,
  StackFit sizing: StackFit.loose,
  int index: 0,
  List<Widget> children: const <Widget>[]}
)
Grundsätzlich ist die Größe von IndexedStack so klein wie möglich und versucht, größer zu sein als alle untergeordneten Elemente (mit der Ausnahme der untergeordneten Widget Positioned ​​​​​​​oder Transform).
Sie können die Größe von IndexedStack kontrollieren, indem Sie es in einen SizedBox ​​​​​​​stellen.

2- Examples

Ein einfaches Beispiel über IndexedStack:
main.dart (ex1)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {

  int selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Flutter IndexedStack Example")
      ),
      body: SizedBox (
        width: double.infinity,
        height: double.infinity,
        child: IndexedStack (
            alignment: Alignment.center,
            index: this.selectedIndex,
            children: <Widget>[
              Container(
                width: 290,
                height: 210,
                color: Colors.green,
              ),
              Container(
                width: 250,
                height: 170,
                color: Colors.red,
              ),
              Container(
                width: 220,
                height: 150,
                color: Colors.yellow,
              ),
            ]
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () {
          setState(() {
            if(this.selectedIndex < 2)  {
              this.selectedIndex++;
            } else {
              this.selectedIndex = 0;
            }
          });
        },
      ),
    );
  }
}

3- children

children - ist eine Liste der untergeordneten Widgets von IndexedStack.
List<Widget> children: const <Widget>[]}

4- index

index: Die Index der untergeordneten Widget wird angezeigt werden, der Standardwert ist 0. Wenn der Wert von index null ist, werden keine untergeordneten Widgets angezeigt.
int index: 0

5- fit (sizing)

Der Parameter sizing im Konstructor von IndexedStack weist dem Property fit einen Wert zu. Es zeigt "Wie wird die Größe für die untergeordneten Widgets außer Positioned von IndexedStack festgelegt". Die Standardwert vom Property fit ist StackFit.loose.
StackFit sizing: StackFit.loose

// Enum:
 StackFit.expand
 StackFit.loose
 StackFit.passthrough
  • TODO Link?

6- textDirection

Das Property textDirection wird benutzt um die Richtung der Text einzusetzen. Sein Wert wirkt auf das Verhalten vom Property alignment.
TextDirection textDirection

7- alignment

Das Property alignment wird benutzt um die anderen untergeordneten Widget außer Positioned auszurichten. Seine Defaultwert ist AlignmentDirectional.topStart
AlignmentGeometry alignment: AlignmentDirectional.topStart

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.