Flutter-bottomNavigationBar底部tab

2019-09-24  本文已影响0人  秋分落叶
import 'package:flutter/material.dart';
import 'package:huisheng_flutter/pages/vip/vip_page.dart';
import 'package:huisheng_flutter/pages/shop/shop_page.dart';
import 'package:huisheng_flutter/pages/mine/mine_page.dart';

class TabbarPage extends StatefulWidget {
  @override
  _TabbarPageState createState() => _TabbarPageState();
}

class _TabbarPageState extends State<TabbarPage> {
  int _selectedIndex = 2;

  List<Widget> _pageList = [
    VipPage(),
    ShopPage(),
    MinePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageList[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        // 底部导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Vip')),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text('商城')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('我的')),
        ],
        currentIndex: _selectedIndex,
        //文字颜色
        // fixedColor: Colors.red,
        onTap: _onItemTapped,
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}
Screenshot_1567647850.png
上一篇 下一篇

猜你喜欢

热点阅读