问题描述
- 这是我在它上面应用的带有中间 FAB 的BottomAppBar 的屏幕，
@override
void initState() {
animationController =
AnimationController(vsync: this,duration: Duration(milliseconds: 250));
degOneTranslationAnimation =
TweenSequence([
TweenSequenceItem(tween: Tween<double> (begin: 0.0,end:1.2),weight: 75.0),TweenSequenceItem(tween: Tween<double> (begin: 1.2,end:1.0),weight: 25.0)
]).animate(animationController);
degTwoTranslationAnimation =
TweenSequence([
TweenSequenceItem(tween: Tween<double> (begin: 0.0,end:1.4),weight: 55.0),TweenSequenceItem(tween: Tween<double> (begin: 1.4,weight: 45.0)
]).animate(animationController);
degThreeTranslationAnimation =
TweenSequence([
TweenSequenceItem(tween: Tween<double> (begin: 0.0,end:1.75),weight: 35.0),TweenSequenceItem(tween: Tween<double> (begin: 1.75,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
Widget build(BuildContext context) {
return Consumer<BottomNavProvider>(builder: (ctx,bottomNavProv,_) {
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,floatingActionButton: Stack(
children: [
Transform.translate(
offset: Offset.fromDirection(geTradianFromDegree(225),degOneTranslationAnimation.value * 100),child: Transform(
transform: Matrix4.rotationZ(
geTradianFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value),alignment: Alignment.center,child: CircularButton(
color: Colors.white,width: 50,height: 50,icon: Icon(Icons.add),onClick: () {},),Transform.translate(
offset: Offset.fromDirection(geTradianFromDegree(270),degTwoTranslationAnimation.value * 100),child: Transform(
transform: Matrix4.rotationZ(
geTradianFromDegree(rotationAnimation.value))..scale(degTwoTranslationAnimation.value),icon: Icon(Icons.charging_station_rounded),onClick: () {
bottomNavProv.updateSelectedindex(1);
},Transform.translate(
offset: Offset.fromDirection(geTradianFromDegree(315),degThreeTranslationAnimation.value * 100),child: Transform(
transform: Matrix4.rotationZ(
geTradianFromDegree(rotationAnimation.value))..scale(degThreeTranslationAnimation.value),icon: Icon(Icons.credit_card),onClick: () {
print('Hello');
},Transform(
transform: Matrix4.rotationZ(
geTradianFromDegree(rotationAnimation.value)),child: FloatingActionButton(
onpressed: () {
if (animationController.isCompleted) {
animationController.reverse();
} else {
animationController.forward();
}
},child: Icon(Icons.add),elevation: 5,],resizetoAvoidBottomInset: false,body: Container(
child: _isLoading
? Center(
child: CircularProgressIndicator(),)
: Container(
child: IndexedStack(
children: mainScreens,index: bottomNavProv.selectedindex,bottomNavigationBar: _isLoading
? SizedBox()
: FABBottomAppBar(
color: Colors.white,selectedColor: Theme.of(context).primaryColor,notchedShape: CircularNotchedRectangle(),onTabSelected: (index) {
bottomNavProv.updateSelectedindex(index);
switch (bottomNavProv.selectedindex) {
case 0:
{
_title = AppLocalizations.of(context).home;
_checkUserLoggedIn();
}
break;
case 1:
{
_title = AppLocalizations.of(context).offers;
}
break;
case 2:
{
_title = AppLocalizations.of(context).notifications;
// _checkUserLoggedIn();
}
break;
case 3:
{
_title = AppLocalizations.of(context).more;
_checkUserLoggedIn();
}
break;
}
},backgroundColor: Theme.of(context).accentColor,items: [
FABBottomAppBarItem(
iconData: Icons.home,text: AppLocalizations.of(context).home,FABBottomAppBarItem(
iconData: Icons.local_offer,text: AppLocalizations.of(context).offers,FABBottomAppBarItem(
iconData: Icons.notifications,text: AppLocalizations.of(context).notifications),FABBottomAppBarItem(
iconData: Icons.more_horiz,text: AppLocalizations.of(context).more),);
});
}
}
- 这是我创建的小部件，用于使用 FAB 呈现底部应用栏
import 'package:Flutter/material.dart';
class FABBottomAppBarItem {
FABBottomAppBarItem({this.iconData,this.text});
IconData iconData;
String text;
}
class FABBottomAppBar extends StatefulWidget {
FABBottomAppBar({
this.items,this.centerItemText,this.height: 60.0,this.iconSize: 24.0,this.backgroundColor,this.color,this.selectedColor,this.notchedShape,this.onTabSelected,}) {
assert(this.items.length == 2 || this.items.length == 4);
}
final List<FABBottomAppBarItem> items;
final String centerItemText;
final double height;
final double iconSize;
final Color backgroundColor;
final Color color;
final Color selectedColor;
final NotchedShape notchedShape;
final ValueChanged<int> onTabSelected;
@override
State<StatefulWidget> createState() => FABBottomAppBarState();
}
class FABBottomAppBarState extends State<FABBottomAppBar> {
int _selectedindex = 0;
_updateIndex(int index) {
widget.onTabSelected(index);
setState(() {
_selectedindex = index;
});
}
@override
Widget build(BuildContext context) {
List<Widget> items = List.generate(widget.items.length,(int index) {
return _buildTabItem(
item: widget.items[index],index: index,onpressed: _updateIndex,);
});
items.insert(items.length >> 1,_buildMiddleTabItem());
return BottomAppBar(
shape: widget.notchedShape,child: Row(
mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.spaceAround,children: items,color: widget.backgroundColor,);
}
Widget _buildMiddleTabItem() {
return Expanded(
child: SizedBox(
height: widget.height,child: Column(
mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
SizedBox(height: widget.iconSize),Text(
widget.centerItemText ?? '',style: TextStyle(color: widget.color),);
}
Widget _buildTabItem({
FABBottomAppBarItem item,int index,ValueChanged<int> onpressed,}) {
Color color = _selectedindex == index ? widget.selectedColor : widget.color;
return Expanded(
child: SizedBox(
height: widget.height,child: Material(
type: MaterialType.transparency,child: InkWell(
onTap: () => onpressed(index),child: Column(
mainAxisSize: MainAxisSize.min,children: <Widget>[
Icon(item.iconData,color: color,size: widget.iconSize),FittedBox(
child: Text(
item.text,style: TextStyle(color: color),)
],);
}
}
- 这个小部件用于创建三个圆形按钮，这是我遇到的问题。当我点击 FAB 按钮时，它们会弹出哪个动画，但是当我点击任何按钮时，它会收听主屏幕
import 'package:Flutter/material.dart';
class CircularButton extends StatelessWidget {
final double width;
final double height;
final Icon icon;
final Color color;
final Function onClick;
CircularButton({
this.width,this.height,this.icon,this.onClick
});
@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: onClick,);
}
}
~~~[![here i try to hit the middle icon but it logout][2]][2]
[1]: https://i.stack.imgur.com/GGO93.jpg
[2]: https://i.stack.imgur.com/dg2lC.jpg
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）