Flutter BottomNavigation 底部导航详解
主要是使用了
代码语言：javascript复制Scaffold下的bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,以及是否粘贴到底部,和导航的个数在app的主页面,home指向底部导航栏的组件
代码语言：javascript复制home: BottomNavigation(),底部导航栏的组件集成 StatefulWidget 在内部创建一个带有状态的组件
代码语言：javascript复制// 底部导航
class BottomNavigation extends StatefulWidget {
@override
_BottomNavigationState createState() => _BottomNavigationState();
}状态组件内有一些颜色的变量和选中导航索引的变量
代码语言：javascript复制int _currentIndex = 0;
static const int mainNum = 0xFFFA8C16;这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用
如颜色, 按钮,图标
代码语言：javascript复制Colors.white // 白色颜色
Icons.home // home 图标
FloatingActionButton // 漂浮的按钮效果图
在colors.dart中查看预设颜色值
在icons.dart中查看预设图标
源码
三个文件 main.dart
代码语言：javascript复制import 'package:flutter/material.dart';
import './view/home.dart';
import './view/message.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(
primarySwatch: Colors.blue,
),
home: BottomNavigation(),
);
}
}
// 底部导航
class BottomNavigation extends StatefulWidget {
@override
_BottomNavigationState createState() => _BottomNavigationState();
}
class _BottomNavigationState extends State<BottomNavigation> {
int _currentIndex = 0;
static const int mainNum = 0xFFFA8C16;
List<Widget> list = List();
@override
void initState() {
list..add(Home())..add(Message());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.white,
backgroundColor: Color(mainNum),
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(icon:Icon(Icons.home),title: Text('首页')),
BottomNavigationBarItem(icon:Icon(Icons.message),title: Text('消息'))
],
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}home.dart
代码语言：javascript复制import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
Home();
@override
State<StatefulWidget> createState() => _Home();
}
class _Home extends State<Home> {
int _counter = 0;
void _incrementCounter() {
setState(() {_counter ;});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('It is my home page :')
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}message.dart
代码语言：javascript复制import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Message extends StatefulWidget {
Message();
@override
State<StatefulWidget> createState() => _Message();
}
class _Message extends State<Message> {
int _counter = 5;
void _incrementCounter() {
setState(() {_counter ;});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('It is my message page')
],
),
)
);
}
}事件处理
代码语言：javascript复制按钮的点击事件 onPressed: _incrementCounter,处理方法
代码语言：javascript复制 void _incrementCounter() {
setState(() {_counter ;});
}使用void关键字修饰, 使用setState 来修改内部变量
问题1:
假如页面停留在首页, 此时来了一个消息,需要在消息的导航栏上加上徽标,该如何处理?
问题2:
假如现在要做换肤的功能,那要如何做?
问题3:
目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用
问题4:
如何在页面切换时 ,使用动画,自己写?框架有预设吗?
问题5:
如何设置支持导航栏,左滑,优化切换?
效果图
