Flutter Circle Menu onPressed Action

Question

我是 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,
        ).animate(
          CurvedAnimation(parent: controller, 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,
                    color: Color(0xFF29B6F6), icon: FontAwesomeIcons.clipboard),
                _buildButton(120,
                    color: Color(0xFF29B6F6), icon: FontAwesomeIcons.chartBar),
                _buildButton(180,
                    color: Color(0xFF29B6F6), icon: FontAwesomeIcons.book),
                _buildButton(240,
                    color: Color(0xFF29B6F6),
                    icon: FontAwesomeIcons.arrowsAltV),
                _buildButton(300,
                    color: Color(0xFF29B6F6), icon: FontAwesomeIcons.phoneAlt),
                _buildButton(360,
                    color: Color(0xFF29B6F6),
                    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,
                      backgroundColor: Color(0xFF29B6F6)),
                ),
              ]));
        });
  }

  _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();
  }
}

Answer 1

在您的 _buildButton 中，您可以像这样进行操作回调

_buildButton(double angle, Function callback, {Color color, IconData icon}) {
    // ...
}

然后通过构建一个按钮，您可以传递 _open 或 _close

Flutter Circle Menu onPressed Action

Flutter Circle Menu onPressed Action

menu

flutter