Flutter - Stack

Flutter - Stack 首页 / Flutter入门教程 / Flutter - Stack

Stack是Flutter中的一个小部件,其中包含一个小部件列表,并将它们放置在另一个小部件的顶部。换句话说,该堆栈允许开发人员将多个窗口小部件重叠到一个屏幕中,并从底部到顶部进行渲染。因此,第一个小部件是最底部的项目,最后一个小部件是最顶部的项目

下面的示例有助于快速理解堆栈小部件的用法,其中包含三个尺寸逐渐缩小的集合:

Stack(
  children: <Widget>[
   //Max Size
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.yellow,
    )
  ],
),

它将提供以下输出:

无涯教程网

Flutter Stack

Stack属性

以下是与堆栈小部件一起使用的属性:

链接: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 -  它确定内容是否将被剪切。

Positioned

它不是堆栈参数,但可以在堆栈中使用以找到子窗口小部件。以下是定位堆栈的构造函数:

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 Stack

IndexedStack

这是Flutter中的另一个堆栈小部件,通过指定其索引一次仅显示一个元素。请参见以下代码段:

IndexedStack(
  index: 1,
  children: <Widget>[
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.yellow,
    )
  ],
)

IndexedStack像常规堆栈一样将子级作为子级,但是一次只能显示一个子级。因此,它不是堆栈。无涯教程使用它来根据需要轻松地切换。

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 Stack

可以在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:

Flutter Stack

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

AI技术内参 -〔洪亮劼〕

邱岳的产品实战 -〔邱岳〕

Go语言核心36讲 -〔郝林〕

如何做好一场技术演讲 -〔极客时间〕

玩转Git三剑客 -〔苏玲〕

SQL必知必会 -〔陈旸〕

ZooKeeper实战与源码剖析 -〔么敬国〕

Web安全攻防实战 -〔王昊天〕

体验设计案例课 -〔炒炒〕

好记忆不如烂笔头。留下您的足迹吧 :)