美文网首页Flutter
Flutter UI - Container 容器

Flutter UI - Container 容器

作者: 前行的乌龟 | 来源:发表于2019-08-19 16:53 被阅读0次

    前文说过 Flutter 把宽高 位置 约束 装饰 边距 都抽象出来,抽象成容器来承载具体的 view,这个容器 就是我们要说的 Container 了,从语义上就能看出来,这是我觉得 Google 起名字起的最好的了


    Container 属性

    Container({
        Key key,
        this.alignment,
        this.padding,
        Color color,
        Decoration decoration,
        this.foregroundDecoration,
        double width,
        double height,
        BoxConstraints constraints,
        this.margin,
        this.transform,
        this.child,
      })
    
    • key - 是构造函数系统自动传入的,我们不用管,用来更新 WeightTree 的
    • alignment - 是对齐方式,Container 的大小要是不内部子 view 大的花,这个 alignment 才能起作用
    • color - 是背景色,和 decoration 冲突,二者只能使用一个
    • decoration - 是装饰,相当于 android 的 shape,我专门写了一篇文章,不了解的可以去看:Flutter - Decoration
    • constraints - 这个是额外约束
    • transform - 矩阵变换,类型为 Matrix4

    其他属性就不用介绍了,现在看下 Container 特征


    Container size 设置

    Flutter 里具体的内容 Weight 没法自己设置宽高了,全得靠诸如:Container 这样的父容器来设置,Container 只能给 width/height 设置具体值和最大最小值,要是想像 android 那样设置 match_parent、wrap_content 就必须借助布局 weight 才行,Container 只能设置 width/height 同时 match_parent、wrap_content,不能单独设置,非常不灵活

    class oneContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          // 宽高只能接收具体值
          width: 600,
          height: 600,
          // 借助 BoxConstraints 可以设置最大值、最小值
          constraints: BoxConstraints(
            maxHeight: 20,
            maxWidth: 20,
            minHeight: 20,
            minWidth: 20,
          ),
        );
      }
    }
    

    注意点:

    • Container 没有子 view 的也没有设置大小时,默认无无限大,填充整个父容器
    • Container 有子 view 但是 Container 自身没有设置大小限制时,相当于 wrap_content

    最后看看 Container match_parent,需要借助:BoxConstraints.expand()

    class oneContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          color: Colors.lightBlueAccent,
          constraints: BoxConstraints.expand(),
          child: Text("AAAAAA"),
        );
      }
    }
    

    添加子 view

    Flutter 中有个规律,能添加多个子 view 的使用 children 负数,只能添加1个子 view 的使用 child 单数,Container 本来就是作为一个外层容器的,干的是形容词的事,通过 child 添加子 view

    class oneContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          color: Colors.lightBlueAccent,
          child: Text("AAAAAA"),
        );
      }
    }
    

    本来这个没必要拿出来专门说的,但是有的朋友搞不清为啥一会是children 一会是child


    Alignment 对齐方式

    Alignment 相当于 Android 的 layout_gravity,控制 Container 内部 view 在 Container 中的位置,但是 Container 的 size 必须比其内部的子 view 大才能生效,要不大家想想要这个参数干嘛

    Container 中的 Alignment 有3种方式,2套坐标:

    class oneContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          width: 200,
          height: 200,
          // 绝对坐标
          alignment: FractionalOffset(0, 0),
          // 相对坐标
          alignment: Alignment(-1,1),
           // 预设模式
          alignment: Alignment.center,
          color: Colors.lightBlueAccent,
          child: Text("AAAAAA"),
        );
      }
    }
    

    Alignment.center 大家逗看的懂吗,我就不说了

    • 相对坐标是以 Container 中心点为原点,左边为负数,右边是正数,Alignment(0,0) 代表居中


    • 绝对坐标以 Container 左上角为原点,像左像右延伸至1,FractionalOffset(0.5, 0.5) 代表居中


    大家放心,临界值 0 或者 1 都不会超过 Container 的


    最后

    Container 那些设置单独拿出来其实都是 weight,比较常用的有: Padding Center SizeBox Align,Container 用习惯了这些没必要用了

    Container 的transform 矩阵变换属性,类型为 Matrix4,具体的请大家自己去百度吧,这里不介绍这个了,基本上 Container 就这些了

    不过 Align 有必要说一下,Align 可以设置父控件宽高是子控件宽高的倍数

    比如这样:外层控件是子控件宽高的 2倍

    new Align(
      alignment: Alignment.center,
      widthFactor: 2.0,
      heightFactor: 2.0,
      child: new Text("Align"),
    )
    

    相关文章

      网友评论

        本文标题:Flutter UI - Container 容器

        本文链接:https://www.haomeiwen.com/subject/vvlesctx.html