Flutter学习之重叠布局

两个元素的重叠布局
可以使用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层叠布局",

      home: Scaffold(
        appBar: new AppBar(
          title: new Text("stack 层叠布局"),
          backgroundColor: Colors.pink,
        ),

        body: Center(
           child: stack
        ),
      ),
    );
  }
}

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

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

两个元素以上的布局
在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层叠布局",

      home: Scaffold(
        appBar: new AppBar(
          title: new Text("stack 层叠布局"),
          backgroundColor: Colors.pink,
        ),

        body: Center(
           child: stack
        ),
      ),
    );
  }
}

Flutter学习之重叠布局

猜你喜欢