Flutter 开发中的底部导航按钮凸起与切换动画

2023-01-07 12:31:21

Flutter 中底部导航栏的凸起按钮和切换动画

1. 底部导航栏中的凸起按钮

底部导航栏是 Flutter 应用中常见的 UI 元素，用于在页面间快速切换。通常，这些按钮是扁平的，但有时需要突出显示中间的按钮。使用 shape 属性可以实现此效果。

BottomNavigationBarItem(
  icon: Icon(Icons.home),
  label: 'Home',
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
);

2. 导航栏中的切换动画

点击底部导航栏按钮时，通常会有一个动画。使用 selectedItemColor 属性可以实现此效果。

BottomNavigationBarItem(
  icon: Icon(Icons.home),
  label: 'Home',
  backgroundColor: Colors.blue,
  selectedItemColor: Colors.white,
);

3. 闲鱼 App 中的底部导航栏

闲鱼 App 以其独特的底部导航栏设计而闻名。中间按钮凸起，在切换导航时有弹跳效果。

4. 实现凸起按钮和切换动画

步骤 1：添加 flutter_svg 依赖项

在 pubspec.yaml 文件中添加：

dependencies:
  flutter_svg: ^1.1.0

步骤 2：导入 flutter_svg

在 main.dart 文件中：

import 'package:flutter_svg/flutter_svg.dart';

步骤 3：使用 SVG 图标

在底部导航栏代码中：

BottomNavigationBarItem(
  icon: SvgPicture.asset('assets/images/home.svg'),
  label: 'Home',
  backgroundColor: Colors.blue,
  selectedItemColor: Colors.white,
);

步骤 4：设置按钮 shape

BottomNavigationBarItem(
  icon: SvgPicture.asset('assets/images/home.svg'),
  label: 'Home',
  backgroundColor: Colors.blue,
  selectedItemColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
);

步骤 5：设置 selectedItemColor

BottomNavigationBarItem(
  icon: SvgPicture.asset('assets/images/home.svg'),
  label: 'Home',
  backgroundColor: Colors.blue,
  selectedItemColor: Colors.white,
);

5. 总结

本教程介绍了如何在 Flutter 应用中实现底部导航栏中间按钮的凸起效果和切换动画。希望这篇文章能帮助你提升 Flutter 开发技能。

常见问题解答