flutter-布局（Stack：层叠布局）

在头像上方再放入一个容器，容器里边写上字，这时候我们就可以使用Stack布局。

import 'package:flutter/material.dart';

void main ()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    //层叠
    var stack=Stack(
      // 对齐 第一位x轴  第二位Y轴  适合2个组件定位
      alignment: const FractionalOffset(0.5, 0.2),
      children: <Widget>[
        CircleAvatar(
          backgroundImage: new AssetImage('images/2222.png'),
          radius: 100.0,
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.lightBlue[200],
          ),
          padding: const EdgeInsets.all(5.0),
          child: Text('JSPang'),
        )
      ],
    );

    return MaterialApp(
      title:"layout",
      home:Scaffold(
        appBar: AppBar(
          title:Text('层叠布局Stack')
        ),
        body: Center(child: stack,)
      )
    );
  }
}

 

Stack的Positioned属性

 

 

import 'package:flutter/material.dart';

void main ()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    //层叠
    var stack=Stack(
      // 对齐 第一位x轴  第二位Y轴
      alignment: const FractionalOffset(0.5, 0.2),
      children: <Widget>[
        CircleAvatar(
          backgroundImage: new AssetImage('images/2222.png'),
          radius: 100.0,
        ),
        Positioned(
          top: 10.0,
          left: 10.0,
          child: Text('wwww.baidu.com'),
        ),
        Positioned(
          bottom: 10.0,
          right: 10.0,
          child: Text('www.google.com'),
        )
      ],
    );

    return MaterialApp(
      title:"layout",
      home:Scaffold(
        appBar: AppBar(
          title:Text('层叠布局Stack')
        ),
        body: Center(child: stack,)
      )
    );
  }
}