flutter基础（Stack）- 六

最新推荐文章于 2022-11-21 08:41:51 发布

IT_Nice

最新推荐文章于 2022-11-21 08:41:51 发布

阅读量246

点赞数

分类专栏： Flutter 文章标签： flutter层叠控件

Flutter 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Stack - 层叠布局（一个控件在另外一个控件之上）

Stack控件的每一个子控件都是定位或不定位，定位子控件通过Positioned控件包裹，Stack控件本身包含所有不定位的子控件，其根据alignmnet定位。然后根据动定位的子控件的top、left、right、bottom属性来定位子控件的位置；

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    title: "flutter控件-层叠",
    home: new LayoutDemo(),
  ));
}


class LayoutDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("层叠定位布局"),
      ),
      body: new Center(
        child: new Stack(
          children: <Widget>[
            new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
            new Positioned(
              left: 35.0,
              right: 35.0,
              top: 45.0,
              child: new Text( 'Whatever is worth doing is worth doing well. ๑•ิ.•ั๑',
                  style: new TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'serif',
                  ),
              )
            )
          ],
        ),
      ),
    );
  }
}