首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在颤动中制作圆边按钮?

如何在颤动中制作圆边按钮?
EN

Stack Overflow用户
提问于 2021-10-21 21:58:06
回答 2查看 91关注 0票数 0

做一个圆角按钮很简单,但我想做一个边缘也是圆角的按钮。

也许我应该使用CustomPaint

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-10-22 02:43:06

SquircleBorder可能会对您有所帮助:

代码语言:javascript
运行
复制
Container(
            width: 56.0,
            height: 56.0,
            child: Material(
              color: Colors.blueGrey[400],
              shape: SquircleBorder(
                side: BorderSide(color: Colors.grey, width: 3.0),
              ),
              child: Icon(Icons.settings),
            ),
          ),

class SquircleBorder extends ShapeBorder {
  final BorderSide side;
  final double superRadius;

  const SquircleBorder({
    this.side: BorderSide.none,
    this.superRadius: 5.0,
  })
    : assert(side != null),
      assert(superRadius != null);

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(side.width);

  @override
  ShapeBorder scale(double t) {
    return new SquircleBorder(
      side: side.scale(t),
      superRadius: superRadius * t,
    );
  }

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return _squirclePath(rect.deflate(side.width), superRadius);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return _squirclePath(rect, superRadius);
  }

  static Path _squirclePath(Rect rect, double superRadius) {
    final c = rect.center;
    final dx = c.dx * (1.0 / superRadius);
    final dy = c.dy * (1.0 / superRadius);
    return new Path()
      ..moveTo(c.dx, 0.0)
      ..relativeCubicTo(c.dx - dx, 0.0, c.dx, dy, c.dx, c.dy)
      ..relativeCubicTo(0.0, c.dy - dy, -dx, c.dy, -c.dx, c.dy)
      ..relativeCubicTo(-(c.dx - dx), 0.0, -c.dx, -dy, -c.dx, -c.dy)
      ..relativeCubicTo(0.0, -(c.dy - dy), dx, -c.dy, c.dx, -c.dy)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
    switch (side.style) {
      case BorderStyle.none:
        break;
      case BorderStyle.solid:
        var path = getOuterPath(rect.deflate(side.width / 2.0), textDirection: textDirection);
        canvas.drawPath(path, side.toPaint());
    }
  }
}
票数 2
EN

Stack Overflow用户

发布于 2021-10-22 00:51:11

使用ContinuousRectangleBorder形状:

代码语言:javascript
运行
复制
ElevatedButton(
      style: ElevatedButton.styleFrom(
        shape: ContinuousRectangleBorder(
          side: BorderSide.none,
          borderRadius: BorderRadius.all(Radius.circular(18)),
        ),
      ),
      onPressed: () {},
      child: Text('Click'),
    );

这种形状被称为蠕动。请参阅:https://en.wikipedia.org/wiki/Squircle

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69669212

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档