Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)

2019-10-2510:48:18APP与小程序开发Comments2,955 views字数 4482阅读模式
Stack组件相当于Android布局里面的帧布局,是一种叠层式布局,组件覆盖组件,通常和Positioned组件连用。以下是其构造方法:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html
Stack({
    Key key,
    //子控件的对齐方式
    this.alignment = ,
    //文本的方向
    this.textDirection,
    //子控件的填充方式
    this.fit = ,
    //子控件超出父控件时候的处理
    this.overflow = ,
    List children = const [],
  })

如下图你能看出这是用Stack布局实现的吗?这种布局用处还是挺多的,比如头像上有昵称,电话;还有遮罩效果等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

效果图

Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

让我们具体的来看一看它自身的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

alignment

这个属性和Container控件的对齐属性是一样的,具体的介绍在Flutter控件之Container记录,这里直观的给出属性的作用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

Widget _alignStack()=>Container(
    margin: (top: 10),
    color: ,
    constraints: (height: 180),
    child: Stack(
      //子控件的对齐方式是
      alignment: ,
      children: [
        Container(alignment: ,
        color: ,
        child: Text("",style: TextStyle(color: ),),),
        Container(
          height: 100,
            width: 100,
          color: ,

        ),
        Container(height: 60,width: 60,color: ,)
      ],
    ),
  );

效果图

Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

textDirection

子文本控件文本的方向,有两种模式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

  • 从左到右
  • 从右到左

Widget _textLeftStack()=>Container(
    margin: (top: 10),
    color: ,
    padding: (vertical: 10,horizontal: 10),
    constraints: (height: 180),
    child: Stack(
      textDirection: ,
      children: [
        Text('left to rigt',style: TextStyle(color: ),),
      ],
    ),
  );

效果图

Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

Widget _textRightStack()=>Container(
    margin: (top: 10),
    constraints: (height: 180),
    color: ,
    padding: (horizontal: 10,vertical: 10),
    child: Stack(
      textDirection: ,
      children: [
        Text(' rigt to left',style: TextStyle(color: ),),
      ],
    ),
  );

效果图

Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

fit

子控件的填充模式,用于控制着子控件的大小。由一个枚举类StackFit控制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

  • 按最小的来
  • 按最大的来.
  • Stack上层为->Expanded->Row, 横向尽量大, 纵向尽量小.取决于父控件
Widget _fitStack()=>Container(
    color: ,
    margin: (top: 10),
    constraints: (height: 220),
    child: Column(
      mainAxisAlignment: ,
      crossAxisAlignment: ,
      children: [
        Container(
          margin: (top: 10),
          constraints: (height: 60),
          color: ,
          child: Stack(
            fit: ,
            children: [
              Container(
                color: ,
                child: Text('',style: TextStyle(color: ,fontSize: 20),),
              ),
            ],
          ),
        ),
        Container(
          margin: (top: 10),
          constraints: (height: 60),
          color: ,
          child: Stack(
            fit: ,
            children: [
              Container(
                color: ,
                child: Text('',style: TextStyle(color: ,fontSize: 20),),

              ),
            ],
          ),
        ),

        Container(constraints: (height:60),
        margin: (top: 10),
        color: ,
          child: Stack(
            fit: ,
            children: [
              Container(
                color: ,
                child: Text('',
                style: TextStyle(color: ,fontSize: 20),),
              ),
            ],
          ),
        ),
      ],
    ),
  );

效果图

Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

当子控件的内容超出Stack控件的时候,控制超出控件的内容是裁剪还是可见,有两种模式.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

  • 可见,但会超出
  • 裁剪

Widget _overflowVisibleStack()=>Container(
    margin:  (top: 10),
    color: ,
    constraints: (height: 40),
    child: Stack(
      overflow: ,
      children: [
        Positioned(
          top: 15,
          child: Text("Flutter 基础布局Widgets之Stack\nFlutter 基础布局Widgets之Stack",
            style: TextStyle(color: ),),
        ),
      ],
    ),
  );

Widget _overClipStack()=>Container(
    margin:  (top: 40),
    color: ,
    constraints: (height: 40),
    child: Stack(
      overflow: ,
      children: [
        Positioned(
          top: 15,
          child: Text("Flutter 基础布局Widgets之Stack\nFlutter 基础布局Widgets之Stack",
            style: TextStyle(color: ),),
        ),
      ],
    ),
  );

效果图

Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

Positioned

在Stack布局中用于控制子控件位置的组件。其构造方法:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

const Positioned({
    Key key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  })

顾名思义就是从各个方向控制子控件的位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

class StackWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: (),
      child: new Stack(
        alignment: , //指定未定位或部分定位widget的对齐方式
        children: [
          Container(
            child: Text(
              'positioned-null',
              style: TextStyle(color: ),
            ),
            color: ,
          ),
          Positioned(
            left: ,
            child: Text('positioned-left'),
          ),
          Positioned(
            top: 18,
            child: Text('positioned-top'),
          ),
          Positioned(
            bottom: 18,
            child: Text('positioned-bottom'),
          ),
          Positioned(
            right: 18,
            child: Text('positioned-right'),
          ),
        ],
      ),
    );
  }
}

效果图

Flutter控件之Stack(叠层式布局组件,常和Positioned组件连用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17115.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/17115.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定