Flutter 佈局基礎 ——BottomNavigationBar#
背景#
Flutter中的BottomNavigationBar類似於 iOS 中的UITabbarController，是導航控制器的一種，常用於首頁 Tab 切換。
BottomNavigationBar的 type 屬性，預設值會根據items的個數而定；當items個數小於 4 個時，預設值為BottomNavigationBarType.fixed；當items個數大於等於 4 個，預設值為BottomNavigationBarType.shifting。
兩種效果對比如下：左側為BottomNavigationBarType.fixed，右側為BottomNavigationBarType.shifting
常用屬性如下：
- backgroundColor: 背景色
- currentIndex: 當前選中哪一個
- fixedColor: 選中 Item 的顏色
- iconSize: 圖片大小
- items: 子元素
- onTap: 點擊事件
- selectedFontSize: 選中字體大小
- selectedItemColor: 選中 Icon 顏色
- selectedLabelStyle: 選中文字的 style
- type: icon 和文字的樣式
- unselectedItemColor: 未選中 Icon 的顏色
- unselectedLabelStyle: 未選中文字樣式
代碼如下：
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: 首頁',
style: optionStyle,
),
Text(
'Index 1: 商業',
style: optionStyle,
),
Text(
'Index 2: 學校',
style: optionStyle,
)
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar 範例'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
BottomNavigationBarItem(
icon: Icon(Icons.business), label: '商業'),
BottomNavigationBarItem(icon: Icon(Icons.school), label: '學校'),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
也可以如下使用，
main.dart 中，聲明 home 為 BottomNavigationWidget
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter bottomNavigationBar',
theme: ThemeData.light(),
home: BottomNavigationWidget(),
);
}
}
然後創建 bottom_navigation_widget.dart，內容如下：
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/pages/airplay_screen.dart';
import 'package:flutter_application_1/pages/email_screen.dart';
import 'package:flutter_application_1/pages/home_screen.dart';
import 'package:flutter_application_1/pages/pages_screen.dart';
class BottomNavigationWidget extends StatefulWidget {
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _BottomNavigationColor = Colors.blue;
int _currentIndex = 0;
List<Widget> list = [];
@override
void initState() {
list
..add(HomeScreen())
..add(EmailScreen())
..add(PageScreen())
..add(AirplayScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _BottomNavigationColor,
),
label: '首頁',
),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _BottomNavigationColor,
),
label: '郵件',
),
BottomNavigationBarItem(
icon: Icon(
Icons.pages,
color: _BottomNavigationColor,
),
label: '頁面',
),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _BottomNavigationColor,
),
label: 'AirPlay',
),
],
currentIndex: _currentIndex,
// type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
然後創建 pages 目錄，pages 目錄中創建home_screen.dart、airplay_screen.dart、email_screen.dart、pages_screen.dart，
代碼如下：
/// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('首頁'),
),
body: Center(
child: Text('首頁'),
),
);
}
}
/// airplay_screen.dart
import 'package:flutter/material.dart';
class AirplayScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Airplay'),
),
body: Center(
child: Text('Airplay'),
),
);
}
}
/// email_screen.dart
import 'package:flutter/material.dart';
class EmailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('郵件'),
),
body: Center(
child: Text('郵件'),
),
);
}
}
/// pages_screen.dart
import 'package:flutter/material.dart';
class PageScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('頁面'),
),
body: Center(
child: Text('頁面'),
),
);
}
}
這樣使用，把首頁 BottomNavigationWidget 拆出來到單獨的類，再把 items 中每個類單獨拆出來，方便修改使用。