笔录Flutter (六) 布局系列： Stack、Positioned、Align

Flutter练习demo

常用属性

关于alignment的使用

1. 使用这些属性
   
2. 直接使用Alignment(x, y)
   x、y两个值的范围在 -1 到 1 之间。如图：
   坐标的圆点表示center，如上图所示：
   

使用

效果图：

import 'package:flutter/material.dart';

class Layout2 extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Stack、Positioned、Align"),
        ),
        body: Center(
          child: Container(
            width: 250,
            height: 400,
            color: Colors.blue,
            child: Stack(
              children: <Widget>[
                Positioned(
                  child: Text("Positioned"),
                  left: 20,
                  top: 20,
                ),
                Positioned(
                  child: Text("Positioned"),
                  left: 100,
                  top: 50,
                ),
                Align(
                  // x
                  alignment: Alignment.bottomCenter,
                  child: Icon(Icons.clear),
                ),
                Align(
                  // 保存
                  alignment: Alignment.topRight,
                  child: Icon(Icons.save),
                ),
                Align(
                  // 搜索
                  alignment: Alignment(-0.8, 0),
                  child: Icon(Icons.search),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}