【flutter】Stack组件移动开发devnn的专栏-

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越小，偏移量越大。