当前位置: 首页 > >

flutter-border

发布时间:



文章目录
Border继承构造方法BorderStyle和BorderSideBorderStyleBorderSide构造方法
BoxShadow构造方法
BoxShape是Code
BorderRadius继承CodeRadius(半径)






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;


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);

属性
color?→?Color边框颜色
style?→?BorderStyle边框样式
width?→?double边框宽度

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);

属性
spreadRadius?→?double扩展程度
blurRadius?→?double模糊程度
blurSigma?→?doubleconvertRadiusToSigma(blurRadius)
color?→?Color阴影颜色
offset?→?Offset偏移

BoxShape


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



Code

enum BoxShape {
//RoundedRectangleBorder,ShapeBorder
rectangle,
//CircleBorderm,ShapeBorder
circle,
}

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

Radius(半径)


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




友情链接: