android - 使标签栏在颤振应用程序中始终可见
问题描述
标签栏需要在所有屏幕中都可见。但是现在当我推动任何屏幕时,它都会被隐藏起来。
我创建了一个如下所示的标签栏。
CustomTabbar.dart
import 'package:cfbp/Constant.dart';
import 'package:cfbp/DrawerScreen.dart';
import 'package:cfbp/EditProfileScreen.dart';
import 'package:cfbp/HomeMenuScreen.dart';
import 'package:cfbp/NotificationScreen.dart';
import 'package:cfbp/Utility/AppUtilities.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class CustomTabBar extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _CustomTabBarState();
}
}
class _CustomTabBarState extends State<CustomTabBar> with SingleTickerProviderStateMixin {
TabController _tabController;
int _currentIndex = 0;
final _scaffoldState = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: _tabs.length);
_tabController.addListener(handleTap);
}
handleTap() {
setState(() {
_currentIndex = _tabController.index;
print("Current Index = $_currentIndex");
});
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
final _tabs = [
Tab(child: Image.asset('assets/images/home.png', fit: BoxFit.fitHeight, width: 25,),),
Tab(child: Image.asset('assets/images/profile.png', fit: BoxFit.fitWidth, width: 25),),
Tab(child: Image.asset('assets/images/notification.png', fit: BoxFit.fitWidth, width: 25,),),
];
Widget _tabBar() {
final container = Container(
color: Color(purple),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.transparent,
controller: _tabController,
tabs: _tabs,
),
);
return SafeArea(
child: container,
);
}
@override
Widget build(BuildContext context) {
TabBarView _tabBarView = TabBarView(
controller: _tabController,
physics: NeverScrollableScrollPhysics(),
children: _tabs.map((Tab tab) {
if (_currentIndex == 0) {
return HomeMenuScreen();
} else if (_currentIndex == 1) {
return EditProfileScreen(showAppBar: false);
} else {
return NotificationScreen(showAppBar: false,);
}
}).toList(),
);
final _drawer = DrawerScreen();
final _defaultTabController = DefaultTabController(
length: _tabs.length,
child: Scaffold(
key: _scaffoldState,
appBar: AppBar(
backgroundColor: Color(purple),
title: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset(
'assets/images/cfbpLogo.png',
fit: BoxFit.contain,
height: 35,
),
],
),
),
bottomNavigationBar: _tabBar(),
body: _tabBarView,
drawer: _drawer,
backgroundColor: Color(purple),
//drawerScrimColor: Color(purple),
),
);
return _defaultTabController;
}
}
从main.dart文件设置选项卡栏,如下所示。
void main() {
//change status bar color
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Color(purple),
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MaterialColor createMaterialColor(Color color) {
List strengths = <double>[.05];
Map swatch = <int, Color>{};
final int r = color.red, g = color.green, b = color.blue;
for (int i = 1; i < 10; i++) {
strengths.add(0.1 * i);
}
strengths.forEach((strength) {
final double ds = 0.5 - strength;
swatch[(strength * 1000).round()] = Color.fromRGBO(
r + ((ds < 0 ? r : (255 - r)) * ds).round(),
g + ((ds < 0 ? g : (255 - g)) * ds).round(),
b + ((ds < 0 ? b : (255 - b)) * ds).round(),
1,
);
});
return MaterialColor(color.value, swatch);
}
@override
Widget build(BuildContext context) {
final result = UserManager.getIsUserLoggedIn();
final _routes = {
'/EditProfile': (context) => EditProfileScreen(showAppBar: true),
'/Notification': (context) => NotificationScreen(showAppBar: true,),
'/Events': (context) => EventsScreen(),
'/Login': (context) => LoginScreen(),
'/ForgotPassword': (context) => ForgotPasswordScreen(),
'/CodeOfConduct': (context) => CustomWebViewScreen(codeOfConduct),
'/TrackStatus': (context) => ComplaintStatusScreen(),
'/Settings': (context) => SettingsScreen(),
};
return FutureBuilder(
future: result,
builder: (context, snapshot) {
if (snapshot.hasData) {
bool isLoggedIn = snapshot.data;
print('user loging = $isLoggedIn');
if (isLoggedIn) {
return MaterialApp(
title: 'CFBP',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Roboto',
primarySwatch: createMaterialColor( Color(purple)),
),
home: CustomTabBar(),
routes: _routes,
);
}
}
return MaterialApp(
title: 'CFBP',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Roboto',
primarySwatch: createMaterialColor(Color(purple)),
),
home: LoginScreen(),
routes: _routes,
);
},
);
}
}
因此,一旦登录,用户将被重定向到 HomeScreen.dart。
因此,在 HomeMenuScreen.dart 文件中有一些选项使用该用户可以重定向到另一个屏幕。
因此,当用户单击编辑配置文件屏幕按钮时。用户将被重定向到编辑个人资料屏幕,如下所示。
Navigator.of(context).push(MaterialPageRoute(builder: (context) => EditProfileScreen()));
问题
当用户在编辑配置文件屏幕上时,标签栏被隐藏并且不可见。
有什么方法可以在所有屏幕上显示标签栏?
解决方案
试试CupertinoTabView
。这有自己的导航器和状态历史,这将帮助您在此类中推送路线
https://api.flutter.dev/flutter/cupertino/CupertinoTabView-class.html
推荐阅读
- python - Python - 如何调用正确的函数
- python - 如何在python中找到零数组中的最大值?
- azure - 将 pyspark RDD 数据写入 Azure 表存储
- python - 稍微修改一个复制的字典
- jenkins - 在项目或继承的作业模板级别添加额外参数
- php - 在标头(php)中启用 CORS 在 wordpress 网站上不起作用
- node.js - 如何嵌套 mocha 在 junit.xml 中描述
- c# - 在 C# 中使用带有 fileSystemWatcher 的计时器
- elasticsearch - EFK Stack(Elasticsearch、Fluent-bit、Kibana)设置不显示 Kubernetes 字段
- java - 在后台Android应用程序中获取键盘按键