如何设置BottomNavigationBarItem标签的样式

如何解决如何设置BottomNavigationBarItem标签的样式

在我的应用程序中，我有一个按钮导航栏。

我正在使用底部导航栏实现多重导航，如下所示； https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf

我已经把标题文本这样了。

  BottomNavigationBarItem _buildItem(
      {TabItem tabItem,String tabText,IconData iconData}) {
    return BottomNavigationBarItem(
      icon: Icon(
        iconData,color: widget.currentTab == tabItem
            ? active_button_color
            : Colors.grey,),//label: tabText,title: Text(
        tabText,style: widget.currentTab == tabItem
            ? Archivo_12_0xff002245
            : Archivo_12_grey,);

我不赞成使用消息标题。

当我使用label参数时，该如何设置样式？

解决方法

您可以使用BottomNavigationBar上的属性为其设置样式。 示例：

bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),label: 'First',),BottomNavigationBarItem(
      icon: Icon(Icons.exit_to_app),label: 'Second',],selectedLabelStyle: TextStyle(fontSize: 22),selectedItemColor: Colors.red,

当然还有更多的属性。查看以下文档：https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

,

由于消息已经表明 'title' 属性已被弃用，它已被替换为 'label'。

关于选中的颜色没有变化，需要添加一个函数调用'onItemTapped'通过设置状态来改变颜色。

以下是工作代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  static const String _title = 'TEST';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,home: MyStatefulWidget(),);
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30,fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: First',style: optionStyle,Text(
      'Index 1: Second',];

  //METHOD TO SET STATE
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar'),body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),BottomNavigationBarItem(
              icon: Icon(Icons.exit_to_app),//THIS METHOD NEEDS TO BE CALLED TO CHANGE THE STATE
          onTap: _onItemTapped,currentIndex: _selectedIndex),);
  }
}

,

使用title代替label

还有另一件事

Check this link

您将获得漂亮的底部导航库。使用方法示例。 编码愉快