2-1-1.基础组件【Container】饰【Div】单child

我们在 Flutter 中布局 和 HTML 和 Css 书写还是有一点区别的。

官方组件链接🔗

常用组件片面讲解链接🔗

简介：

Container 在 Flutter 中使用的也是比较多的，Container就像是web中的Div, 大家可想而至div的强大之处。所以Container 也是在页面布局中常用的容器之一

【Container】饰【DIV】

web 页面写法。

<div class="greybox">
    Lorem ipsum
</div>
.greybox {
      background-color: #e0e0e0; /* grey 300 */
      width: 320px;
      height: 240px;
      font: 900 24px Georgia;
 }

Flutter 页面写法。

Container(
    child: Text(
       "Lorem ipsum",
       style: TextStyle(
         fontSize: 24,
         fontWeight: FontWeight.w900,
         fontFamily: "Georgia",
       ),  
     ),
    width: 320,
    height: 240,
    color: Colors.grey[300],
  )

Container中的属性都有。

Container({
    Key key,
    this.alignment,  // 对其方式：alignment: Alignment.center, 居中对齐。
    this.padding,    // 内边距：padding: EdgeInsets.only(top : 40.0, left : 30.0)，属于修饰的范畴。
    this.color,      // 背景色的设置：Colors.white || Color(0xffFFFFFF); 在修饰Decoration中设置了则外侧就不能设置。
    this.decoration, // 修饰容器：景后装饰，比如说背景图片 中设置color 和 外面的color 二者不能共存
    this.foregroundDecoration, // 景前修饰：比如说，蒙层，在child前面添加装饰
    double width,         // 宽
    double height,   // 高
    BoxConstraints constraints, // 容器大小的限制条件。
    this.margin,     // 外边距
    this.transform,  // 变换
    this.child,      // 子元素
    this.clipBehavior = Clip.none,
  })

【foregroundDecoration】前景装饰，就是遮住子极z-index=1000;

foregroundDecoration: new BoxDecoration( 
  border: new Border.all(width: 2.0, color: Colors.red), //边框
  color: Colors.black87,   //背景色
  //  四个 radius 一起设置。
  //  borderRadius: new BorderRadius.all(new Radius.circular(20.0)),  
  // 单个 圆角设置。
  borderRadius: BorderRadius.only(
      topLeft: new Radius.circular(40.0),
      bottomRight: new Radius.circular(40.0),
  ),
  image: new DecorationImage(
    //  image: new NetworkImage(""), // 加载网络图片链接
    image:AssetImage("lib/image/img1.jpg"), // 背景图片
  ),
)

【decoration】容器修饰

                constraints: new BoxConstraints.expand(
                height:Theme.of(context).textTheme.headline1.fontSize * 1.1 + 300.0,
        ),
        decoration: BoxDecoration(
          color : Colors.black87,
          border: Border.all(width : 2.0, color : Colors.red),
          borderRadius: BorderRadius.only(
            topLeft: new Radius.circular(40.0),
            bottomRight: new Radius.circular(40.0),
          ),
          image: DecorationImage(
             image: AssetImage("lib/image/img1.jpg"),
             centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0), // 让图片撑满。
          )
        ) ,
 //  要是想单个边框来设置的话，则下面这种方式添加，但是这样设置的话，【则添加圆角（borderRadius）则会错误】。
 // decoration 里面添加。
      border: Border(
          bottom : BorderSide(
             width: 3.0,
             color: Colors.red
          )
      ),
// 设置背景渐变色 decoration里面添加。 下面为了更好的掩饰渐变，吧图片去掉了。
            gradient: LinearGradient(
           begin : Alignment.topLeft,
           end : Alignment.bottomCenter,
           colors : [
               Colors.pinkAccent,
               Colors.white,
            ],
      )
 // 添加 shape 让Container 变成圆, 但是这样的话，不能添加border | borderRadius 影响绘画圆
      shape: BoxShape.circle,

【padding】【margin】

 padding: EdgeInsets.only(top : 40.0, left : 30.0), // 设置内边距
 margin: EdgeInsets.all(10.0),  // 设置外边距

【alignment】

文字居中的时候我把 padding 和 margin 去掉了。

alignment: Alignment.center,

【transform】

这就简单的展示一下，后续再详细讲解。

// 变换
transform: new Matrix4.rotationX(0.8)

【constraints】约束

上面的代码我是加了约束的，不然我设置的高没那么大。

约束代码:

constraints: new BoxConstraints.expand(
      height:Theme.of(context).textTheme.headline1.fontSize * 1.1 + 300.0,
),
// 但是一般我们约束约束最小高度，最大高度等。
const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  }) : assert (minWidth != null),
       assert (maxWidth != null),

添加了就象上面那样，增加了高度等，没添加的则如下图。

是否需要添加，看需求而定。