0
点赞
收藏
分享

微信扫一扫

Flutter--BottomNavigationBar组件


BottomNavigationBar

属性

释义

items

Lisst底部导航按钮集合

iconSize

icon

currentIndex

默认选中的tab

onTap

选中变化函数

fixedColor

选中的颜色

type

BottomNavigationBarType.fixed, BottomNavigationBarType.shifting

eg: 创建tab

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs()
);
}
}

class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);


_TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
int current_index = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title : Text("TabBarDemo"),
),
body: Text("TabBar"),
bottomNavigationBar: BottomNavigationBar(
currentIndex: current_index,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
current_index = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("体系")
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
),
BottomNavigationBarItem(
icon: Icon(Icons.supervised_user_circle),
title: Text("我的")
),
],
),
);
}
}

BottomNavigationBar跳转页面示例
  • 首先在lib下创建pages目录,并创建tab对应的页面

eg:首页

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Text("首页");
}
}

  • 将Tabs抽取出来并将页面引入

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/home.dart';
import 'package:flutter_app/pages/mine.dart';
import 'package:flutter_app/pages/setting.dart';
import 'package:flutter_app/pages/system.dart';


class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
_TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
int _currentIndex=0;
List _pageList=[
HomePage(),
SystemPage(),
SettingPage(),
MinePage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex, //配置对应的索引值选中
onTap: (int index){
setState(() { //改变状态
this._currentIndex=index;
});
},
fixedColor:Colors.blue, //选中的颜色
type:BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("体系")
),


BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("我的")
)
],
),
);
}
}

  • main.dart

import 'package:flutter/material.dart';
import 'pages/tabs.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs()
);
}
}

Flutter--BottomNavigationBar组件_Text


举报

相关推荐

0 条评论