美文网首页
Flutter-bottomNavigationBar底部tab

Flutter-bottomNavigationBar底部tab

作者: 秋分落叶 | 来源:发表于2019-09-24 11:18 被阅读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

相关文章

网友评论

      本文标题:Flutter-bottomNavigationBar底部tab

      本文链接:https://www.haomeiwen.com/subject/lefdyctx.html