Flutter中BottomNavigationBar的简单使用

Flutter中BottomNavigationBar的简单使用

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "标题",
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Scaffold(
        appBar: AppBar(
          title: Text('标题'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          //图标大小
          iconSize: 24,
          //底部导航按钮切换特效(默认)
          type: BottomNavigationBarType.fixed,
          //选中的颜色
          fixedColor: Colors.pink,
          onTap: (value) => _onItemTapped(value),

          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('聊天')),
            BottomNavigationBarItem(icon: Icon(Icons.refresh), title: Text('朋友圈')),
            BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('我的')),
          ],
          currentIndex: _indexCurrent,
        ),
      ),
    );
  }

  int _indexCurrent = 0;

  _onItemTapped(int index) {
    setState(() {
      print(index);
      _indexCurrent = index;
    });
  }
}

赏

谢谢你请我吃糖果