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("测试")
]))))));
运行效果: