flutter学习:flutter中常用的Stack layout详解

frontend 投稿 1800 0 评论

简介

对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等。

Stack详解

我们先来看下Stack的定义:

class Stack extends MultiChildRenderObjectWidget

Stack继承自MultiChildRenderObjectWidget,表示在stack中可以render多个child widget对象。

所谓positioned,是指child widget被包装在Positioned中。什么是Positioned呢?

如果一个对象被包含在Positioned中,那么这个对象就是一个Stack中的positioned对象。

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

这六个属性分别是left,top,right,bottom,width和height。其中left,top,right,bottom分别表示到左,顶,右,底的距离,这个距离是相对stack来说的。而width和height则表示的是Positioned的宽度和高度。

如果在一个轴方向的三个值都不存在,那么会使用Stack.alignment来定位子元素。

对于non-positioned的child,是通过Stack的alignment来进行布局的,默认情况下是按top left corners进行布局的。

Stack的属性

  Stack({
    Key? key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    @Deprecated(
      'Use clipBehavior instead. See the migration guide in flutter.dev/go/clip-behavior. '
      'This feature was deprecated after v1.22.0-12.0.pre.',
    )
    this.overflow = Overflow.clip,
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  })

可以看到Stack中有alignment,textDirection,fit,overflow和clipBehavior这几个属性。

AlignmentGeometry中有两个需要设置的属性,分别是start和y。

start的位置跟TextDirection是相关联的,如果TextDirection的值是ltr,也就是说从左到右排列,那么start就在最左边,如果TextDirection的值是rtl,也就是说从右到左排列,那么start就是在最右边。

为了用户更加方便的使用AlignmentGeometry,AlignmentGeometry提供了一些便捷的方法,如topStart,topCenter,topEnd等,大家可以自行选取。

接下来是StackFit类型的fit属性,StackFit有三个值,分别是loose,expand和passthrough。

expand表示是一个扩充的效果,比如Stack规定的size是300x500,那么它的child的宽度就是300,child的高度就是500.

overflow表示children超出展示部分是否会被剪切。不过这个属性已经是Deprecated,flutter推荐我们使用clipBehavior这个属性来代替。

none表示不进行任何裁剪,hardEdge的裁剪速度最快,但是精确度不高。antiAlias速度比hardEdge慢一点,但是有光滑的边缘。antiAliasWithSaveLayer是最慢的,应该很少被使用。

Stack的使用

在我们这个例子中,我们在Stack中设置一个背景图片,然后在图片上叠加一个文本。

首先我们需要设置Stack的alignment方式,我们希望文本和图片的中心重合,也就是说把文字放在图片中间,我们将Stack的alignment设置为Alignment.center。

 const CircleAvatar(
          backgroundImage: AssetImage('images/head.jpg'),
          radius: 100,
        ),

上面的代码能够创建一个半径是100的圆。

Text(
            '编辑',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          )

然后把Text封装在Container中,并使用BoxDecoration给他指定一个背景:

Container(
          decoration: const BoxDecoration(
            color: Colors.green,
          ),
          child: const Text(
              ...

最后将上面的代码组合起来就是我们最后的Stack:

 Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        const CircleAvatar(
          backgroundImage: AssetImage('images/head.jpg'),
          radius: 100,
        ),
        Container(
          decoration: const BoxDecoration(
            color: Colors.green,
          ),
          child: const Text(
            '编辑',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );

运行生成的界面如下:

总结

本文的例子:https://github.com/ddean2009/learn-flutter.git

http://www.flydean.com/11-flutter-ui-layout-stack/

欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!

编程学习分享 » flutter学习:flutter中常用的Stack layout详解

赞 (0) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽

高效,专业,符合SEO

联系我们