【flutter】Stack组件

Stack是一个容器类组件，它可以放入多个子组件，子组件按先后顺序堆叠。它类似于安卓中的帧布局FrameLayout。

构造函数

	Stack(
		{Key key,
		AlignmentGeometry alignment: AlignmentDirectional.topStart,
		TextDirection textDirection,
		StackFit fit: StackFit.loose,
		Overflow overflow: Overflow.clip,
		List<Widget> children: const []}
	)

alignment属性

alignment可以设置children的对齐方式(定位方式)，Stack默认居左上。看一下alignment的构造函数：

class Alignment extends AlignmentGeometry {
  /// Creates an alignment.
  ///
  /// The [x] and [y] arguments must not be null.
  const Alignment(this.x, this.y)
    : assert(x != null),
      assert(y != null);

它只有两个属性x和y。
Alignment(0,0)代表居中，Alignment(-1,-1)表示左上，Alignment(0,-1)表示中上，Alignment(1,-1)表示右上，Alignment(1,1)表示右下，依次累推。

Alignment的官方说明：

/// A point within a rectangle.
///
/// `Alignment(0.0, 0.0)` represents the center of the rectangle. The distance
/// from -1.0 to +1.0 is the distance from one side of the rectangle to the
/// other side of the rectangle. Therefore, 2.0 units horizontally (or
/// vertically) is equivalent to the width (or height) of the rectangle.
///
/// `Alignment(-1.0, -1.0)` represents the top left of the rectangle.
///
/// `Alignment(1.0, 1.0)` represents the bottom right of the rectangle.
///
/// `Alignment(0.0, 3.0)` represents a point that is horizontally centered with
/// respect to the rectangle and vertically below the bottom of the rectangle by
/// the height of the rectangle.
///
/// `Alignment(0.0, -0.5)` represents a point that is horizontally centered with
/// respect to the rectangle and vertically half way between the top edge and
/// the center.
///
/// `Alignment(x, y)` in a rectangle with height h and width w describes
/// the point (x * w/2 + w/2, y * h/2 + h/2) in the coordinate system of the
/// rectangle.
///
/// [Alignment] uses visual coordinates, which means increasing [x] moves the
/// point from left to right. To support layouts with a right-to-left
/// [TextDirection], consider using [AlignmentDirectional], in which the
/// direction the point moves when increasing the horizontal value depends on
/// the [TextDirection].
///
/// A variety of widgets use [Alignment] in their configuration, most
/// notably:
///
///  * [Align] positions a child according to an [Alignment].
///
/// See also:
///
///  * [AlignmentDirectional], which has a horizontal coordinate orientation
///    that depends on the [TextDirection].
///  * [AlignmentGeometry], which is an abstract type that is agnostic as to
///    whether the horizontal direction depends on the [TextDirection].

alignment用来设置控件偏移量，偏移量不仅跟父容器的大小有关系，还跟child自己的大小有关系。

横向偏移量=x*容器宽/2 - child的宽度/2

纵向偏移量=y*容器高/2 - child的高度/2

---

示例：设置所有children居中对齐

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Stack demo")),
        body: Center(
            child: Container(
                width: 300,
                height: 300,
                color: Colors.green,
                child: Stack(alignment: Alignment(0, 0), children: <Widget>[
                  Image.asset(
                    "graphyics/face.jpg",
                    width: 150,
                    height: 150,
                    fit: BoxFit.fill,
                  ),
                  Text("测试")
                ]))))));

效果：

示例：设置所有children左上角对齐

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Stack demo")),
        body: Center(
            child: Container(
                width: 300,
                height: 300,
                color: Colors.green,
                child: Stack(alignment: Alignment(-1, -1), children: <Widget>[
                  Image.asset(
                    "graphyics/face.jpg",
                    width: 150,
                    height: 150,
                    fit: BoxFit.fill,
                  ),
                  Text("测试")
                ]))))));

效果：

示例：设置所有children右下角对齐

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Stack demo")),
        body: Center(
            child: Container(
                width: 300,
                height: 300,
                color: Colors.green,
                child: Stack(alignment: Alignment(1, 1), children: <Widget>[
                  Image.asset(
                    "graphyics/face.jpg",
                    width: 150,
                    height: 150,
                    fit: BoxFit.fill,
                  ),
                  Text("测试")
                ]))))));

效果：

示例：设置偏移系数0.6

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Stack demo")),
        body: Center(
            child: Container(
                width: 300,
                height: 300,
                color: Colors.green,
                child: Stack(alignment: Alignment(0.6, 0.6), children: <Widget>[
                  Image.asset(
                    "graphyics/face.jpg",
                    width: 150,
                    height: 150,
                    fit: BoxFit.fill,
                  ),
                  Text("测试")
                ]))))));

运行效果：

可以看出，在同一偏移系数下，child越大，偏移量越小，child越小，偏移量越大。