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,)
      )
    );
  }
}