dart - flutter 绘制弧布局

任何人都可以引导我朝正确的方向构建类似于下图的内容

最佳答案

感谢@pskink的帮助

class ButtonData {
  String text;
  Rect rect;
  double leftRadius;
  double rightRadius;

  ButtonData(this.text, this.rect, this.leftRadius, this.rightRadius);
}

Widget buildStack() {
  return LayoutBuilder(builder: (ctx, constraints) {
    var fs = applyBoxFit(BoxFit.contain, Size(32.0, 32.0), constraints.biggest);
    double scale = fs.destination.width / fs.source.width;
    print("sclae $scale");
    List<Widget> children = [
      SvgPicture.asset(
        "assets/drawing.svg",
        width: fs.destination.width,
        height: fs.destination.height,
      )
    ];
    var buttons = [
      ButtonData("button 1", Rect.fromLTWH(9.75, 4.75, 14.5, 4.5), 0, 1),
      ButtonData("button 2", Rect.fromLTWH(7.25, 10.75, 14.5, 4.5), 1, 0),
      ButtonData("button 3", Rect.fromLTWH(9.75, 16.75, 14.5, 4.5), 0, 1),
      ButtonData("button 4", Rect.fromLTWH(7.25, 22.75, 14.5, 4.5), 1, 0),
    ];
    children += buttons.map((buttonData) {
      return Positioned(
        left: buttonData.rect.left * scale,
        top: buttonData.rect.top * scale,
        width: buttonData.rect.width * scale,
        height: buttonData.rect.height * scale,
        child: OutlineButton(
          highlightColor: Colors.deepOrange,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.horizontal(
              left: Radius.circular(4.5 * scale * buttonData.leftRadius),
              right: Radius.circular(4.5 * scale * buttonData.rightRadius),
            ),
          ),
          onPressed: () {
            print("onPressed ${buttonData.text}");
          },
          child: Text(
            buttonData.text,
            textScaleFactor: 0.225 * scale,
          ),
        ),
      );
    }).toList();

    return Stack(children: children);
  });
}

/*
assets/drawing.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="32"
   height="32"
   id="svg3352"
   version="1.1"
   inkscape:version="0.91 r"
   viewBox="0 0 32 32"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs3354" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="16.75"
     inkscape:cx="16"
     inkscape:cy="16"
     inkscape:current-layer="layer1"
     showgrid="true"
     inkscape:grid-bbox="true"
     inkscape:document-units="px"
     objecttolerance="10000"
     guidetolerance="10000"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:window-width="1366"
     inkscape:window-height="717"
     inkscape:window-x="0"
     inkscape:window-y="25"
     inkscape:window-maximized="1">
    <inkscape:grid
       type="xygrid"
       id="grid3360" />
  </sodipodi:namedview>
  <metadata
     id="metadata3357">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer">
    <path
       id="path4184"
       style="fill:none;fill-rule:evenodd;stroke:#000075;stroke-width:1.0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 6,4 5,0 0,0 11,0.034947 c 1.637555,2e-7 2.965056,1.3275011 2.965056,2.9650564 0,1.6375553 -1.327501,2.9650563 -2.965056,2.9650565 L 9.4650564,10.034947 c -1.6375557,0 -2.9650567,1.327501 -2.9650564,2.965057 2e-7,1.637555 1.3275011,2.965056 2.9650563,2.965056 L 22,16.034947 c 1.637556,0 2.965056,1.327501 2.965056,2.965057 0,1.637555 -1.327501,2.965056 -2.965056,2.965056 L 9.4650564,22.03495 c -1.6375557,0 -2.9650567,1.327501 -2.9650564,2.965057 2e-7,1.637555 1.3275011,2.965056 2.9650563,2.965056 L 20,28 l 5,0 0,0"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccsccsccsccscccc" />
  </g>
</svg>

 */

关于dart - flutter 绘制弧布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53127397/