只能为统一边界指定borderRadius答案

【问题标题】：A borderRadius can only be given for uniform borders只能为统一边界指定borderRadius
【发布时间】：2020-03-07 19:32:56
【问题描述】：

我在使用以下代码时收到警告，但我的应用运行良好：

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during paint():
A borderRadius can only be given for uniform borders.
'package:flutter/src/painting/box_border.dart':
Failed assertion: line 510 pos 12: 'borderRadius == null'

这是我的代码：

           Container(
              height: screenSize.height*.13,
              width: AppSize.medium,
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border(
                  right: BorderSide(
                    width: 1.0,
                    color: Colors.blue
                  ),
                ),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(AppSize.small),
                  bottomRight: Radius.circular(AppSize.small),
                )
              ),
            )

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

这是我能想到的最简单的方法......你可以看到有 2 个容器，外部容器的颜色实际上是边框的颜色，内部容器的边距是边框的 strokeWidth 和内胆颜色为背景色。

Container(
  decoration: BoxDecoration(
    color: Colors.grey[400],

    borderRadius: BorderRadius.only(
      topLeft: const Radius.circular(15.0),
      topRight: const Radius.circular(15.0),
    ),// BorderRadius

  ),// BoxDecoration
  child: Container(
    margin: const EdgeInsetsDirectional.only(start: 2, end: 2, top: 2),
    decoration: BoxDecoration(
      color: Colors.grey[300],

      borderRadius: BorderRadius.only(
        topLeft: const Radius.circular(13.0),
        topRight: const Radius.circular(13.0),
      ),// BorderRadius

    ),// BoxDecoration
  ),// Container
),// Container

这是一个有点傻的答案，但有效！ ;)

【讨论】：

傻？！！这是天才！！！天知道我怎么也想不到这一点。谢谢你告诉我这是可能的
这太棒了！我在这里将这个逻辑提取到一个可重复使用的生产就绪小部件中：gist.github.com/rohan20/d12a709a27511304c853334dd636ba63 带有屏幕截图和 DartPad 演示 ?
如果背景不是单一颜色，这将不起作用。

【解决方案2】：

Container(
decoration: new BoxDecoration(
    gradient: new LinearGradient(
        stops: [0.02, 0.02],
        colors: [Colors.red, Colors.white]
    ),
borderRadius: new BorderRadius.all(const Radius.circular(6.0))))

【讨论】：

不错的解决方案！！
如果此解决方案应用于容器的 2 个或更多边，是否会提供圆角内边框？

【解决方案3】：

Flutter 抱怨是因为您只为容器应用了右边框，但也希望有一个边框半径。

在应用边框半径时，Flutter 期望边框是统一的，即一直使用相同的颜色。如果您跳转到引发断言错误的来源，您可以查看实际的断言。

【讨论】：

【解决方案4】：

Container(
      decoration: BoxDecoration(
        color: AppColors.white,
        borderRadius: BorderRadius.only(
          topRight:
              widget.currentJobIndex == 0 ? Radius.circular(7) : Radius.zero,
          topLeft:
              widget.currentJobIndex == 0 ? Radius.circular(7) : Radius.zero,
        ),
      ),
      child: Container(
        padding: EdgeInsets.only(top: 17, bottom: 20, left: 12, right: 12),
        decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: AppColors.greyE5))),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("This is the brief job description"),
            SizedBox(height: 10),
            Row(children: [
              Text(
                "Budget",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(":30,000"),
              Spacer(),
              Text(
                "Total Bids",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(":32",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).primaryColor))
            ]),
            SizedBox(height: 10),
            Row(children: [
              Text(
                "Status: Confirmed",
                style: TextStyle(color: Theme.of(context).primaryColor),
              ),
              Spacer(),
              Text(
                "Monday August 22, 2021",
                style: TextStyle(fontSize: responsiveSize(10, context)),
              ),
            ])
          ],
        ),
      ),
    )

我用了两个容器，外面的一个有边框半径，而里面的只有底部边框。这样 Flutter 就不再抱怨了

【讨论】：