flutter - 如何在 Flutter 中绘制被圆圈切割的按钮

Question

我想在 Flutter 上做以下小部件：

如您所见，这非常困难。一个想法是将 .png 用于被圆圈切割的按钮，但我认为这在高分辨率上看起来不太好。

目前，我的想法是使用 aStack这样我就可以将按钮放置在需要的位置。然后我可以在中心放置一个空白圆圈以擦除按钮。然而这仍然不好，因为那时小部件只能放置在空白背景的地方。

我应该坚持这种Stack方法吗？

我从这样的事情开始：

    Container(
            width: 200,
            height: 150,
            child: Stack(children: <Widget>[
              Column(
                children: [
                  Row(
                    children: [
                      FractionallySizedBox(
                          widthFactor: 0.5,
                          heightFactor: 0.5,
                          child: Container(
                            decoration: BoxDecoration(
                              color: Color(0xFFA93EF0),
                              shape: BoxShape.rectangle,
                            ),
                          )),
                      FractionallySizedBox(
                          widthFactor: 0.5,
                          heightFactor: 0.5,
                          child: Container(
                            decoration: BoxDecoration(
                              color: Color(0xFFA93EF0),
                              shape: BoxShape.rectangle,
                            ),
                          ))
                    ],
                  ),
                  Row(
                    children: [
                      FractionallySizedBox(
                          widthFactor: 0.5,
                          heightFactor: 0.5,
                          child: Container(
                            decoration: BoxDecoration(
                              color: Color(0xFFA93EF0),
                              shape: BoxShape.rectangle,
                            ),
                          )),
                      FractionallySizedBox(
                          widthFactor: 0.5,
                          heightFactor: 0.5,
                          child: Container(
                            decoration: BoxDecoration(
                              color: Color(0xFFA93EF0),
                              shape: BoxShape.rectangle,
                            ),
                          ))
                    ],
                  )
                ],
              )
            ]))

但我明白了

BoxConstraints forces an infinite width and infinite height.

我不知道为什么，因为我把东西放在一个Container固定大小的东西里（这也是不希望的）。

更新：

我尝试了下面的答案，但它需要一个彩色圆圈。

是否可以通过其他方法绘制？

标签： flutterdart

Answer 1

在这种情况下使用 Stack 小部件并不是一个坏主意，只要记住给它一个高度以防止列内出现一些问题。这是一个如何创建它的示例：

//A model of the button to save some lines of code
Widget button(
    {VoidCallback onPressed, double buttonWidth, String buttonText}) {
  return Container(
    width: buttonWidth,
    padding: const EdgeInsets.all(5.0),
    height: 80,
    child: RaisedButton(
      color: Colors.purpleAccent[200],
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0),
      ),
      onPressed: onPressed,
      child: Text(buttonText),
    ),
  );
}

@override
Widget build(BuildContext context) {
  double buttonWidth = MediaQuery.of(context).size.width * 0.5; //getting half of the current width for each button

  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          height: 160,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Column(
                children: [

                  //two rows, each one with 2 buttons

                  Row(
                    children: [
                      button(
                        onPressed: () {},
                        buttonWidth: buttonWidth,
                        buttonText: 'button1',
                      ),
                      button(
                        onPressed: () {},
                        buttonWidth: buttonWidth,
                        buttonText: 'button2',
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      button(
                        onPressed: () {},
                        buttonWidth: buttonWidth,
                        buttonText: 'button3',
                      ),
                      button(
                        onPressed: () {},
                        buttonWidth: buttonWidth,
                        buttonText: 'button4',
                      ),
                    ],
                  ),
                ],
              ),
              Container(    //a container to give a white space around the inner widget
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
                child: Align(
                  child: SizedBox(
                    width: 100,
                    height: 100,
                    child: RaisedButton(
                      color: Colors.red,       //the main button
                      shape: CircleBorder(),
                      onPressed: () {},
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

结果：