Flutter之BottomNavigationBar和页面跳转

BottomNavigationBar是底部导航栏，是Scaffold的参数

 

常用参数：

参数名	功能
items	List<BottomNavigationBarItem>的集合
iconSize	icon大小
onTap	点击事件
fixedColor	选中的颜色
type	BottomNavigationBarType.fixed //配置底部tabs可以有多个按钮(大于3个) BottomNavigationBarType.shifting

这里用到了StatefulWidget 这个组件是可变组件，里边数据可变，通过setState来渲染数据

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }
}

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

  @override
  _TabsState createState() {
    return _TabsState();
  }
}

class _TabsState extends State<Tabs> {
  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("main"),
      ),
      body: Demo(currentIndex),

      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        //默认选中第几个 从0开始
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
        },
        iconSize: 30,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), title: Text("分类")),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), title: Text("设置")),
        ],
      ),
    );
  }
}

class Demo extends StatelessWidget {
  final count;

  const Demo(this.count);

  @override
  Widget build(BuildContext context) {
    if (count == 0) {
      return DemoContent("首页");
    } else if (count == 1) {
      return DemoContent("分类");
    } else {
      return DemoContent("设置");
    }
  }
}

class DemoContent extends StatelessWidget {
  final title;

  const DemoContent(this.title);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("$title"),
    );
  }
}

 

 

抽离出来的写法如下：

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Tabs.dart';

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

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }
}

Tabs.dart 

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Tabs/Category.dart';
import 'package:flutter_app/pages/Tabs/Home.dart';
import 'package:flutter_app/pages/Tabs/Setting.dart';


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

  @override
  _TabsState createState() {
    return _TabsState();
  }
}

class _TabsState extends State<Tabs> {
  int currentIndex = 0;

  List pages = [
    HomePage(),SettingPage(),CategoryPage(),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("main"),
      ),
      //将三个页面引入进来 根据索引跳转不同的页面
      body: pages[currentIndex],

      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        //默认选中第几个 从0开始
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
        },
        iconSize: 30,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), title: Text("分类")),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), title: Text("设置")),
        ],
      ),
    );
  }
}

Home.dart

import 'package:flutter/material.dart';


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

  @override
  _HomePageState createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text("Home");
  }
}

Category.dart

import 'package:flutter/material.dart';

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

  @override
  _CategoryPageState createState() {
    return _CategoryPageState();
  }
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text("Category");
  }
}

Setting.dart

import 'package:flutter/material.dart';

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

  @override
  _SettingPageState createState() {
    return _SettingPageState();
  }
}

class _SettingPageState extends State<SettingPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text("Setting");
  }
}