边框Border详解

Border

• Border为一个框创建一个边框，包括 4 个边：上、下、左、右。 其构造：

const Border({
    this.top = BorderSide.none,
    this.right = BorderSide.none,
    this.bottom = BorderSide.none,
    this.left = BorderSide.none,
  })

例子：

Container(
  width: 200,
  height: 100,
  decoration: const BoxDecoration(
    border: Border(
      top: BorderSide(width: 5,color: Colors.red),
      left: BorderSide(width: 5,color: Colors.green),
      right: BorderSide(width: 5,color: Colors.pink),
      bottom: BorderSide(width: 5,color: Colors.orange),
    )
  ),
 ),

• Border.all构造函数。

Container(
  width: 200,
  height: 100,
  decoration:  BoxDecoration(
     border: Border.all(
       width: 5.0,
       color: Colors.red,
     )
  ),
),

• Border.fromBorderSide

使用 BorderSide 对象给定的参数创建一致的边框(所有边都相同)

 Container(
  width: 200,
  height: 100,
  decoration:  const BoxDecoration(
      border: Border.fromBorderSide(
        BorderSide(
          width: 5.0,
          color: Colors.green,
          style: BorderStyle.solid
        )
      )
  ),
),

• Border.symmetric

创建一个垂直和水平对称的边框。垂直参数应用于左右边缘。水平参数应用于顶部和底部边缘。垂直和水平参数的默认值为 BorderSide.none 且不为空。

 const Border.symmetric({
    BorderSide vertical = BorderSide.none,
    BorderSide horizontal = BorderSide.none,
  })

 Container(
  width: 200,
  height: 100,
  decoration:  const BoxDecoration(
      border: Border.symmetric(
        vertical: BorderSide(
          width: 5.0,
          color: Colors.green,
          style: BorderStyle.solid
        ),
        horizontal: BorderSide(
          width: 4,
          color: Colors.blue,
          style: BorderStyle.solid
        )
      )
  ),
),