Flutter入门学习--(16)布局定位控件Positioned

Flutter Positioned布局详解

最新推荐文章于 2024-07-18 11:15:39 发布

游响云停

最新推荐文章于 2024-07-18 11:15:39 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： Flutter Positioned

本文链接：https://blog.youkuaiyun.com/zx13525079024/article/details/86644618

Flutter 专栏收录该内容

19 篇文章

订阅专栏

本文介绍Flutter中Positioned控件的使用方法，该控件用于实现绝对布局，通过设置left和top属性确定子控件的位置。文章包含具体示例代码，展示如何在Stack控件中使用Positioned控件。

Positioned控件主要用来设置绝对布局，必须配合Stack控件来使用，

Positioned控件通过设置left和top属性可以设置控件的绝对位置

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Positioned布局控件',
        home: Scaffold(
           appBar: AppBar(
            title: Text("Flutter Positioned布局控件"),
          ),
          body: Stack(
            children: <Widget>[
           
          Image.network("http://www.people.com.cn/mediafile/pic/20150119/47/8293839320385270859.jpg"),
              new Positioned(
            left: 65,
            top: 5,
            child: Text("我的当前位置",style:new TextStyle(color: Colors.red),),
          ),
            ],
          )
       ));
    
  }
}