flutter 不使用不同颜色的边框进行编译

Question

我正在开始使用 flutter，想要创建一个小部件，根据条件，每侧都有不同颜色的边框。

\n\n

decoration: new BoxDecoration(\n border: new Border(\n  top: new BorderSide(width: 1.0, color: Colors.red),\n  left: new BorderSide(width: 1.0, color: Colors.red),\n  right: new BorderSide(width: 1.0, color: Colors.red),\n  bottom: new BorderSide(width: 1.0, color: Colors.white)\n ),\n borderRadius: new BorderRadius.only(\n  topLeft: new Radius.circular(15.0)\n ),\n),\n

\n\n

每当我尝试在边界上使用多种颜色时，我不确定为什么，但如果它们都是一种颜色，效果就很好。

\n\n

我在热重载时收到以下错误：

\n\n

\nI/flutter ( 1274): The following RenderObject was being processed when the exception was fired: RenderDecoratedBox#746f5 relayoutBoundary=up5:\nI/flutter ( 1274):   creator: DecoratedBox \xe2\x86\x90 Container \xe2\x86\x90 Row \xe2\x86\x90 Column \xe2\x86\x90 Container \xe2\x86\x90 Column \xe2\x86\x90 Center \xe2\x86\x90 MediaQuery \xe2\x86\x90\nI/flutter ( 1274):     LayoutId-[<_ScaffoldSlot.body>] \xe2\x86\x90 CustomMultiChildLayout \xe2\x86\x90 AnimatedBuilder \xe2\x86\x90 DefaultTextStyle \xe2\x86\x90 \xe2\x8b\xaf\nI/flutter ( 1274):   parentData: offset=Offset(140.2, 0.0); flex=null; fit=null (can use size)\nI/flutter ( 1274):   constraints: BoxConstraints(unconstrained)\nI/flutter ( 1274):   size: Size(57.0, 38.0)\nI/flutter ( 1274):   decoration: BoxDecoration:\nI/flutter ( 1274):     border: Border(top: BorderSide(MaterialColor(primary value: Color(0xfff44336)), 1.0,\nI/flutter ( 1274):       BorderStyle.solid), right: BorderSide(MaterialColor(primary value: Color(0xff4caf50)), 1.0,\nI/flutter ( 1274):       BorderStyle.solid), bottom: BorderSide(MaterialColor(primary value: Color(0xff4caf50)), 1.0,\nI/flutter ( 1274):       BorderStyle.solid), left: BorderSide(MaterialColor(primary value: Color(0xfff44336)), 1.0,\nI/flutter ( 1274):       BorderStyle.solid))\nI/flutter ( 1274):     borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0))\nI/flutter ( 1274):   configuration: ImageConfiguration(bundle: PlatformAssetBundle#bb4b7(), devicePixelRatio: 2.6,\nI/flutter ( 1274):     locale: en_US, textDirection: TextDirection.ltr, platform: android)\nI/flutter ( 1274): This RenderObject had the following descendants (showing up to depth 5):\nI/flutter ( 1274):     child: RenderPadding#f05f1 relayoutBoundary=up6 NEEDS-PAINT\nI/flutter ( 1274):       child: RenderParagraph#4842a relayoutBoundary=up7 NEEDS-PAINT\nI/flutter ( 1274):         text: TextSpan\n\n

\n\n

感谢您提前提供的任何帮助

\n

Answer 1

这会给你带来以下错误：

The following assertion was thrown during paint():
I/flutter (19471): A borderRadius can only be given for uniform borders.

因此，如果您想要不同的边框颜色，最好使用材质：

Material(
          child: Container(),
          shape: Border(
            right: BorderSide(
              width: 1,
              color: Colors.red,
            ),
            left: BorderSide(
              width: 1,
              color: Colors.green,
            ),
            bottom: BorderSide(
              width: 1,
              color: Colors.blue,
            ),
            top: BorderSide(
              width: 1,
              color: Colors.yellow,
            ),
          ),
        ),