前端入门flutter-09 Flutter 页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局

　　物理布局学的差不多是时候接触空间布局了，超越瀑布式、栏栅式等无视“地形，随心所欲的布局就是本篇的内容：

　　话不多说，直接上代码：

　　

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack层叠组件 Stack与Align Stack与Positioned实现定位布局'),
        ),
        body: HomeContent3(),
      ),
    );
  }
}
//只使用Stack 层叠组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
           300.0,
          height: 300.0,
          color: Colors.red,
        ),
        Text('我是文本一'),
        Text('我是文本一十一'),
        Text('我是文本一百一十一'),
        Text('我是文本一千一百一十一'),
      ],
    );
  }
}

//只使用Stack 与Align实现定位布局
class HomeContent2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
       300.0,
      height: 300.0,
      color: Colors.red,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment(-1,-1),
            child: Text('我是文本一'),
          ),
          Align(
            alignment: Alignment(-0.7,-0.8),
            child: Text('我是文本一十一'),
          ),
          Align(
            alignment: Alignment(-0.5,-0.6),
            child: Text('我是文本一百一十一'),
          ),
          Align(
            alignment: Alignment(-0.3,-0.4),
            child: Text('我是文本一千一百一十一'),
          ),
        ],
      ),
    );
  }
}

//只使用Stack 与Positioned实现定位布局
class HomeContent3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
       300.0,
      height: 300.0,
      color: Colors.red,
      child: Stack(
        children: <Widget>[
          Positioned(

            child: Text('我是文本一'),
          ),
          Positioned(
            left: 100.0,
            top: 30.0,
            child: Text('我是文本一十一'),
          ),
          Positioned(
            left: 150.0,
            top: 50.0,
            child: Text('我是文本一百一十一'),
          ),
          Positioned(
            left: 10.0,
            bottom: 10.0,
            child: Text('我是文本一千一百一十一'),
          ),
        ],
      ),
    );
  }
}

效果图如下：HomeContent、HomeContent2、HomeContent3：