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 技术入门与实战

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值