android - 当我单击从 pub dev 获得的用于颤振的bubble_bottom_bar 1.2.0 时如何更改屏幕
问题描述
我正在使用一个名为的颤动底部导航bubble_bottom_bar 1.2.0
,它工作正常,但是当我单击选项卡时什么也不做,当我单击导航栏时如何更改屏幕?这是我的代码:
import 'package:flutter/material.dart';
import 'package:wallet_app/CardScreen.dart';
import 'package:wallet_app/HomeScreen.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: WalletApp(),
debugShowCheckedModeBanner: false,
);
}
}
class WalletApp extends StatefulWidget {
@override
final databaseReference = Firestore.instance;
_WalletAppState createState() => _WalletAppState();
}
class _WalletAppState extends State<WalletApp> {
int currentIndex;
@override
void initState() {
// TODO: implement initState
super.initState();
currentIndex = 0;
}
void changePage(int index) {
setState(() {
currentIndex = index;
});
}
var screens = [
HomeScreen(),
CardScreen(),
]; //screens for each tab
int selectedTab = 0;
GlobalKey<ScaffoldState> _drawerKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(38, 81, 158, 1),key: _drawerKey,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Colors.black),
)//,floatingActionButton: FloatingActionButton(
// onPressed: () {},
// child: Icon(Icons.add),
// backgroundColor: Colors.blueAccent,
//),
//floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
,bottomNavigationBar: BubbleBottomBar(
hasNotch: true,
fabLocation: BubbleBottomBarFabLocation.end,
opacity: .2,
currentIndex: currentIndex,
onTap: changePage,
borderRadius: BorderRadius.vertical(
top: Radius.circular(
16)), //border radius doesn't work when the notch is enabled.
elevation: 8,
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
backgroundColor: Colors.blueAccent,
icon: Icon(
Icons.home,
color: Colors.black,
),
activeIcon: Icon(
Icons.home,
color: Colors.white,
),
title: Text("Home")),
BubbleBottomBarItem(
backgroundColor: Colors.deepPurple,
icon: Icon(
Icons.access_time,
color: Colors.black,
),
activeIcon: Icon(
Icons.access_time,
color: Colors.deepPurple,
),
title: Text("Logs")),
BubbleBottomBarItem(
backgroundColor: Colors.indigo,
icon: Icon(
Icons.folder_open,
color: Colors.black,
),
activeIcon: Icon(
Icons.folder_open,
color: Colors.indigo,
),
title: Text("Folders")),
BubbleBottomBarItem(
backgroundColor: Colors.green,
icon: Icon(
Icons.menu,
color: Colors.black,
),
activeIcon: Icon(
Icons.menu,
color: Colors.green,
),
title: Text("Menu"))
],
),
body: screens[selectedTab],
);
}
}
解决方案
您应该将 更改 body: screens[selectedTab],
为 body: screens[currentIndex],
。
此外,BubbleBottomBar中的项目在 列表屏幕中应该只有相同的项目数。否则会导致 RangeError。
var screens = [
HomeScreen(),
CardScreen(),
];
推荐阅读
- python - 打印 azure cosmos db 容器
- kubernetes - 如何在 Kubernetes 托管集群中将 --packages 传递给 spark-submit?
- azure-logic-apps - 合并/合并 xml 记录
- javascript - 外部 javascript 不起作用 - 本地文件
- javascript - Javascript 函数是否应该避免通过三元条件拒绝承诺?
- javascript - 我怎样才能修复这个确认密码?
- python - 如何在熊猫中聚合每组的两个最大值?
- sql - 如何使用一串值“搜索”其列包含所述值的记录
- angular - 当内部有 switchMap 运算符时,角激活路由 paramMap 不会取消订阅
- c++ - 该标准是否会阻止在可变参数模板中使用足够小的文字值缩小文字转换的范围