技術胖Flutter第三季-17佈局PositionedWidget層疊定位組件

 

博客地址：

https://jspang.com/post/flutter3.html#toc-d7a

 

把咱們上節的 Container的部分代碼去掉。

 

使用:Positioned 有點像css裏面的絕對定位。

三個元素以上才使用positioned

 

這個能夠調整left和top的位置。比較靈活

import 'package:flutter/material.dart';

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

class  MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    var stack= new Stack(
      alignment: const FractionalOffset(0.5, 0.8),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage('https://jspang.com/static//myimg/blogtouxiang.jpg'),
          radius: 100.0,
        ),
       new Positioned(
         top:10.0,
         left:10.0,
         child: new Text('JSPang.com'),
       ),
       new Positioned(
         bottom: 10.0,
         right:10.0,
         child: new Text('技術胖'),
       )
      ],
    );
    return MaterialApp(
      title:'Row Widget Demo',
      home:Scaffold(
        appBar: new AppBar(
          title: new Text('水平方向佈局'),
        ),
        body:Center(
          child: stack,
        )
      )
    );
  }
}

所有代碼