Flutter - 自定义按钮点击区域 [英] Flutter - Custom button tap area

问题描述

我正在构建一个 Flutter 应用程序，其中大部分屏幕将被圆形按钮占据.

I'm building a Flutter application where a big portion of the screen will be occupied by a circular button.

我已经尝试了几种不同的方法来创建一个圆形按钮，但我总是遇到同样的问题:可点击"区域实际上不是圆形，而是矩形.

I already tried several different approaches in order to create a circular button, but I always end up having the same problem: the 'tappable' area is not actually circular, but rectangular.

这是一个使用 FloatingActionButton 获得的示例:

Here is an example obtained with a FloatingActionButton:

对于小尺寸按钮来说，这并不是一个真正的问题——我什至会说它在某种程度上很有帮助——但就我而言，这很烦人.

For small-sized buttons this is not really a problem - I would even say that it is somehow helpful - but in my case it is very annoying.

所以我的问题是:是否可以将可点击"区域限制为一个圆圈?

So my question is: is it possible to restrict the 'tappable' area to a circle?

提前致谢.

推荐答案

这似乎行得通，我不知道这样做是否正确，或者是否有更好的方法，但你去吧.

This seems to work, I don't know if it is right to do so or if there is a better way but here you go.

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.blue,
        child: Center(
          child: GestureDetector(
            onTap: () {
              print('clicky');
            },
            child: ClipOval(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这篇关于Flutter - 自定义按钮点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！