概述
文章目录
- Border
- 继承
- 构造方法
- BorderStyle和BorderSide
- BorderStyle
- BorderSide
- 构造方法
- BoxShadow
- 构造方法
- BoxShape
- 是
- Code
- BorderRadius
- 继承
- Code
- Radius(半径)
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 → double | convertRadiusToSigma(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); 椭圆
最后
以上就是热情海燕为你收集整理的flutter-border的全部内容,希望文章能够帮你解决flutter-border所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复