Stack是Flutter中的一个小部件,其中包含一个小部件列表,并将它们放置在另一个小部件的顶部。换句话说,该堆栈允许开发人员将多个窗口小部件重叠到一个屏幕中,并从底部到顶部进行渲染。因此,第一个小部件是最底部的项目,最后一个小部件是最顶部的项目
下面的示例有助于快速理解堆栈小部件的用法,其中包含三个尺寸逐渐缩小的集合:
Stack( children: <Widget>[ //Max Size Container( color: Colors.green, ), Container( color: Colors.blue, ), Container( color: Colors.yellow, ) ], ),
它将提供以下输出:
以下是与堆栈小部件一起使用的属性:
链接:https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-stack.html
来源:LearnFk无涯教程网
alignment - 它确定子窗口小部件在堆栈中的放置方式。它可以是顶部(top),底部(bottom),中心(center),右中角(center-right)等。
Stack( alignment: Alignment.topCenter,//Center of Top children: <Widget>[ ] )
textDirection - 它确定文本方向。它可以绘制文本为ltr(从左到右)或rtl(从右到左)。
Stack( textDirection: TextDirection.rtl,//Right to Left children: <Widget>[ ] )
fit - 它将控制堆栈中未定位的子窗口小部件的大小。它具有三种类型:loose,expand和passthrough。用于将子窗口小部件设置为小尺寸的loose控件,expand属性将子窗口小部件设置为尽可能大的值,而passthrough则根据其父窗口小部件来设置子窗口小部件。
Stack( fit: StackFit.passthrough, children: <Widget>[ ] )
overflow - 当内容在堆栈外溢出时,它控制子窗口小部件是可见(visible)的还是裁剪(clipped)。
Stack( overflow: Overflow.clip,//Clip the Content children: <Widget>[ ] )
clipBehavior - 它确定内容是否将被剪切。
它不是堆栈参数,但可以在堆栈中使用以找到子窗口小部件。以下是定位堆栈的构造函数:
const Positioned({ Key key, this.left, this.top, this.right, this.bottom, this.width, this.height, @required Widget child, })
以下代码说明了如何在Flutter中使用堆栈小部件。在这段代码中,无涯教程将尝试堆栈小部件的大多数基本属性。
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); /// 这个小部件是主要的应用小部件。 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyStackWidget(), ); } } class MyStackWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Flutter Stack Widget Example"), ), body: Center( child: Stack( fit: StackFit.passthrough, overflow: Overflow.visible, children:[ //最大尺寸小部件 Container( height: 300, width: 400, color: Colors.green, child: Center( child: Text( 'Top Widget: Green', style: TextStyle(color: Colors.white, fontSize: 20), ), ), ), Positioned( top: 30, right: 20, child: Container( height: 100, width: 150, color: Colors.blue, child: Center( child: Text( 'Middle Widget', style: TextStyle(color: Colors.white, fontSize: 20), ), ), ), ), Positioned( top: 30, left: 20, child: Container( height: 100, width: 150, color: Colors.orange, child: Center( child: Text( 'Bottom Widget', style: TextStyle(color: Colors.white, fontSize: 20), ), ), ) ), ], ), ) ), ); } }
当无涯教程运行应用程序时,无涯教程应该获取类似于下面的屏幕截图的屏幕的UI:
这是Flutter中的另一个堆栈小部件,通过指定其索引一次仅显示一个元素。请参见以下代码段:
IndexedStack( index: 1, children: <Widget>[ Container( color: Colors.green, ), Container( color: Colors.blue, ), Container( color: Colors.yellow, ) ], )
IndexedStack像常规堆栈一样将子级作为子级,但是一次只能显示一个子级。因此,它不是堆栈。无涯教程使用它来根据需要轻松地切换。
以下代码说明了如何在Flutter中使用索引堆栈小部件:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); /// 这个小部件是主要的应用小部件。 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyStackWidget(), ); } } class MyStackWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Flutter Stack Widget Example"), ), body: Center( child: IndexedStack( index: 0, children:[ Container( height: 300, width: 400, color: Colors.green, child: Center( child: Text( 'First Widget', style: TextStyle(color: Colors.white, fontSize: 20), ), ), ), Container( height: 250, width: 250, color: Colors.blue, child: Center( child: Text( 'Second Widget', style: TextStyle(color: Colors.white, fontSize: 20), ), ), ), ], ), ) ), ); } }
当无涯教程运行应用程序时,无涯教程应该获取类似于下面的屏幕截图的屏幕的UI:
可以在Flutter中将堆栈包装在堆栈中。无涯教程可以通过使用height和width属性将第二个堆栈包装在集合中来完成此操作。
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyStackWidget(), ); } } class MyStackWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Flutter Stack Widget Example"), ), body: Center( child: Stack( children: [ Positioned( top: 100, child: Text( "Stack#1", style: TextStyle(color: Colors.black, fontSize: 20) ), ), Positioned( top: 150.0, child: Container( height: 220, width: 220, color: Colors.green, child: Stack( children: [ Positioned( top:160, child: Text( "Stack Inside Stack#1", style: TextStyle(color: Colors.white, fontSize: 20) ), ) ], ), ), ) ], ), ) ), ); } }
当无涯教程运行应用程序时,无涯教程应该获取类似于下面的屏幕截图的屏幕的UI:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)