Flutter BottomNavigationBar 底部导航栏

底部栏的数量 不能小于两个;

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        body: new HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<HomePage> {
  int _selecIndex = 0;
   
  final _weightOptions = [
    Text("Index0:信息"),
    Text("Index1:通讯录"),
    Text("Index2:发现")
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body: new Center(
        child: _weightOptions.elementAt(_selecIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.chat), title: new Text("信息")),
          BottomNavigationBarItem(icon: Icon(Icons.contacts), title: new Text("通讯录")),
          BottomNavigationBarItem(icon: Icon(Icons.account_circle), title: new Text("发现")),

//        BottomNavigationBarItem(icon: )
        ],
        currentIndex: _selecIndex,   //当前选择的位置
        fixedColor: Colors.deepPurple,  //当前选择的颜色
        onTap: _onItemTaped,
      ),
    );
  }

  _onItemTaped(int index) {
    setState(() {
      _selecIndex=index;
    });
  }
}

参考:Flutter 技术入门与实战

猜你喜欢

转载自blog.csdn.net/u013788239/article/details/89520674