Die Anleitung zu Flutter IndexedStack

IndexedStack
Examples
children
index
fit (sizing)
textDirection
alignment

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 indexnull ist, werden keine untergeordneten Widgets angezeigt.

Die Anleitung zu Flutter Stack

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.

Die Anleitung zu Flutter SizedBox

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 indexnull 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

Die Anleitung zu Flutter StackFit

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

Die Anleitung zu Flutter Alignment