zoukankan      html  css  js  c++  java
  • 技术胖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,
            )
          )
        );
      }
    }
    全部代码
  • 相关阅读:
    Sql Server增删改查字段的语法
    Django-2
    Django-1
    Django自学历程
    前端之bootstrap框架
    前端之JQuery
    前端之DOM
    前端之BOM
    前端之JavaScript
    前端之css
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/10567693.html
Copyright © 2011-2022 走看看