Flutter BottomNavigation 底部导航详解 及问题记录
【摘要】
Flutter BottomNavigation 底部导航详解
主要是使用了
Scaffold下的
bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,以及是否粘贴到底部,和导航的个数
在app的主页面,home指向底部导航栏的组件
h...
Flutter BottomNavigation 底部导航详解
主要是使用了
Scaffold下的
bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,以及是否粘贴到底部,和导航的个数
在app的主页面,home指向底部导航栏的组件
home: BottomNavigation(),
底部导航栏的组件集成 StatefulWidget 在内部创建一个带有状态的组件
-
// 底部导航
-
class BottomNavigation extends StatefulWidget {
-
@override
-
_BottomNavigationState createState() => _BottomNavigationState();
-
}
状态组件内有一些颜色的变量和选中导航索引的变量
-
int _currentIndex = 0;
-
static const int mainNum = 0xFFFA8C16;
这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用
如颜色, 按钮,图标
-
Colors.white // 白色颜色
-
Icons.home // home 图标
-
FloatingActionButton // 漂浮的按钮
效果图
在colors.dart中查看预设颜色值
在icons.dart中查看预设图标
源码
三个文件 main.dart
-
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
-
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
-
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')
-
],
-
),
-
)
-
);
-
}
-
-
}
事件处理
按钮的点击事件 onPressed: _incrementCounter,
处理方法
-
void _incrementCounter() {
-
setState(() {_counter++;});
-
}
使用void关键字修饰, 使用setState 来修改内部变量
问题1:
假如页面停留在首页, 此时来了一个消息,需要在消息的导航栏上加上徽标,该如何处理?
问题2:
假如现在要做换肤的功能,那要如何做?
问题3:
目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用
问题4:
如何在页面切换时 ,使用动画,自己写?框架有预设吗?
问题5:
如何设置支持导航栏,左滑,优化切换?
效果图
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/104073164
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）