我是靠谱客的博主 热情海燕,最近开发中收集的这篇文章主要介绍flutter-border,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

文章目录

      • 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 → 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); 椭圆

最后

以上就是热情海燕为你收集整理的flutter-border的全部内容,希望文章能够帮你解决flutter-border所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(51)

评论列表共有 0 条评论

立即
投稿
返回
顶部