如何调整Flutter底部导航栏点击后的文本放大尺寸

默认的BottomNavigationBar确实没有提供直接的属性来调整选中时文本的放大比例，不过我们可以通过自定义动画来完全掌控这个效果。下面我会基于你的代码给出具体的实现方案：

首先，我们需要为每个导航项创建独立的动画控制器，用来控制文本的缩放动画。这样在切换选中项时，就能精准控制缩放的幅度和时长了。

修改后的完整代码 #

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;
  late List<AnimationController> _animationControllers;
  late List<Animation<double>> _scaleAnimations;
  
  // 这里可以自定义缩放比例，比如从1.0到1.1，比默认的小很多
  final double _normalScale = 1.0;
  final double _selectedScale = 1.1;
  final Duration _animationDuration = const Duration(milliseconds: 200);

  @override
  void initState() {
    super.initState();
    // 为5个导航项初始化动画控制器
    _animationControllers = List.generate(5, (index) {
      final controller = AnimationController(
        duration: _animationDuration,
        vsync: this,
      );
      // 默认选中第一个项，直接播放到缩放后的状态
      if (index == _currentIndex) {
        controller.value = 1.0;
      }
      return controller;
    });

    // 创建缩放动画，从_normalScale到_selectedScale
    _scaleAnimations = _animationControllers.map((controller) {
      return Tween<double>(
        begin: _normalScale,
        end: _selectedScale,
      ).animate(CurvedAnimation(
        parent: controller,
        curve: Curves.easeInOut,
      ));
    }).toList();
  }

  void navigationTapped(int page) {
    setState(() {
      // 先重置之前选中项的动画，回到原大小
      _animationControllers[_currentIndex].reverse();
      // 启动新选中项的动画，放大到目标大小
      _animationControllers[page].forward();
      _currentIndex = page;
    });
  }

  @override
  void dispose() {
    // 清理所有动画控制器，避免内存泄漏
    for (var controller in _animationControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _allPages = [
      PageOne(),
      PageTwo(),
      PageThree(),
      PageFour(),
      PageFive(),
    ];
    return Scaffold(
      body: _allPages[_currentIndex],
      bottomNavigationBar: buildBottomNavigationBar(),
    );
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.red,
      currentIndex: _currentIndex,
      onTap: navigationTapped,
      items: [
        _buildBottomNavItem(Icons.home, "Home", 0),
        _buildBottomNavItem(Icons.explore, "Admission", 1),
        _buildBottomNavItem(Icons.cloud, "University", 2),
        _buildBottomNavItem(Icons.person, "Favorites", 3),
        _buildBottomNavItem(Icons.verified_user, "Profile", 4),
      ],
    );
  }

  // 封装导航项的构建方法，复用代码
  BottomNavigationBarItem _buildBottomNavItem(IconData icon, String title, int index) {
    return BottomNavigationBarItem(
      icon: Icon(icon),
      title: AnimatedBuilder(
        animation: _scaleAnimations[index],
        builder: (context, child) {
          return Transform.scale(
            scale: _scaleAnimations[index].value,
            child: Text(
              title,
              style: TextStyle(fontWeight: FontWeight.normal),
              overflow: TextOverflow.clip,
              textAlign: TextAlign.center,
            ),
          );
        },
      ),
    );
  }
}

关键说明 #

• 自定义缩放比例：你可以通过修改_normalScale和_selectedScale来调整文本的大小变化，比如把_selectedScale设为1.05就是非常细微的放大，完全根据你的需求调整。
• 动画时长：_animationDuration控制缩放动画的快慢，默认200毫秒和系统默认接近，你也可以改成更短或更长的时间。
• 动画控制器管理：在initState中初始化所有控制器，dispose中清理，避免内存泄漏；切换选中项时，反向播放之前选中项的动画，正向播放新选中项的动画，实现平滑过渡。

这样修改后，你就完全掌控了底部导航栏文本的放大效果，再也不会出现默认放大过大的问题啦！

内容的提问来源于stack exchange，提问作者Abdullah Al Nahid