flutter-border_flutter border

Border

继承

Object-> ShapeBorder-> BoxBorder-> Border

构造方法

很简单的构造方法，用四个BorderSide组成，

  const Border({
    this.top =BorderSide.none,
    this.right = BorderSide.none,
    this.bottom = BorderSide.none,
    this.left = BorderSide.none,
  }) : assert(top != null),
       assert(right != null),
       assert(bottom != null),
       assert(left != null);
       
factory Border.all({
    Color color = const Color(0xFF000000),
    double width = 1.0,
    BorderStyle style = BorderStyle.solid,
  }) {
    final BorderSide side = BorderSide(color: color, width: width, style: style);
    return Border.fromBorderSide(side);
  }
  
 const Border.fromBorderSide(BorderSide side)
      : assert(side != null),
        top = side,
        right = side,
        bottom = side,
        left = side;
       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

BorderStyle和BorderSide

BorderStyle

枚举类，none（跳过不绘制） solid实线 虚线在哪里？

盒子边框的一面
一个边界是由四个BorderSide对象：Border.top， Border.left，Border.right和Border.bottom。请注意，将BorderSide.width设置为0.0将导致细线渲染。BorderSide.width中提供了更复杂的解释。

BorderSide

构造方法

 const BorderSide({
    this.color = const Color(0xFF000000),
    this.width = 1.0,
    this.style = BorderStyle.solid,
  }) : assert(color != null),
       assert(width != null),
       assert(width >= 0.0),
       assert(style != null);
1
2
3
4
5
6
7
8

BoxShadow

由盒子投下的阴影。
Object-> Shadow-> BoxShadow

构造方法

  const BoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    this.spreadRadius = 0.0,
  }) : super(color: color, offset: offset, blurRadius: blurRadius);
1
2
3
4
5
6

BoxShape

是

渲染Border或BoxDecoration时使用的形状
如果需要对形状进行插值或动画处理，请考虑直接使用ShapeBorder子类（使用ShapeDecoration），而不是使用BoxShape和Border。该边框类不能在不同形状之间的插值。

Code

enum BoxShape {
//RoundedRectangleBorder,ShapeBorder
rectangle,
//CircleBorderm,ShapeBorder
circle,
}
1
2
3
4
5
6

BorderRadius

矩形每个角的一组不可变半径
通过使用BoxDecoration时形状是BoxShape.rectangle。
BorderRadius类根据视角指定偏移，例如 topLeft。这些值不受TextDirection的影响。要支持从左到右和从右到左布局，请考虑使用 BorderRadiusDirectional，它以相对于TextDirection（通常从环境方向性获得）的术语表示。

继承

Object->BorderRadiusGeometry->BorderRadius

Code

 const BorderRadius.all(Radius radius) : this.only(
    topLeft: radius,
    topRight: radius,
    bottomLeft: radius,
    bottomRight: radius,
  );
1
2
3
4
5
6

Radius（半径）

圆形或者椭圆
const Radius.circular(double radius) : this.elliptical(radius, radius); 圆形
const Radius.elliptical(this.x, this.y); 椭圆