美文网首页flutter入门教程-从零开始
flutter入门教程-从零开始-4 flutter常用布局Co

flutter入门教程-从零开始-4 flutter常用布局Co

作者: cosfun | 来源:发表于2018-12-29 18:15 被阅读0次

    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,
      })
    

    1.color颜色

    其中color用来指定背景色

    return Container(
            color: Colors.blue,
          );
    

    以上代码将展示一个全蓝的界面

    return Container(
            color: Colors.blue,
            child: Container(
              color: Colors.red,
            ),
          );
    

    以上代码将展示一个全红的界面,红色子界面覆盖了蓝色界面

    2.MARGIN边距

    2.1EdgeInsets.fromLTRB
    EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)
    

    表示左上右下4个边的间距

    return Container(
            color: Colors.blue,
            margin: EdgeInsets.fromLTRB(0, 100, 0, 0),    
          );
    

    展示结果如下


    image.png
      return Container(
            color: Colors.blue,
            margin: EdgeInsets.fromLTRB(100, 100, 100, 100),
    
          );
    

    如下


    image.png
    2.2.EdgeInsets.all
    const EdgeInsets.all(double value)
          : left = value, top = value, right = value, bottom = value;
    

    同时设置4个边的间距

    return Container(
            color: Colors.blue,
            margin: EdgeInsets.fromLTRB(100, 100, 100, 100),
            child: Container(
              color: Colors.red,
              margin: EdgeInsets.all(20),
            ),
          );
    

    效果如下


    image.png

    可见,子widget的margin是从父widget内部开始算的,而不是每次都从屏幕边缘开始,这点比较符合直觉,其中一个令人疑惑的地方就是,EdgeInsets.all的单位是什么呢?如何保证不同的屏幕大小有一致的效果呢?

    屏幕适配

    相关文章

      网友评论

        本文标题:flutter入门教程-从零开始-4 flutter常用布局Co

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