颤振设计曲线布局 [英] flutter design Curves layout

问题描述

在抖动中，我知道我们可以在屏幕截图下方绘制线条以设计弧形布局

in flutter i know that we can draw line to design arc layout such as this below screen shot

但是我只是在flutter上学习了此功能，我无法设计它，也许在flutter中，我们已经有了一些实现的库或源代码，但是我找不到并设计了它

but i just learn this feature on flutter and i can't design that, maybe in flutter we have some implemented library or source code like with that, but i can't find and design that

请注意，屏幕右侧和曲线之间的空白可以在高度和宽度上调整大小，并且使用customPaint而不是clipping widget

note that, white space between right of screen and curve is resizable on height and width and using customPaint not clipping widget

推荐答案

这里是有效的示例. 也许您需要任何其他功能-我想您可以实现它. 无论如何，CustomPainter都可以正常工作，并且在拖动按钮时可以更改窗口小部件:

Here is working example. Maybe you want any additional functionality - I think you can implement it. Anyway, CustomPainter works fine and widget changes when you drag button:

import 'dart:math' as math;

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  double _height = 0.0;
  double _width = 0.0;
  final double _minPadding = 24.0;
  double _rightPadding = 24.0;
  double _btnSize = 48.0;
  double _btnY = 0.0;
  double _currentX = 0.0;
  double _currentY = 0.0;

  @override
  Widget build(BuildContext context) {
    if (_height == 0.0)
      setState(() {
        _height = MediaQuery.of(context).size.height;
        _width = MediaQuery.of(context).size.width;
        _btnY = _height / 3 * 2;
      });
    return _height == 0.0
        ? Container()
        : Stack(
            children: <Widget>[
              Container(
                color: Colors.white,
              ),
              CustomPaint(
                size: Size(_width - _rightPadding, _height),
                painter: CurvedPainter(_btnSize, _btnY),
              ),
              Positioned(
                top: _btnY - _btnSize / 2,
                right: _rightPadding  - _minPadding / 2,
                child: GestureDetector(
                  onPanDown: (details) {
                    _currentX = details.globalPosition.dx;
                    _currentY = details.globalPosition.dy;
                  },
                  onPanStart: (details) {
                    _onDrag(details.globalPosition.dx, details.globalPosition.dy);
                  },
                  onPanUpdate: (details) {
                    _onDrag(details.globalPosition.dx, details.globalPosition.dy);
                  },
                  child: Material(
                    type: MaterialType.circle,
                    color: Colors.white,
                    elevation: 8.0,
                    child: Container(
                      width: _btnSize,
                      height: _btnSize,
                      child: IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () {},
                        iconSize: _btnSize / 3,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          );
  }

  _onDrag(double x, double y) {
    double dx = _currentX - x;
    double dy = _currentY - y;
    _currentX = x;
    _currentY = y;
    setState(() {
      _rightPadding = _rightPadding + dx;
      _rightPadding = math.max(_rightPadding, _minPadding);
      _rightPadding = math.min(_rightPadding, _width - _btnSize);
      _btnY = _btnY - dy;
      _btnY = math.max(_btnY, _btnSize);
      _btnY = math.min(_btnY, _height - _btnSize);
    });
  }
}

class CurvedPainter extends CustomPainter {
  CurvedPainter(this.btnSize, this.btnY);

  final double btnSize;
  final double btnY;

  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
    path.moveTo(0.0, 0.0);
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, btnY - btnSize * 2);

    path.cubicTo(size.width, btnY - btnSize * 0.3,
        size.width - btnSize * 0.95, btnY - btnSize * 0.9,
        size.width - btnSize, btnY);
    path.cubicTo(size.width - btnSize * 0.95, btnY + btnSize * 0.9,
        size.width, btnY + btnSize * 0.3,
        size.width, btnY + btnSize * 2);

    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.lineTo(0.0, 0.0);
    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.green
          ..style = PaintingStyle.fill);
  }

  @override
  bool shouldRepaint(CurvedPainter oldDelegate) =>
    oldDelegate.btnY != btnY;
}

(所有系数都是经验性的)

(all the coefficients were found empiric way)

这篇关于颤振设计曲线布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！