16-flutter-定位

//
// Stack 这个相当于 web 的父元素
// Positioned 这个相当于 web 的子元素 x和y轴一般只设置一个方向
// 如果同时设置了left和right 会出现元素被拉伸的情况
// 也可以只设置一个方向 那另一个方向会默认使用 Stack 的  alignment 属性
// 如果两个子元素有相交的地方，则会产生重叠
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter12'),
        ),
        body: Container(
          child: SizedBox(
            width: 400,
            height: 400,
            child: Stack(
                alignment: Alignment.center,
              children: [
                Positioned(
                  bottom: 20,
                  left: 20,
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.red,
                  ),
                ),
                Positioned(
                  top: 10,
                  right: 10,
                  child: Container(
                    width: 200,
                    height: 200,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}