Question

我想要实现的是：我已经实现并坚持的是：我在容器内使用了inkwell小部件

代码：

Container(
                alignment: Alignment.center,
                child: InkWell(
                  child: new Container(
                    width: 120.0,
                    height: 120.0,
                    padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
                    decoration: new BoxDecoration(
                      shape: BoxShape.circle,// You can use like this way or like the below line
                      //                borderRadius: new BorderRadius.circular(30.0),
                      color: Colors.white,
                    ),
                    child: new Text("", style: new TextStyle(color: Colors.black, fontSize: 30.0, fontWeight: FontWeight.bold)),
                    alignment: Alignment.center,
                    // You can add a Icon instead of text also, like below.
                    //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
                  ),

请帮助。

Answer 1

也许您可以使用Alignment(x, y)和ClipPath：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Center(
        child: Container(
          color: Colors.grey,
          width: 200,
          height: 200,
          child: Stack(
            children: [
              Align(
                alignment: Alignment(-0.15, 0.3),
                child: buildCircle(Colors.purpleAccent),
              ),
              Align(
                alignment: Alignment(0.2, 0.3),
                child: buildCircle(Colors.blue),
              ),
              Align(
                alignment: Alignment(0.3, -0.1),
                child: buildCircle(Colors.red),
              ),
              Align(
                alignment: Alignment(0.0, -0.3),
                child: buildCircle(Colors.yellow),
              ),
              Align(
                alignment: Alignment(-0.3, -0.1),
                child: ClipPath(
                  // Clip the green circle.
                  clipper: Clipper(),
                  child: buildCircle(Colors.green),
                ),
              ),
              Align(
                child: buildCircle(Colors.white, width: 30, height: 30),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Container buildCircle(
    Color color, {
    double width = 50,
    double height = 50,
  }) {
    return Container(
      alignment: Alignment.center,
      width: width,
      height: height,
      child: InkWell(
        child: new Container(
          width: width,
          height: height,
          padding: const EdgeInsets.all(20.0),
          //I used some padding without fixed width and height
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            // You can use like this way or like the below line
            //                borderRadius: new BorderRadius.circular(30.0),
            color: color,
          ),
          child: new Text("",
              style: new TextStyle(
                  color: Colors.black,
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold)),
          alignment: Alignment.center,
          // You can add a Icon instead of text also, like below.
          //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
        ),
      ),
    );
  }
}

class Clipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path.combine(
      PathOperation.difference,
      Path()
        ..addOval(
          Rect.fromCircle(
            center: size.center(Offset(0, 0)),
            radius: 25.0,
          ),
        ),
      Path()
        ..addOval(
          Rect.fromCircle(
            center: size.center(Offset(10, 30)),
            radius: 25.0,
          ),
        ),
    );
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

Answer 2

您会注意到，实际上这是一个具有不同颜色的元素，它正在以360/5度的角度穿过圆弧

您可以使用

.30-30 Winchester
HRT3030A
In-Stock
158
--------------------------------------------------------------------------------
.30-06 Springfield
HRT3006C
In-Stock
16
--------------------------------------------------------------------------------
.308 Winchester
HRT308D
Out of Stock
0
--------------------------------------------------------------------------------
.300 AAC Blackout
HRT300BLK
Out of Stock
0
--------------------------------------------------------------------------------
.22-250 Remington
HRT22250A
In-Stock
192
--------------------------------------------------------------------------------
.223 Remington
HRT223B
Out of Stock
0
--------------------------------------------------------------------------------
.223 Remington
HRT223150
Out of Stock
32
--------------------------------------------------------------------------------

...and so on.

Path.combine(
          PathOperation.reverseDifference,

Answer 3

您可以使用FractionalTranslation：

Center(
  child: Container(
    height: 400,
    child: Stack(
      children: <Widget>[
        FractionalTranslation(
          translation: Offset(-0.22, -0.1),
          child: CircleContainer(color: Colors.green),
        ),
        FractionalTranslation(
          translation: Offset(-0.15, 0.2),
          child: CircleContainer(color: Colors.purple),
        ),
        FractionalTranslation(
          translation: Offset(0.15, 0.2),
          child: CircleContainer(color: Colors.blue),
        ),
        FractionalTranslation(
          translation: Offset(0.22, -0.1),
          child: CircleContainer(color: Colors.red),
        ),
        FractionalTranslation(
          translation: Offset(0, -0.25),
          child: CircleContainer(color: Colors.yellow),
        ),
        CircleContainer(color: Colors.white, size: 130),
      ],
    ),
  ),
)

Widget CircleContainer({Color color = Colors.white, double size = 160}) {
  return Container(
    alignment: Alignment.center,
    child: InkWell(
      child: new Container(
        width: size,
        height: size,
        padding: const EdgeInsets.all(
          20.0), //I used some padding without fixed width and height
        decoration: new BoxDecoration(
          shape: BoxShape
          .circle, // You can use like this way or like the below line
          //                borderRadius: new BorderRadius.circular(30.0),
          color: color,
        ),
        child: new Text("",
                        style: new TextStyle(
                          color: Colors.black,
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold)),
        alignment: Alignment.center,
// You can add a Icon instead of text also, like below.
//child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
      )));
}

结果：

无法在颤动中互相堆叠5个圆圈

3 个答案: