Flutter：Stack

alignment

Stack 组件的每个子组件要么定位要么不定位，定位的字组件是用 Positioned 组件包裹的。Stack 组件本身包含所不定位的子组件，子组件根据 alignment 属性定位（默认为左上角）。然后根据定位的子组件的 top、right、bottom 和 left 属性将他们放置在 Stack 组件上。

示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '布局示例',
      home: LayoutDemo(),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget stack = Stack(
      alignment: Alignment.topLeft,
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: AssetImage('images/1.jpg'),
          radius: 100,
        ),
        new Container(
          decoration: new BoxDecoration(color: Colors.black38),
          child: new Text(
            '我是大美女',
            style: TextStyle(
                fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        ),
      ],
    );

    return new Scaffold(
      appBar: AppBar(
        title: Text('Center'),
      ),
      body: Center(
        child: stack,
      ),
    );
  }
}

效果图如下：

Positioned

Positioned 组件是用来定位的。Stack 使用 Positioned 布局主要是因为在 Stack 组件里面需要包裹一个定位组件，Positioned 组件属性如下：

示例代码如下：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget stack = Stack(
      alignment: Alignment.topLeft,
      children: <Widget>[
        Container(
          height: 300,
          width: 500,
          child: Image.asset('images/1.jpg'),
        ),
        Positioned(
          bottom: 50,
          right: 50,
          child: Text('hello world ！'),
        ),
      ],
    );

    return new Scaffold(
      appBar: AppBar(
        title: Text('Center'),
      ),
      body: Center(
        child: stack,
      ),
    );
  }
}

效果图如下：