如何为BottomNavigationBarItem的标签添加样式

Question

在我的应用程序中，我有一个 BottomNavigationBar。

我正在实现底部导航栏的多重导航，如此示例所示：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,
      ),
    );

我收到一条消息称标题已被弃用。

当我使用标签参数时，如何为其设置样式？

- Janaka

Answer 1

您可以使用底部导航栏上的属性来进行样式设置。 示例：

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

- Robert Sandberg

---

我想我应该提到我使用多个导航器，如此处所示：https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf - Janaka

为什么它似乎不起作用？是颜色属性不起作用吗？如果是这样，那就是我添加selectedItemColor部分的原因，因为Flutter可能存在一个bug。（https://github.com/flutter/flutter/issues/67897） - Robert Sandberg

我们将使用相同的方法，但是使用 selectedItemColor: some == expression? Colors.red : Colors.blue。 - Robert Sandberg

我们还可以使用unselectedItemColor:某个颜色。 - Satheesh Guduri

如果使用CupertinoTabBar，它没有成员"selectedLabelStyle"或"selectedItemColor"。那么是否有其他方法可以实现呢？ - Alexweng

Answer 2

正如消息已经指出的那样，'title'属性已被弃用，已被'replace with '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',
      style: optionStyle,
    ),
  ];

  //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),
              label: 'First',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.exit_to_app),
              label: 'Second',
            ),
          ],
          selectedLabelStyle: TextStyle(fontSize: 22),
          selectedItemColor: Colors.red,

          //THIS METHOD NEEDS TO BE CALLED TO CHANGE THE STATE
          onTap: _onItemTapped,

          currentIndex: _selectedIndex),
    );
  }
}

- G.Kaviraj

Answer 3

在新的Flutter中，BottomNavigationBar有一些差异和变化，例如title已更改为label，style在title中从BottomNavigationBarItem移动到BottomNavigationBar作为selectedLabelStyle和unselectedLabelStyle等。因此，新的解决方案将如下所示：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentTab,
        onTap: (index) => setState(() => currentTab = index),
        type: BottomNavigationBarType.fixed,
        selectedLabelStyle: Archivo_12_0xff002245,
        unselectedLabelStyle: Archivo_12_grey,
        items: [
          _buildItem(),
        ],
      ),
    );
  }

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

- Abdullah Bahattab