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

IndexedStack
Examples
children
index
fit (sizing)
textDirection
alignment

1. IndexedStack

IndexedStack - это подкласс Stack. В отличие от Stack, IndexedStack отображает не более одного дочернего widget за раз и скрывает другие дочерние widget. Вы можете указать, какой дочерний widget будет отображаться через свойство index. Если значение widget равно null, дочерние widget отображаться не будут.

Руководство 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>[]}
)

В основном, IndexedStack имеетминимально возможный размер и пытается быть больше, чем все его дочерние widget (за исключением Positioned или Transform).

Вы можете управлять размером IndexedStack, помещая его в SizedBox.

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

2. Examples

Простой пример 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 - это список дочерних виджетов IndexedStack.

List<Widget> children: const <Widget>[]}

4. index

index: будет отображаться индекс дочернего widget, его значение по умолчанию равно 0. Если значение index равено null, дочерние widgets отображаться не будут.

int index: 0

5. fit (sizing)

Параметр sizing в конструкторе IndexedStack присвоит свойству fit значение. Он показывает "Как определить размер дочерних widgets, отличающихся от Positioned изIndexedStack". Значение свойства fit по умолчанию - StackFit.loose.

StackFit sizing: StackFit.loose

// Enum:
 StackFit.expand
 StackFit.loose
 StackFit.passthrough

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

6. textDirection

Свойство textDirection используется для задания направления текста. Его значение влияет на поведение свойства alignment.

TextDirection textDirection

7. alignment

Свойство alignment используется для выравнивания других дочерних widgets, отличающихся от Positioned. Его значение по умолчанию - AlignmentDirectional.topStart

AlignmentGeometry alignment: AlignmentDirectional.topStart

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