flutter如何实现闲鱼底部导航栏

在Flutter中想模仿闲鱼的底部导航栏效果，具体应该怎么实现呢？比如如何设置图标和文字的组合，点击切换动画效果，以及保持状态不销毁？求详细的代码示例和思路说明！

2 回复

在Flutter中实现闲鱼底部导航栏，可使用BottomNavigationBar组件。设置items定义图标和标签，通过currentIndex和onTap切换页面。结合PageView或IndexedStack管理页面切换，实现流畅体验。

更多关于flutter如何实现闲鱼底部导航栏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现类似闲鱼的底部导航栏，可以使用 BottomNavigationBar 组件结合 PageView 实现滑动切换效果。以下是完整示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '闲鱼底部导航',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();

  // 页面列表
  final List<Widget> _pages = [
    HomePage(),
    FishPoolPage(),
    MessagePage(),
    MyPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: _pages,
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
            _pageController.jumpToPage(index);
          });
        },
        type: BottomNavigationBarType.fixed, // 固定样式，超过3个item时需要
        selectedItemColor: Colors.orange, // 选中颜色
        unselectedItemColor: Colors.grey, // 未选中颜色
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: '鱼塘',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: '消息',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}

// 示例页面组件
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('首页'));
  }
}

class FishPoolPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('鱼塘'));
  }
}

class MessagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('消息'));
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('我的'));
  }
}

关键点说明：

  1. BottomNavigationBar：基础底部导航组件

    • currentIndex 控制当前选中项
    • onTap 处理点击切换
    • type: BottomNavigationBarType.fixed 固定样式（超过3个item时必须设置）

  2. PageView：实现页面滑动切换

    • 与 BottomNavigationBar 保持状态同步
    • 通过 PageController 控制页面跳转

  3. 样式定制：

    • 修改 selectedItemColor 和 unselectedItemColor 来调整颜色
    • 可替换图标和文字为闲鱼实际使用的资源

优化建议：

  • 使用自定义图标资源替换 Material Icons
  • 添加徽章数字提示（如消息数量）
  • 可加入动画过渡效果增强用户体验

这种方式实现了页面滑动和底部导航的完美同步，效果流畅，符合闲鱼的实际交互体验。

回到顶部