我正在制作自己的自定义浮动操作按钮
import 'package:flutter/material.dart';
import '../routes.dart';
import 'circularbutton.dart';
class WidgetFABMarket extends StatefulWidget {
const WidgetFABMarket({Key? key}) : super(key: key);
@override
_WidgetFABMarketState createState() => _WidgetFABMarketState();
}
class _WidgetFABMarketState extends State with SingleTickerProviderStateMixin {
late AnimationController animationController;
late Animation degOneTranslationAnimation,
degTwoTranslationAnimation,
degThreeTranslationAnimation;
late Animation rotationAnimation;
double getRadiansFromDegree(double degree) {
double unitRadian = 57.295779513;
return degree / unitRadian;
}
@override
void initState() {
animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 250));
degOneTranslationAnimation = TweenSequence([
TweenSequenceItem(tween: Tween(begin: 0.0, end: 1.2), weight: 75.0),
TweenSequenceItem(tween: Tween(begin: 1.2, end: 1.0), weight: 25.0),
]).animate(animationController);
degTwoTranslationAnimation = TweenSequence([
TweenSequenceItem(tween: Tween(begin: 0.0, end: 1.4), weight: 55.0),
TweenSequenceItem(tween: Tween(begin: 1.4, end: 1.0), weight: 45.0)
]).animate(animationController);
degThreeTranslationAnimation = TweenSequence([
TweenSequenceItem(tween: Tween(begin: 0.0, end: 1.75), weight: 35.0),
TweenSequenceItem(tween: Tween(begin: 1.75, end: 1.0), weight: 65.0)
]).animate(animationController);
rotationAnimation = Tween(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) {
//Size size = MediaQuery.of(context).size;
return Stack(
children: [
Positioned(
right: 10,
bottom: 10,
child: Stack(
alignment: Alignment.center,
children: [
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 75),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 50,
height: 50,
icon: Icon(
Icons.storefront,
color: Colors.white,
),
onClick: () {
Navigator.of(context)
.pushNamed(RouteGenerator.marketPage);
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 150),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 50,
height: 50,
icon: Icon(
Icons.phone_android,
color: Colors.white,
),
onClick: () {
Navigator.of(context)
.pushNamed(RouteGenerator.myShopPage);
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 225),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 50,
height: 50,
icon: Icon(
Icons.bookmarks_outlined,
color: Colors.white,
),
onClick: () {
Navigator.of(context)
.pushNamed(RouteGenerator.bookmarkPage);
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 300),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 50,
height: 50,
icon: Icon(
Icons.manage_search,
color: Colors.white,
),
onClick: () {
Navigator.of(context)
.pushNamed(RouteGenerator.searchPage);
},
),
),
),
Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value)),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 60,
height: 60,
icon: Icon(
Icons.menu,
color: Colors.white,
),
onClick: () {
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 VoidCallback onClick;
CircularButton(
{Key? key,
required this.color,
required this.width,
required this.height,
required this.icon,
required this.onClick})
: super(key: key);
@override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: Colors.red,
shape: CircleBorder(),
),
width: width,
height: height,
child:
IconButton(icon: icon, enableFeedback: true, onPressed: onClick),
)));
}
}
主浮动操作按钮 (FAB) 是可点击的，并且会触发 4 个较小的 FAB 的扩展。当我单击任何小 FAB 时，什么都没有发生，导航调用没有被触发......
主 FAB 的 onCLick 调用，animationController 的 if 语句，正常触发。
对较小 FAB 的 onCLick 调用 Navigator.of(context).pushNamed(RouteGenerator.myShopPage) 不会触发。
作为记录，导航是通过使用完全相同的调用 .pushNamed(RouteGenerator.myShopPage) 设置并在应用程序的其他部分中工作的。也设置了我的小型 FAB 的页面、目的地。
我有点失落。我认为问题来自 CustomButton 小部件中的回调类型，但无法弄清楚。
是回调输入问题还是完全不同的问题？
编辑：我正在添加路线页面
import 'package:flutter/material.dart';
import 'routes/common/helppage.dart';
import 'routes/common/homepage.dart';
import 'routes/common/loginpage.dart';
import 'routes/common/settingspage.dart';
import 'routes/market/bookmark.dart';
import 'routes/market/bookmarkmap.dart';
import 'routes/market/market.dart';
import 'routes/market/resultsdetails.dart';
import 'routes/market/resultsdetailsmap.dart';
import 'routes/market/resultspage.dart';
import 'routes/market/searchpage.dart';
import 'routes/myshop/myshoppage.dart';
import 'routes/myshop/postsalepage.dart';
import 'routes/myshop/saledetailspage.dart';
import 'routes/myshop/updatesalepage.dart';
class RouteGenerator {
const RouteGenerator._();
static Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case loginPage:
return MaterialPageRoute<LoginPage>(
builder: (_) => const LoginPage(title:"Login"),
);
case homePage:
return MaterialPageRoute<HomePage>(
builder: (_) => const HomePage(title:"Home"),
);
case helpPage:
return MaterialPageRoute<HelpPage>(
builder: (_) => const HelpPage(title:"Help"),
);
case settingsPage:
return MaterialPageRoute<SettingsPage>(
builder: (_) => const SettingsPage(title:"Settings"),
);
case marketPage:
return MaterialPageRoute<MarketPage>(
builder: (_) => const MarketPage(title:"Market"),
);
case searchPage:
return MaterialPageRoute<SearchPage>(
builder: (_) => const SearchPage(title:"Search"),
);
case resultsPage:
return MaterialPageRoute<ResultsPage>(
builder: (_) => const ResultsPage(title:"Search results"),
);
case resultsDetailsPage:
return MaterialPageRoute<ResultsDetailsPage>(
builder: (_) => const ResultsDetailsPage(title:"Details"),
);
case resultsDetailsMapPage:
return MaterialPageRoute<ResultsDetailsMapPage>(
builder: (_) => const ResultsDetailsMapPage(title:"Location"),
);
case bookmarkPage:
return MaterialPageRoute<BookmarkPage>(
builder: (_) => const BookmarkPage(title:"Bookmark details"),
);
case bookmarkMapPage:
return MaterialPageRoute<BookmarkMapPage>(
builder: (_) => const BookmarkMapPage(title:"Location"),
);
case myShopPage:
return MaterialPageRoute<MyShopPage>(
builder: (_) => const MyShopPage(title:"My SHop"),
);
case postSalePage:
return MaterialPageRoute<PostSalePage>(
builder: (_) => const PostSalePage(title:"Post an ad"),
);
case updateSalePage:
return MaterialPageRoute<UpdateSalePage>(
builder: (_) => const UpdateSalePage(title:"Update an ad"),
);
case saleDetailsPage:
return MaterialPageRoute<SaleDetailsPage>(
builder: (_) => const SaleDetailsPage(title:"Ad details"),
);
default:
throw RouteException("Route not found");
}
}
static const loginPage = '/';
static const homePage = '/home';
static const helpPage = '/help';
static const settingsPage = '/settings';
static const marketPage = '/home/market';
static const bookmarkPage = '/home/market/bookmark';
static const bookmarkMapPage = '/home/market/bookmark/bookmarksmap';
static const searchPage = '/home/market/search';
static const resultsPage = '/home//market/search/results';
static const resultsDetailsPage =
'/home/market/search/results/resultsdetails';
static const resultsDetailsMapPage =
'/home/market/search/results/resultsdetails/resultsdetailsmap';
static const myShopPage = '/home/myshop';
static const postSalePage = '/home/myshop/postsale';
static const updateSalePage = '/home/myshop/updatesale';
static const saleDetailsPage = '/home/myshop/saledetails';
}
class RouteException implements Exception {
final String message;
const RouteException(this.message);
}
我应该强调 Navigation 正在其他小部件中工作，特别是自定义 AppBar