【发布时间】：2021-04-17 17:38:12
【问题描述】：
我看到一些帖子与此问题类似，但它们不是我要找的。我想在 Flutter 中创建一个具有自定义形状的按钮。为此，我在 GestureDetector 小部件中使用了 CustomPaint 小部件。问题是我不希望不可见的区域可以点击。这正是 GestureDetector 发生的事情。换句话说，我只希望我创建的形状是可点击的。但现在我的自定义形状似乎有一个看不见的正方形，而且它也是可以点击的。我不想要那个。我在这篇文章中发现的最相似的问题：
Flutter - Custom button tap area
但是，就我而言，我处理的是自定义形状，而不是正方形或圆形。
让我与您分享一个可能的按钮的代码和示例图像。您可以将其复制并直接粘贴到您的主目录上。复制我的问题应该很容易。
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Shapes',
theme: ThemeData.dark(),
home: MyHomePage(title: 'Custom Shapes App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.white24,
body: Center(
child: GestureDetector(
child: CustomPaint(
size: Size(300,300), //You can Replace this with your desired WIDTH and HEIGHT
painter: RPSCustomPainter(),
),
onTap: (){
print("Working?");
},
),
),
);
}
}
class RPSCustomPainter extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.fill
..strokeWidth = 1;
paint_0.shader = ui.Gradient.linear(Offset(0,size.height*0.50),Offset(size.width,size.height*0.50),[Color(0xffffed08),Color(0xffffd800),Color(0xffff0000)],[0.00,0.34,1.00]);
Path path_0 = Path();
path_0.moveTo(0,size.height*0.50);
path_0.lineTo(size.width*0.33,size.height*0.33);
path_0.lineTo(size.width*0.50,0);
path_0.lineTo(size.width*0.67,size.height*0.33);
path_0.lineTo(size.width,size.height*0.50);
path_0.lineTo(size.width*0.67,size.height*0.67);
path_0.lineTo(size.width*0.50,size.height);
path_0.lineTo(size.width*0.33,size.height*0.67);
path_0.lineTo(0,size.height*0.50);
path_0.close();
canvas.drawPath(path_0, paint_0);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
我会尝试让星星是唯一可点击的东西，屏幕上没有其他不可见的地方。
提前致谢！
【问题讨论】：
-
您需要一个自定义的
ShapeBorder类，并将其传递给RaisedButton.shape
标签： flutter