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

flutter基础(Stack)- 六

相关文章: