Flutter中如何为Container的右上及左下边框单独着色？

嘿，我完全懂你的需求！想要只给Container的右上、左下边框上色，同时保留圆角和阴影，用默认的BoxDecoration确实没法直接做到，不过这里有两个可行的方案：

方案1：快速实现（小缺口可接受） #

如果可以接受圆角处的微小缺口，直接用Border构造函数单独设置对应边的样式就行，代码修改如下：

Container(
  child: Text("Your Text"),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10.0),
    // 单独设置右上（right）和左下（left）的边框
    border: Border(
      top: BorderSide.none, // 隐藏上边
      right: BorderSide(color: primaryColor, width: 2), // 右上边框
      bottom: BorderSide.none, // 隐藏下边
      left: BorderSide(color: primaryColor, width: 2), // 左下边框
    ),
  ),
  boxShadow: [
    BoxShadow(
      color: primaryColor.withOpacity(0.2),
      spreadRadius: 4,
      blurRadius: 7,
      offset: Offset(0, 3),
    ),
  ],
),

这个方法的缺点是：圆角处的边框会有小缺口，因为Border的边是直角的，和BorderRadius的圆角衔接不够完美。

方案2：完美圆角边框（用CustomPainter） #

如果想要圆角处的边框完全贴合，就需要自定义绘制了。我们可以写一个CustomPainter来绘制指定的两个圆角边框：

步骤1：创建自定义Painter类 #

class PartialBorderPainter extends CustomPainter {
  final Color borderColor;
  final double borderWidth;
  final double borderRadius;

  PartialBorderPainter({
    required this.borderColor,
    required this.borderWidth,
    required this.borderRadius,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = borderColor
      ..strokeWidth = borderWidth
      ..style = PaintingStyle.stroke;

    // 绘制右上圆角边框
    final topRightRect = Rect.fromLTWH(
      size.width - borderRadius * 2,
      0,
      borderRadius * 2,
      borderRadius * 2,
    );
    canvas.drawArc(topRightRect, -pi / 2, pi / 2, false, paint);
    canvas.drawLine(
      Offset(size.width, borderRadius),
      Offset(size.width, size.height - borderRadius),
      paint,
    );

    // 绘制左下圆角边框
    final bottomLeftRect = Rect.fromLTWH(
      0,
      size.height - borderRadius * 2,
      borderRadius * 2,
      borderRadius * 2,
    );
    canvas.drawArc(bottomLeftRect, pi / 2, pi / 2, false, paint);
    canvas.drawLine(
      Offset(borderRadius, size.height),
      Offset(size.width - borderRadius, size.height),
      paint,
    );
    canvas.drawLine(
      Offset(0, borderRadius),
      Offset(0, size.height - borderRadius),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

步骤2：在Container中使用 #

把CustomPaint作为Container的child，这样就能在原有内容上方绘制边框了：

Container(
  child: Stack(
    children: [
      Center(child: Text("Your Text")),
      CustomPaint(
        painter: PartialBorderPainter(
          borderColor: primaryColor,
          borderWidth: 2,
          borderRadius: 10.0,
        ),
      ),
    ],
  ),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10.0),
  ),
  boxShadow: [
    BoxShadow(
      color: primaryColor.withOpacity(0.2),
      spreadRadius: 4,
      blurRadius: 7,
      offset: Offset(0, 3),
    ),
  ],
),

这个方案可以完美实现你想要的效果，圆角处的边框会完全贴合Container的圆角。

你可以根据自己的需求选择其中一个方案，试试吧！

内容的提问来源于stack exchange，提问作者Ail Aljzar