可扩展的浮动操作按钮（使用堆栈）在颤动中不起作用
Posted
技术标签:
【中文标题】可扩展的浮动操作按钮（使用堆栈）在颤动中不起作用【英文标题】：Expandable floating action button (using Stack) not working in flutter 【发布时间】：2021-08-05 12:50:42 【问题描述】：这是我的 dart 文件，我想在其中创建一个可扩展的浮动按钮，该按钮包含在 Stack 小部件中，并且当我尝试在 GestureDetector 小部件或我的CircularButton 自定义小部件没有任何错误，并且在按下图标时它不会打开相应的应用程序。我尝试更改 customLaunch 的返回类型，但也没有用。
感谢任何帮助。 谢谢，
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatefulWidget
@override
_HomePageState createState() => _HomePageState();
class _HomePageState extends State<HomePage> with TickerProviderStateMixin
void customLaunch(command) async
if (await canLaunch(command))
await launch(command);
else
print(' could not launch $command');
AnimationController animationController;
Animation degOneTranslationAnimation,
degTwoTranslationAnimation,
degThreeTranslationAnimation;
Animation rotationAnimation;
double getRadiansFromDegree(double degree)
double unitRadian = 57.295779513;
return degree / unitRadian;
@override
void initState()
animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 600));
degOneTranslationAnimation = TweenSequence(<TweenSequenceItem>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.2), weight: 75.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.2, end: 1.0), weight: 25.0),
]).animate(animationController);
degTwoTranslationAnimation = TweenSequence(<TweenSequenceItem>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.4), weight: 55.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.4, end: 1.0), weight: 45.0)
]).animate(animationController);
degThreeTranslationAnimation = TweenSequence(<TweenSequenceItem>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.75), weight: 35.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.75, end: 1.0), weight: 65.0)
]).animate(animationController);
rotationAnimation = Tween<double>(begin: 180.0, end: 0.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut));
super.initState();
animationController.addListener(()
setState(() );
);
@override
void dispose()
animationController.dispose();
super.dispose();
@override
Widget build(BuildContext context)
return DefaultTabController(
length: 5,
child: Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: Stack(
children: [
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: Container(
decoration: BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
width: 50,
height: 50,
child: IconButton(
icon: Icon(Icons.repeat, color: Colors.white),
enableFeedback: true,
onPressed: () => customLaunch('https:google.com')),
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(225),
degOneTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: Container(
decoration: BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
width: 50,
height: 50,
child: GestureDetector(
onTap: () => customLaunch('sms:546456464'),
child: IconButton(
icon: Icon(Icons.chat, color: Colors.white),
enableFeedback: true,
onPressed: () => ,
),
)),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(180),
degOneTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
onPressed: () => customLaunch('tel:+91 9478946545'),
color: Colors.black,
width: 50,
height: 50,
icon: Icon(
Icons.call,
color: Colors.white,
),
),
),
),
Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value)),
alignment: Alignment.center,
child: CircularButton(
color: Colors.black,
width: 60,
height: 60,
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: ()
if (animationController.isCompleted)
animationController.reverse();
else
animationController.forward();
,
),
),
],
),
class CircularButton extends StatelessWidget
final double width;
final double height;
final Color color;
final Icon icon;
final dynamic onPressed;
CircularButton(this.color, this.width, this.height, this.icon, this.onPressed);
@override
Widget build(BuildContext context)
return Container(
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
width: width,
height: height,
child: IconButton(icon: icon, enableFeedback: true, onPressed: onPressed),
);
我只想在扩展浮动按钮的点击上打开其他应用程序，但它没有打开，尽管代码中没有错误仍然无法正常工作。 它不仅需要 onpressed 参数或 onTap。
【问题讨论】：
您确定您的仅动画按钮不会遮挡其余用于手势检测的小部件吗？ @RandalSchwartz 所以如果它只有动画那么我怎么能让它也用动画检测手势 【参考方案1】：我只需要将这个 IgnorePointer 添加到堆栈中，以便它检测手势并忽略该特定区域的动画 我更改的代码是，
floatingActionButton: Stack(
children: <Widget>[
Positioned(
right: 30,
bottom: 30,
child: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
IgnorePointer( // this edit made it worked
child: Container(
color: Colors.transparent,
height: 150.0,
width: 150.0,
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
onClick: () => customLaunch('www.cigarettewala.com'),
color: Colors.black,
width: 50,
height: 50,
icon: Icon(
Icons.repeat,
color: Colors.white,
),
),
),
),
【讨论】：
以上是关于可扩展的浮动操作按钮（使用堆栈）在颤动中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
iCheck 复选框在颤动的 Android 网络视图中不起作用