flutte之实现自定义底部导航

home页面

import 'package:flutter/material.dart';
import 'package:demo/page/friends/friends.dart';
import 'package:demo/page/message/message.dart';
import 'package:demo/page/my/my.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Home();
}

class _Home extends State<Home> {
  List pageList = [Message(), Friends(), My()];
  List pageTitleList = ['消息', '朋友列表', '我的'];
  int pageIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: pageList[pageIndex]),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              InkWell(
                child: Text('消息'),
                onTap: () {
                  this.setState(() {
                    pageIndex = 0;
                  });
                },
              ),
              InkWell(
                child: Text('好友'),
                onTap: () {
                  this.setState(() {
                    pageIndex = 1;
                  });
                },
              ),
              InkWell(
                child: Text('我的'),
                onTap: () {
                  this.setState(() {
                    pageIndex = 2;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

Message()是消息页面,登陆成功之后就要显示的,所以放在第一个(pageIndex ,索引,默认值为0)
Friends()是好友列表页面
My()是我的页面

总结

也可以使用BottomNavigationBarItem来实现,但是由于BottomNavigationBarItem中的icon是必须要传的参数,并且其定制化不高,所以使用上面的方式更好