颤动的圆角矩形边框，每侧具有不同的颜色

问题描述

我正在尝试重新创建我用React Native制作的按钮，该按钮的每一侧都有不同的颜色，使其具有一种类似于凿子效果的效果，有点像Photoshop斜角和浮雕，但也带有圆角.目前，我在按钮外部有一个带有边框的容器，而在内部我正在使用 RawMaterialButton .容器的代码如下:

I'm trying to re-create a button I made with React Native that had different colours for each side giving it a kind of chiseled effect, a bit like Photoshop bevel and emboss, but also with rounded corners. At the moment I have a container outside the button which has the border on it, and inside I'm using RawMaterialButton. The code for the container is like this:

Container(
    BoxDecoration(
    border: Border(
    left: BorderSide(
    color: Colors.black,
    width: 1.0,
    ),
    top: BorderSide(
    color: Colors.black,
    width: 1.0,
     ),
    ),
   ),
  )

如何使此边框/容器的角变圆?

How can I make the corners for this border/container rounded?

像这样，但带有圆角:

推荐答案

这不是100％有效的解决方案.我刚刚编写了一些Path函数，以使用 CustomPainter 绘制所有侧面.

This is not a 100% working solution. I just wrote some Path functions to draw all the sides using CustomPainter.

圆角轮廓边框

class RoundedChiseledBorder extends StatelessWidget {
  final Widget child;

  final Color leftBorderColor;
  final Color rightBorderColor;
  final Color bottomBorderColor;
  final Color topBorderColor;

  final double borderRadius;
  final double borderWidth;

  RoundedChiseledBorder({
    @required this.child,
    this.borderRadius = 1,
    this.borderWidth = 2,
    this.bottomBorderColor = Colors.black,
    this.topBorderColor = Colors.black,
    this.rightBorderColor = Colors.black,
    this.leftBorderColor = Colors.black,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned.fill(
          child: CustomPaint(
            painter: RoundedBorderPainter(
              radius: borderRadius,
              strokeWidth: borderWidth,
              bottomBorderColor: bottomBorderColor,
              leftBorderColor: leftBorderColor,
              rightBorderColor: rightBorderColor,
              topBorderColor: topBorderColor,
            ),
          ),
        ),
        child,
      ],
    );
  }
}

RoundedBorderPainterBorder

import 'package:vector_math/vector_math.dart' as vm;

class RoundedBorderPainter extends CustomPainter {
  final Color leftBorderColor;
  final Color rightBorderColor;
  final Color bottomBorderColor;
  final Color topBorderColor;
  final double strokeWidth;
  final StrokeCap strokeCap = StrokeCap.round;
  double radius;

  Size size;

  RoundedBorderPainter({
    this.leftBorderColor = Colors.black,
    this.rightBorderColor = Colors.black,
    this.topBorderColor = Colors.black,
    this.bottomBorderColor = Colors.black,
    this.strokeWidth = 2,
    this.radius = 1,
  }) {
    if (radius <= 1) this.radius = 1;
  }

  @override
  void paint(Canvas canvas, Size size) {
    radius = size.shortestSide / 2 < radius ? size.shortestSide / 2 : radius;
    this.size = size;
    Paint topPaint = Paint()
      ..color = topBorderColor
      ..strokeWidth = strokeWidth
      ..strokeCap = strokeCap
      ..style = PaintingStyle.stroke;
    Paint rightPaint = Paint()
      ..color = rightBorderColor
      ..strokeCap = strokeCap
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;
    Paint bottomPaint = Paint()
      ..color = bottomBorderColor
      ..strokeCap = strokeCap
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;
    Paint leftPaint = Paint()
      ..strokeCap = strokeCap
      ..color = leftBorderColor
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    canvas.drawPath(getPath1(), topPaint);
    canvas.drawPath(getPath2(), rightPaint);
    canvas.drawPath(getPath3(), bottomPaint);
    canvas.drawPath(getPath4(), leftPaint);
  }

  Path getPath1() {
    return Path()
      ..addPath(getTopLeftPath2(), Offset(0, 0))
      ..addPath(getTopPath(), Offset(0, 0))
      ..addPath(getTopRightPath1(), Offset(0, 0));
  }

  Path getPath2() {
    return Path()
      ..addPath(getTopRightPath2(), Offset(0, 0))
      ..addPath(getRightPath(), Offset(0, 0))
      ..addPath(getBottomRightPath1(), Offset(0, 0));
  }

  Path getPath3() {
    return Path()
      ..addPath(getBottomRightPath2(), Offset(0, 0))
      ..addPath(getBottomPath(), Offset(0, 0))
      ..addPath(getBottomLeftPath1(), Offset(0, 0));
  }

  Path getPath4() {
    return Path()
      ..addPath(getBottomLeftPath2(), Offset(0, 0))
      ..addPath(getLeftPath(), Offset(0, 0))
      ..addPath(getTopLeftPath1(), Offset(0, 0));
  }

  Path getTopPath() {
    return Path()
      ..moveTo(0 + radius, 0)
      ..lineTo(size.width - radius, 0);
  }

  Path getRightPath() {
    return Path()
      ..moveTo(size.width, 0 + radius)
      ..lineTo(size.width, size.height - radius);
  }

  Path getBottomPath() {
    return Path()
      ..moveTo(size.width - radius, size.height)
      ..lineTo(0 + radius, size.height);
  }

  Path getLeftPath() {
    return Path()
      ..moveTo(0, size.height - radius)
      ..lineTo(0, 0 + radius);
  }

  Path getTopRightPath1() {
    return Path()
      ..addArc(
        Rect.fromLTWH(size.width - (radius * 2), 0, radius * 2, radius * 2),
        vm.radians(-45),
        vm.radians(-45),
      );
  }

  Path getTopRightPath2() {
    return Path()
      ..addArc(
        Rect.fromLTWH(size.width - (radius * 2), 0, radius * 2, radius * 2),
        vm.radians(0),
        vm.radians(-45),
      );
  }

  Path getBottomRightPath1() {
    return Path()
      ..addArc(
        Rect.fromLTWH(size.width - (radius * 2), size.height - (radius * 2), radius * 2, radius * 2),
        vm.radians(45),
        vm.radians(-45),
      );
  }

  Path getBottomRightPath2() {
    return Path()
      ..addArc(
        Rect.fromLTWH(size.width - (radius * 2), size.height - (radius * 2), radius * 2, radius * 2),
        vm.radians(90),
        vm.radians(-45),
      );
  }

  Path getBottomLeftPath1() {
    return Path()
      ..addArc(
        Rect.fromLTWH(0, size.height - (radius * 2), radius * 2, radius * 2),
        vm.radians(135),
        vm.radians(-45),
      );
  }

  Path getBottomLeftPath2() {
    return Path()
      ..addArc(
        Rect.fromLTWH(0, size.height - (radius * 2), radius * 2, radius * 2),
        vm.radians(180),
        vm.radians(-45),
      );
  }

  Path getTopLeftPath1() {
    return Path()
      ..addArc(
        Rect.fromLTWH(0, 0, radius * 2, radius * 2),
        vm.radians(225),
        vm.radians(-45),
      );
  }

  Path getTopLeftPath2() {
    return Path()
      ..addArc(
        Rect.fromLTWH(0, 0, radius * 2, radius * 2),
        vm.radians(270),
        vm.radians(-45),
      );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

用法

要使用它，只需致电

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RoundedChiseledBorder(
          borderRadius: 10,
          borderWidth: 4,
          bottomBorderColor: Colors.red,
          leftBorderColor: Colors.black,
          rightBorderColor: Colors.amber,
          topBorderColor: Colors.green,
          child: Container(
            height: 30,
            width: 300,
            alignment: Alignment.center,
            child: Text('Hello'),
          ),
        ),
      ),
    );
  }
}

这篇关于颤动的圆角矩形边框，每侧具有不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！