如何更改BottomNavigationBar背景色? [英] How to change BottomNavigationBar background colour?
本文介绍了如何更改BottomNavigationBar背景色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在制作带有标签栏的简单应用.我需要将底部导航栏"的背景颜色更改为蓝色.该应用程序的其余部分应为白色背景,导航栏应为蓝色背景.我该怎么办?在ThemeData中设置canvasColor无效.
Im making a simple app with tab bars. I need to change Bottom Navigation Bar's background colour to blue. The rest of the app should be in white background and navigation bar should be blue backgrounded. How should I do that? Setting canvasColor in ThemeData didnt work.
这里是我的代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
State<StatefulWidget> createState(){
return MyAppState();
}
}
class MyAppState extends State<MyApp>{
int _selectedPage = 0;
final _pageOptions = [
Text('Item1'),
Text('Item2'),
Text('Item3')
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'sddsd',
theme: ThemeData(
primaryColor: Colors.blueAccent,
fontFamily: "Google Sans"
),
home: Scaffold(
appBar: AppBar(
title:Text("LQ2018"),
backgroundColor: Colors.blueAccent,
),
body: _pageOptions[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.blueAccent,
currentIndex: _selectedPage,
onTap: (int index){
setState(() {
_selectedPage= index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players')),
BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending')),
BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'))
]
),
),
);
}
}
推荐答案
尝试一下
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
State<StatefulWidget> createState(){
return MyAppState();
}
}
class MyAppState extends State<MyApp>{
int _selectedPage = 0;
final _pageOptions = [
Text('Item1'),
Text('Item2'),
Text('Item3')
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'sddsd',
theme: ThemeData(
primaryColor: Colors.blueAccent,
fontFamily: "Google Sans"
),
home: Scaffold(
appBar: AppBar(
title:Text("LQ2018"),
//backgroundColor: Colors.blueAccent,
),
body: _pageOptions[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
//fixedColor: Colors.blueAccent,
type: BottomNavigationBarType.shifting,
currentIndex: _selectedPage,
onTap: (int index){
setState(() {
_selectedPage= index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.blueAccent),
BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.blueAccent)
]
),
),
);
}
}
这篇关于如何更改BottomNavigationBar背景色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文