Flutter 中如何开发一个三角形

champion_ooO

已于 2023-08-11 14:01:52 修改

阅读量1.2k

点赞数 1

分类专栏： Flutter 文章标签： flutter 前端 javascript

于 2023-08-11 13:28:38 首次发布

本文链接：https://blog.youkuaiyun.com/champion_ooO/article/details/132229023

版权

Flutter 专栏收录该内容

11 篇文章

订阅专栏

Container(
  margin: EdgeInsets.only(left: 15.w),
  width: 0,
  height: 0,
  decoration: BoxDecoration(
    border: Border(
      // 四个值 top right bottom left
      right: BorderSide(
          color: index > (model.statusIndex + 1)
                      ? AppColor.ff0f0f0
                      : (index == (model.tapIndex + 1) ? const Color.fromRGBO(68, 109, 255, 1) : const Color.fromRGBO(124, 153, 255, 1)),              // 朝右;  把颜色改为目标色就可以了或者不设置
          width: 15.w,
          style: BorderStyle.solid),
      bottom: BorderSide(
          color: Colors.transparent,     // 朝下;  透明
          width: 15.w,
          style: BorderStyle.solid),
      left: BorderSide(
          color: Colors.transparent,   // 朝左;  透明
          width: 15.w,
          style: BorderStyle.solid),
      top: BorderSide(
          color: Colors.transparent,  // 朝上;  透明
          width: 15.w,
          style: BorderStyle.solid),
    ),
  ),
),

dart中可以采用border去画三角形，三角形朝向的那边就是实际你要赋值的颜色了。