Flutter:底部导航栏组件-BottomNavigationBar

xiaohai 2021-08-12 15:24:44 231人围观 标签: Flutter 
简介底部导航条BottomNavigationBar,可以非常方便的实现tap之间的切换。

底部导航条BottomNavigationBar,可以非常方便的实现tap之间的切换。

BottomNavigationBar主要属性:

  1. currentIndex:int类型,当前索引
  2. fixedColor:Color类型,选中按钮的颜色
  3. iconSize:double类型,按钮图标的大小
  4. items:List类型,底部导航按钮集
  5. onTap:ValueChanged,按下某个按钮的回调事件
底部导航栏Demo
import 'package:flutter/material.dart';

class BottomNavigationBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int _selectIndex = 1;
    return Scaffold(
      appBar: AppBar(
        title: Text('风格组件:BottomNavigationBar'),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: null,
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          print(index);
        },
        currentIndex: _selectIndex, //设置当前索引
        type: BottomNavigationBarType.fixed, //超过3个item时就需要设置该选项,否则不会显示
        items: [
          BottomNavigationBarItem(
            //设置文字
            label: '信息',
            //设置图标
            icon: Icon(Icons.message),
          ),
          BottomNavigationBarItem(
            label: '朋友',
            icon: Icon(Icons.contact_phone),
          ),
          BottomNavigationBarItem(
            label: '消息',
            icon: Icon(Icons.message),
          ),
          BottomNavigationBarItem(
            label: '我的',
            icon: Icon(Icons.account_circle),
          ),
        ],
      ),
    );
  }
}

图片alt

如果需要进行切换,就需要将组件设置成StatefulWidget,然后将如下代码

        onTap: (index) {
          print(index);
        },

改成:

          setState(() {
            _selectIndex = index;
          });