Flutter学习之重叠布局

1. 两个元素的重叠布局
   可以使用stack组件

   import 'package:flutter/material.dart';

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

   class MyApp extends StatelessWidget{ @override var stack = new Stack( alignment: const FractionalOffset(0.5, 0.7), children: <Widget>[ new CircleAvatar( backgroundImage: new NetworkImage("https://avatars2.githubusercontent.com/u/41252899?s=460&v=4"), radius: 100.0, ), new Container( decoration: new BoxDecoration( color: Colors.pinkAccent, ), padding: EdgeInsets.all(5.0), child: new Text("ayang"), ) ], ); //使用变量创建重叠的组件，起到减轻代码量的效果 Widget build(BuildContext context){ return MaterialApp( title: "stack层叠布局",

   1  home: Scaffold(
   2    appBar: new AppBar(
   3      title: new Text("stack 层叠布局"),
   4      backgroundColor: Colors.pink,
   5    ),
   6
   7    body: Center(
   8       child: stack
   9    ),
   10  ),
   11);
   

   } }

之前的两个博客分别写了水平布局和纵向布局，这两种布局可以满足很多布局需求了，但是遇到一些组件的堆叠时，还是不能很好的完成任务。这个时候就需要重叠布局(stack)，

在上述代码中我们学到了一个新的方法，就是var 一个变量，为这个变量创建一个组件（我估摸着这个组件可能只有在自己的类里才能被直接使用），在这个变量中我们使用了Stack这个重叠布局组件，在其children这个属性里
创建了一个CircleAvatar组件，对其中设置了backgroundImage属性NetworkImage("")，以及大小属性radius。
创建了一个Container组件，内设文字组件。

1. 两个元素以上的布局
   在stack中使用Positioned多重重叠布局
   （个人感觉和在row中使用expanded进行布局有相同之处）

   import 'package:flutter/material.dart';

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

   class MyApp extends StatelessWidget{ @override var stack = new Stack( alignment: const FractionalOffset(0.5, 0.7), children: <Widget>[ new CircleAvatar( backgroundImage: new NetworkImage("https://avatars2.githubusercontent.com/u/41252899?s=460&v=4"), radius: 100.0, ), new Positioned( top: 10.0, left: 10.0, child: new Text("YFC"), ), new Positioned( bottom: 10.0, right: 10.0, child: new Text("https://ayang818.github.io/"), ) ], ); //使用变量创建重叠的组件，起到减轻代码量的效果 Widget build(BuildContext context){ return MaterialApp( title: "stack层叠布局",

   1  home: Scaffold(
   2    appBar: new AppBar(
   3      title: new Text("stack 层叠布局"),
   4      backgroundColor: Colors.pink,
   5    ),
   6
   7    body: Center(
   8       child: stack
   9    ),
   10  ),
   11);
   

   } }