Flutter - view - Container容器组件

Container

属性

alignment：child的居中方式

示例代码：

alignment: Alignment.topLeft

其值（源码粘贴）：

/// The top left corner.
static const Alignment topLeft = Alignment(-1.0, -1.0);

/// The center point along the top edge.
static const Alignment topCenter = Alignment(0.0, -1.0);

/// The top right corner.
static const Alignment topRight = Alignment(1.0, -1.0);

/// The center point along the left edge.
static const Alignment centerLeft = Alignment(-1.0, 0.0);

/// The center point, both horizontally and vertically.
static const Alignment center = Alignment(0.0, 0.0);

/// The center point along the right edge.
static const Alignment centerRight = Alignment(1.0, 0.0);

/// The bottom left corner.
static const Alignment bottomLeft = Alignment(-1.0, 1.0);

/// The center point along the bottom edge.
static const Alignment bottomCenter = Alignment(0.0, 1.0);

/// The bottom right corner.
static const Alignment bottomRight = Alignment(1.0, 1.0);

margin / padding：间距

示例代码：

 margin: const EdgeInsets.fromLTRB(10.0, 50.0, 100.0, 150.0),
 padding: const EdgeInsets.symmetric(vertical:10.0,horizontal: 30.0),

其值：

const EdgeInsets.all(20.0)：
      表示left、top、right、bottom都是一样的
const EdgeInsets.fromLTRB(10.0, 50.0, 100.0, 150.0)
      分别设置left、top、right、bottom
const EdgeInsets.symmetric(vertical:10.0,horizontal: 30.0)：
      查看源码可知left、right的值为horizontal ，top、bottom为vertical
const EdgeInsets.only(left: 50.0)
      仅仅设置left、top、right、bottom其中的一个、2个、3个、4个

decoration container的装饰类
主要是设置container的背景、边框、阴影、圆角、形状（类似shape）

不可以与Color同时设置，会异常
异常提示：Cannot provide both a color and a decoration

border：边框、圆角

示例代码：

border: Border.all(width: 2.0, color: Colors.red),
shape: BoxShape.rectangle,
borderRadius:
    const BorderRadius.all(const Radius.circular(50.0))

注意：

若是想达到半圆的效果，圆角的角度要大于高度的1/2
当shape: BoxShape.circle时不能设置borderRadius ，会异常
    异常信息：'shape != BoxShape.circle ||borderRadius == null': is not true.

border：阴影
默认情况下阴影为纯黑色，零[偏移]
示例代码：

boxShadow: <BoxShadow>[
  new BoxShadow(
    offset: Offset(-10.0, 10.0),//偏移量，
  )
],

效果图：

注意：

offset：第一个参数是水平方向，第二个是垂直方向上的，值的正负决定了阴影的方向

设置阴影大小
示例代码：

boxShadow: <BoxShadow>[
  new BoxShadow(
    color: Colors.black87,
    spreadRadius: 1.0,
    offset: Offset(-10.0, 10.0),//偏移量，第一个参数是水平方向，第二个是垂直方向上的
  )
],

效果图：

设置阴影+模糊

示例代码：

boxShadow: <BoxShadow>[
  new BoxShadow(
    color: Colors.black87,
    blurRadius: 1.0,
    offset: Offset(-10.0, 10.0),
  )
],

效果图：

Gradient：渐变背景

1 - LinearGradient

除了设置渐变颜色外还可以设置渐变开始、结束方向，查看源码可知其默认值是：

this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,

示例代码：

decoration: new BoxDecoration(
  gradient: const LinearGradient(colors: [
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.black26
], begin: Alignment.centerRight, end: Alignment.center)),

效果图：

---

2 - RadialGradient

可实现圆的渐变，使用和LinearGradient类似

示例代码：

decoration: new BoxDecoration(
  gradient: new RadialGradient(colors: [
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.red
],radius: 0.1)),

效果图：

---

示例代码：

decoration: new BoxDecoration(
  gradient: new RadialGradient(colors: [
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.red
],radius: 0.1,tileMode:TileMode.repeated)),

效果图：

3 - SweepGradient

可实现带角度的渐变

示例:

decoration: new BoxDecoration(
  gradient: new SweepGradient(colors: [
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.red
  ]))

效果图：

注意：

通过上面对比发现，剩余没有指定渐变的背景是就近颜色的色值

Container整体使用

示例代码：

child: Container(
  child: new Text(
    "HelloWorld",
    style: TextStyle(
        decoration: TextDecoration.underline,
        color: Colors.white,
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic),
  ),
  alignment: Alignment.center,
  margin: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 30.0),
  padding: const EdgeInsets.all(10.0),
  height: 70.0,
  decoration: new BoxDecoration(
      gradient: const LinearGradient(colors: [
        Color.fromARGB(255, 255, 81, 123),
        Color.fromARGB(255, 255, 84, 58)
      ]),
      border: Border.all(width: 2.0, color: Colors.red),
      shape: BoxShape.rectangle,//不加这个也可以实现
      borderRadius:
          const BorderRadius.all(const Radius.circular(50.0))),
),

demo:实现渐变带框圆角按钮，效果图：