【Flutter 问题系列第 51 篇】 A borderRadius can only be given for a uniform Border 的解决方案

这是【Flutter 问题系列第 51 篇】，如果觉得有用的话，欢迎关注专栏。

文章目录

一：问题描述

假如 UI 给你设计的弹窗样式的底部按钮是这样的

数字 1 处有圆角，数字 2 处是边框。

也就是对一个 Container 只设置其属性 borderRadius 的 bottomLeft 有圆角，border 属性的 top 有边框。

这不是张飞吃豆芽 — 小菜一碟吗，走你，代码如下所示

return Container(
  decoration: BoxDecoration(
    border: Border(top: BorderSide(color: Colors.red, width: 1)),
    borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20)),
  ),
  child: Text("取消", style: TextStyle(fontSize: 16, color: Color(0xFFFD785D))),
);

然后报错它不就来了吗，报错信息如下图所示
在这里插入图片描述
错误信息是 A borderRadius can only be given for a uniform Border ，翻译过来就是 边界半径只能被指定为一个统一的边界 ，这是什么意思呢？

二：问题分析

根据报错信息查看源码，如下图所示
在这里插入图片描述
再查看定义 _colorIsUniform、_widthIsUniform、_styleIsUniform 的源码可知，当边框属性 border 和圆角属性 borderRadius 不统一时，会报上述错误信息，

通俗地说，就是你只设置了盒子一边的边框，但你同时也设置了其它边的圆角，就会出现这个问题。

反之，当你对盒子所有的边都设置边框时，随便设置任意一边的圆角都不会出现上述问题。

三：解决方案

既然无法对同一个盒子既只设置一边的边框，又设置某边的圆角，那就用组合组件的方式解决。

可以用 ClipRRect 组件嵌套在 Container 盒子外层，然后设置其 borderRadius 属性即可。

代码如下所示

return ClipRRect(
  borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20)),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white,
      border: Border(top: BorderSide(color: Colors.red, width: 1)),
    ),
    child: Text("取消", style: TextStyle(fontSize: 16, color: Color(0xFFFD785D))),
  ),
);

效果图如下

当然，还有其它的解决方案，比如再在当前 Container 外再嵌套一个 Container ，然后在 stack overflow 上也看到了一个通过 stack 方式来解决，感兴趣的可以点击此处了解。

至此，关于 Flutter 出现 A borderRadius can only be given for a uniform Border 问题的解决方案便介绍到这里。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语
Google 的 Flutter 越来越火，截止 2022年1月6日 GitHub 标星已达 134K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。