如何解决Flutter Circle Menu onPressed Action
我是 Flutter 的初学者,我用 Flutter 创建了一个圆形菜单,里面有 6 个按钮,我想根据点击的按钮转到不同的页面。我知道如何导航到另一个页面,但问题是我只能使用 1 个操作(“关闭操作”)。也许我可以在 onPressed 的 _buildbutton 上提出一个论点?
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:vector_math/vector_math.dart' show radians;
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xFFB3E5FC),body: SizedBox.expand(child: RadialMenu())),);
}
}
class RadialMenu extends StatefulWidget {
createState() => _RadialMenuState();
}
class _RadialMenuState extends State<RadialMenu>
with SingleTickerProviderStateMixin {
AnimationController controller;
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 900),vsync: this);
}
Widget build(BuildContext context) {
return RadialAnimation(controller: controller);
}
}
class RadialAnimation extends StatelessWidget {
RadialAnimation({Key key,this.controller})
: scale = Tween<double>(
begin: 1.5,end: 0.0,).animate(
CurvedAnimation(parent: controller,curve: Curves.fastOutSlowIn),),translation = Tween<double>(
begin: 0.0,end: 100.0,curve: Curves.linear),rotation = Tween<double>(begin: 0.0,end: 360.0).animate(
CurvedAnimation(
parent: controller,curve: Interval(
0.0,0.7,curve: Curves.decelerate,)),super(key: key);
final AnimationController controller;
final Animation<double> scale;
final Animation<double> translation;
final Animation<double> rotation;
build(context) {
return AnimatedBuilder(
animation: controller,builder: (context,builder) {
return Transform.rotate(
angle: radians(rotation.value),child: Stack(alignment: Alignment.center,children: [
_buildButton(0,color: Color(0xFF29B6F6),icon: FontAwesomeIcons.chartBar),_buildButton(60,icon: FontAwesomeIcons.clipboard),_buildButton(120,_buildButton(180,icon: FontAwesomeIcons.book),_buildButton(240,icon: FontAwesomeIcons.arrowsAltV),_buildButton(300,icon: FontAwesomeIcons.phoneAlt),_buildButton(360,icon: FontAwesomeIcons.compressAlt),Transform.scale(
scale: scale.value - 1.5,child: FloatingActionButton(
child: Icon(FontAwesomeIcons.timesCircle),onPressed: _close,backgroundColor: Color(0xFF29B6F6)),Transform.scale(
scale: scale.value,child: FloatingActionButton(
child: Icon(FontAwesomeIcons.solidDotCircle),onPressed: _open,]));
});
}
_buildButton(double angle,{Color color,IconData icon}) {
final double rad = radians(angle);
return Transform(
transform: Matrix4.identity()
..translate(
(translation.value) * cos(rad),(translation.value) * sin(rad)),child: FloatingActionButton(
child: Icon(icon),backgroundColor: color,onPressed: _close));
}
_open() {
controller.forward();
}
_close() {
controller.reverse();
}
}
解决方法
在您的 _buildButton
中,您可以执行这样的操作回调
_buildButton(double angle,Function callback,{Color color,IconData icon}) {
// ...
}
然后通过构建按钮,您可以传递 _open
或 _close
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。