Flutter用边框实现三角形 2022-06-06 周一

简介

Flutter和前端一样，采用盒模型。
前端中有用CSS，只用边框实现三角形的案例，这个可以借鉴过来

借鉴

• 和div类似的就是Container；

• 宽和高属性都设置为0；

• 三角形的高度就是Border宽度，底部是2倍的宽度；

• 上下左右4个方向，只要留一个就可以了；这个代表了三角形不同的朝向。（相反方向。比如，朝上的三角形就设置bottom）

• 前端CSS

div {

                width: 0;

                height: 0;

                border: 20px solid #fff;

                border-bottom-color:#ccc;     // 朝上
                /*border-left-color: #ccc;*/     // 朝右
                /*border-right-color: #ccc;*/   // 朝左
               /*border-top-color: #ccc;*/      // 朝下
}

• Flutter Dart代码

Container(
  width: 0,
  height: 0,
  decoration: BoxDecoration(
    border: Border(
      // 四个值 top right bottom left
      bottom: BorderSide(
          color: Colors.blue,                  // 朝上; 其他的全部透明transparent或者不设置
          width: 20,
          style: BorderStyle.solid),
      right: BorderSide(
          color: Colors.transparent,     // 朝左;  把颜色改为目标色就可以了；其他的透明
          width: 20,
          style: BorderStyle.solid),
      left: BorderSide(
          color: Colors.transparent,   // 朝右；把颜色改为目标色就可以了；其他的透明
          width: 20,
          style: BorderStyle.solid),
      top: BorderSide(
          color: Colors.transparent,  // 朝下;  把颜色改为目标色就可以了；其他的透明
          width: 20,
          style: BorderStyle.solid),
    ),
  ),
),

• 大概的样子（颜色值按照需求设置）：

设置bottom

简评

• 利用Boarder来设置三角形，这脑洞简直了。

• 虽然能实现，但是，这还是Boarder吗？

• 作用和名字相差十万八千里，这和编码的时候给变量命名为a，b，c之类的差不多。

• 虽然很新奇，作为偶尔的炫技是很好的，但是实际的使用，真的不推荐。

• iOS原生的话，用贝塞尔曲线；Flutter的话用Painter；画一个出来也不是很复杂。

• 让UI给个图片，也是推荐的做法。

• 类似的还有箭头之类的，用Flutter提供的Icon，或者直接让UI给切图，才是推荐的做法。

参考文档

2018-04-14 借助边框特性实现边框三角形

flutter 中用边框实现三角形

web前端入门到实战：通过CSS边框实现三角形和箭头