Question

我正在使用Flutter的底部导航栏。点击导航栏图标时，文本会变大。但是对我来说，它有点大，如下图所示。
Flutter Bottom Navigation Bar Image

我想控制点按文本的大小，使其更小。我该怎么办？

代码如下：

import 'package:flutter/material.dart';
import 'package:adminify/pages/PageOne.dart';
import 'package:adminify/pages/PageTwo.dart';
import 'package:adminify/pages/PageThree.dart';
import 'package:adminify/pages/PageFour.dart';
import 'package:adminify/pages/PageFive.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  void navigationTapped(int page) {
    setState(() {
      _currentIndex = page;
    });
  }

  @override
  Widget build(BuildContext context) {
    // this is all pages here in list we can choose index when click bottom navigation bar
    List<Widget> _allPages = [
      PageOne(),
      PageTwo(),
      PageTree(),
      PageFour(),
      PageFive(),
    ];

    return Scaffold(
      body: _allPages[_currentIndex],
      bottomNavigationBar: buildBottomNavigationBar(),
    );
  }

  // Bottom navigation bar area you can choose icons what you want.
  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.red,
      currentIndex: _currentIndex,
      onTap: navigationTapped,    
      // iconSize: 28,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(
            "Home",
            style: TextStyle(fontWeight: FontWeight.normal),
          ),
        ),
        BottomNavigationBarItem(
          icon: Icon(
            Icons.explore,
          ),
          title: Text(
            "Admission",
            style: TextStyle(fontWeight: FontWeight.normal),
          ),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.cloud),
          title: Text(
            "University",
            style: TextStyle(fontWeight: FontWeight.normal),
            overflow: TextOverflow.clip,
            textAlign: TextAlign.center,
          ),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          title: Text(
            "Favorites",
            style: TextStyle(fontWeight: FontWeight.normal),
          ),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.verified_user),      
          title: Text(
            "Profile",
            style: TextStyle(fontWeight: FontWeight.normal),
          ),
        ),
      ],
    );
  }
}

Answer 1

如果您查看bottom_navigation_bar.dart的源代码，则会看到底部导航栏的活动字体大小是固定的，其编写方式如下：

const double _kActiveFontSize = 14.0;

如果要更改此设置，我认为您需要创建自己的自定义底部导航栏，以更改为所需的活动字体大小。

Answer 2

通过简短地查看BottomNavigationBar代码，您做不到。似乎它使用了设置为_kActiveFontSize的硬编码14。检查bottom_navigation_bar.dart样式的FixedLabel行366或ShiftingLabel样式的行411。您可能要创建一个问题来解决该问题，https://github.com/flutter/flutter/issues

Answer 3

您可以在_kActiveFontSize中编辑bottom_navigation_bar.dart的大小：

打开flutter的安装目录（不是您的flutter项目）。
转到flutter目录中的\packages\flutter\lib\src\material。
您将找到文件bottom_navigation_bar.dart，并使用当前使用的编辑器将其打开：
在20行中，您会发现：
```
const double _kActiveFontSize = 14.0;
```

将其更改为适合您的值。但是要小心，因为任何不必要的编辑都可能阻止您的BottomNavigationBar正常工作。

关闭您的项目，然后再次运行以应用更改。

Answer 4

selectedFontSize上有一个属性BottomNavigationBar。您可以使用这个。只需将大小（整数）设置为所需的值即可。

另外； BottomNavigationBar上还有一个unselectedFontSize，因此您可以将所有title-fontsize音调设置为所需的大小。

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (int index) {
          setState(() {
            this.index = index;
          });
        },
        backgroundColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        unselectedFontSize: 12,
        items: [
          BottomNavigationBarItem(
            icon: ClipOval(
              child: Container(
                color:
        omitted ...

在颤动的底部导航栏中控制大尺寸的点击文本

4 个答案: