Cодержание
Руководство Flutter IndexedStack
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
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.
Простой пример 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;
}
});
},
),
);
}
}
children - это список дочерних виджетов IndexedStack.
List<Widget> children: const <Widget>[]}
index: будет отображаться индекс дочернего widget, его значение по умолчанию равно 0. Если значение index равено null, дочерние widgets отображаться не будут.
int index: 0
Параметр sizing в конструкторе IndexedStack присвоит свойству fit значение. Он показывает "Как определить размер дочерних widgets, отличающихся от Positioned из IndexedStack". Значение свойства fit по умолчанию - StackFit.loose.
StackFit sizing: StackFit.loose
// Enum:
StackFit.expand
StackFit.loose
StackFit.passthrough
- TODO Link?
Свойство textDirection используется для задания направления текста. Его значение влияет на поведение свойства alignment.
TextDirection textDirection
Свойство alignment используется для выравнивания других дочерних widgets, отличающихся от Positioned. Его значение по умолчанию - AlignmentDirectional.topStart
AlignmentGeometry alignment: AlignmentDirectional.topStart
