Flutter 布局练习之stack组件 层叠组件

2019/12/25 9:21:17 | 阅101 来源:好空间网络 [打印] [关闭]
 

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(title: Text("Expanded布局练习"),),
        body: MyStack(),
      ),
    );
  }
}

class MyStack extends StatelessWidget{
  ///在实际开发中,我们需要把文字放到一张图片上,这个时候就需要stack布局
  ///Stack 通常和 Positioned 一起配合使用
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      //alignment:此参数决定如何去对齐没有定位(没有使用Positioned)或部分定位的子widget。
      //所谓部分定位,在这里**特指没有在某一个轴上定位:**left、right为横轴,top、bottom为纵轴,只要包含某个轴上的一个定位属性就算在该轴上有定位。
      alignment:Alignment.center,
      //此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小,StackFit.expand表示扩伸到Stack的大小。
      fit:StackFit.loose,
      //此属性决定如何显示超出Stack显示空间的子widget,值为Overflow.clip时,超出部分会被剪裁(隐藏),值为Overflow.visible 时则不会
      overflow:Overflow.clip,
      children: <Widget>[
         Container(
          // decoration: new BoxDecoration(
          //   borderRadius: new BorderRadius.circular(150),
          //   color:Colors.red,
          // ), 
          color: Colors.red,
          width: 300,
          height: 300,
          child: Image.network("https://n.sinaimg.cn/ent/transform/605/w630h775/20190427/Oo5r-hvvuiyp2366853.jpg"),
          
        ),
        Positioned(
          left: 20,
          top: 20,
          child: Icon(Icons.favorite, size: 50, color: Colors.white)
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Text("你好啊,李银河", style: TextStyle(fontSize: 20, color: Colors.white)),
        )
      ],
    );
  }
}


这里的posittioned 就是和CSS里的postions 一样

效果图:


2.png

经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。