dart 只能为统一边界指定borderRadius

uajslkp6  于 2023-07-31  发布在  其他
关注(0)|答案(8)|浏览(135)

我在使用以下代码时收到警告,但我的应用程序运行正常:

════════ 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),
                )
              ),
            )

1szpjjfi

1szpjjfi1#

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))))

字符串


的数据

ql3eal8s

ql3eal8s2#

这是我能想到的最简单的方法...你可以看到有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

字符串
这是一个有点傻的答案,但工作!;)

ejk8hzay

ejk8hzay3#

Flutter正在抱怨,因为您只对容器应用了右边框,但还希望有一个边框半径。
Flutter期望边界是均匀的,即应用边界半径时,所有的方式都是相同的颜色。如果您跳转到抛出Assert错误的源代码,您可以查看实际的Assert。

im9ewurl

im9ewurl4#

我一直在努力解决同样的错误,并找到了一个更简单的解决方案,比建议的替代方案要简单得多,即使用阴影而不是边框。
如果你想一想,一个1pt的边框在一边和一个没有模糊的阴影在那个方向偏移1pt是完全一样的。
您可以创建具有圆形边框的容器,并使用装饰添加阴影作为所需的边框。下面是一个模拟底部边框的示例:

Container(
  padding: EdgeInsets.symmetric(horizontal: 32.0, vertical: 16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(46),
    boxShadow: [
      BoxShadow(
        color: Color(0xFFEEEEEE),
        blurRadius: 0,
        offset: Offset(0, 1),
      ),
    ],
  ),
  child: ...
),

字符串
所有这一切都是为了:

的数据

krcsximq

krcsximq5#

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就不会再抱怨了

mv1qrgav

mv1qrgav6#

只需提供所有其他BorderSide(左,顶和底,因为您有一个用于右),并将宽度设置为零。

23c0lvtd

23c0lvtd7#

Flutter期望边界是均匀的,这意味着在应用边界半径时,所有的边界都是相同的颜色。
检查你的边框颜色,你是否适用于所有方面?

您可以应用不带半径的不同颜色,也可以使用具有不同半径的相同颜色

acruukt9

acruukt98#

这是唯一不是变通办法的解决方案。在ClipRect中使用边框将小部件包裹起来:

ClipRect(
    clipper: Customshape(),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(),
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
    ),
  ),

字符串
此CustomShape Clipper将剪切左侧的边框,这就是“偏移x”值为2的原因。如果你需要在右边剪裁它,那么将x设置为0并使用“size.width - 2”。

class CustomShape extends CustomClipper<Rect>{
  @override
  Rect getClip(Size size) => const Offset(2.0, 0) & Size(size.width, size.height);
  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) => true;
}

相关问题