dart 只能为统一边界指定borderRadius

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

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

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

字符串
下面是我的代码:

  1. Container(
  2. height: screenSize.height*.13,
  3. width: AppSize.medium,
  4. decoration: BoxDecoration(
  5. color: Colors.red,
  6. border: Border(
  7. right: BorderSide(
  8. width: 1.0,
  9. color: Colors.blue
  10. ),
  11. ),
  12. borderRadius: BorderRadius.only(
  13. topRight: Radius.circular(AppSize.small),
  14. bottomRight: Radius.circular(AppSize.small),
  15. )
  16. ),
  17. )

1szpjjfi

1szpjjfi1#

  1. Container(
  2. decoration: new BoxDecoration(
  3. gradient: new LinearGradient(
  4. stops: [0.02, 0.02],
  5. colors: [Colors.red, Colors.white]
  6. ),
  7. borderRadius: new BorderRadius.all(const Radius.circular(6.0))))

字符串


的数据

ql3eal8s

ql3eal8s2#

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

  1. Container(
  2. decoration: BoxDecoration(
  3. color: Colors.grey[400],
  4. borderRadius: BorderRadius.only(
  5. topLeft: const Radius.circular(15.0),
  6. topRight: const Radius.circular(15.0),
  7. ),// BorderRadius
  8. ),// BoxDecoration
  9. child: Container(
  10. margin: const EdgeInsetsDirectional.only(start: 2, end: 2, top: 2),
  11. decoration: BoxDecoration(
  12. color: Colors.grey[300],
  13. borderRadius: BorderRadius.only(
  14. topLeft: const Radius.circular(13.0),
  15. topRight: const Radius.circular(13.0),
  16. ),// BorderRadius
  17. ),// BoxDecoration
  18. ),// Container
  19. ),// Container

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

展开查看全部
ejk8hzay

ejk8hzay3#

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

im9ewurl

im9ewurl4#

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

  1. Container(
  2. padding: EdgeInsets.symmetric(horizontal: 32.0, vertical: 16),
  3. decoration: BoxDecoration(
  4. color: Colors.white,
  5. borderRadius: BorderRadius.circular(46),
  6. boxShadow: [
  7. BoxShadow(
  8. color: Color(0xFFEEEEEE),
  9. blurRadius: 0,
  10. offset: Offset(0, 1),
  11. ),
  12. ],
  13. ),
  14. child: ...
  15. ),

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

的数据

展开查看全部
krcsximq

krcsximq5#

  1. Container(
  2. decoration: BoxDecoration(
  3. color: AppColors.white,
  4. borderRadius: BorderRadius.only(
  5. topRight:
  6. widget.currentJobIndex == 0 ? Radius.circular(7) : Radius.zero,
  7. topLeft:
  8. widget.currentJobIndex == 0 ? Radius.circular(7) : Radius.zero,
  9. ),
  10. ),
  11. child: Container(
  12. padding: EdgeInsets.only(top: 17, bottom: 20, left: 12, right: 12),
  13. decoration: BoxDecoration(
  14. border: Border(bottom: BorderSide(color: AppColors.greyE5))),
  15. child: Column(
  16. crossAxisAlignment: CrossAxisAlignment.start,
  17. children: [
  18. Text("This is the brief job description"),
  19. SizedBox(height: 10),
  20. Row(children: [
  21. Text(
  22. "Budget",
  23. style: TextStyle(fontWeight: FontWeight.bold),
  24. ),
  25. Text(":30,000"),
  26. Spacer(),
  27. Text(
  28. "Total Bids",
  29. style: TextStyle(fontWeight: FontWeight.bold),
  30. ),
  31. Text(":32",
  32. style: TextStyle(
  33. fontWeight: FontWeight.bold,
  34. color: Theme.of(context).primaryColor))
  35. ]),
  36. SizedBox(height: 10),
  37. Row(children: [
  38. Text(
  39. "Status: Confirmed",
  40. style: TextStyle(color: Theme.of(context).primaryColor),
  41. ),
  42. Spacer(),
  43. Text(
  44. "Monday August 22, 2021",
  45. style: TextStyle(fontSize: responsiveSize(10, context)),
  46. ),
  47. ])
  48. ],
  49. ),
  50. ),
  51. )

字符串
我用了两个容器,外面的有边界半径,而里面的只有底部边界。这样Flutter就不会再抱怨了

展开查看全部
mv1qrgav

mv1qrgav6#

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

23c0lvtd

23c0lvtd7#

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

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

acruukt9

acruukt98#

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

  1. ClipRect(
  2. clipper: Customshape(),
  3. child: Container(
  4. decoration: BoxDecoration(
  5. border: Border.all(),
  6. borderRadius: BorderRadius.all(Radius.circular(5)),
  7. ),
  8. ),
  9. ),

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

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

展开查看全部

相关问题