betacode

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

View more Tutorials:

1- IndexedStack

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

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
  • TODO Link!

6- textDirection

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

7- alignment

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

AlignmentGeometry alignment: AlignmentDirectional.topStart

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.