flutter如何实现仿闲鱼导航栏

在Flutter中如何实现类似闲鱼App的底部导航栏效果？需要支持图标和文字的组合样式，点击切换时有动画效果，并且导航栏能固定在底部。求具体实现代码或推荐好用的第三方库！

2 回复

使用Flutter实现仿闲鱼导航栏，可通过以下步骤：

  1. 使用Scaffold的appBar属性设置顶部导航栏。
  2. 自定义AppBar，设置leading、title和actions。
  3. 使用TabBar和TabBarView实现底部导航切换。
  4. 结合BottomNavigationBar或CupertinoTabBar实现底部导航栏。

示例代码：

Scaffold(
  appBar: AppBar(
    title: Text('闲鱼'),
    actions: [IconButton(icon: Icon(Icons.search), onPressed: () {})],
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
    ],
  ),
);

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


在 Flutter 中实现仿闲鱼导航栏，可以通过 BottomNavigationBar 结合 TabBar 实现。闲鱼底部导航栏有 5 个选项，点击后上方会切换对应的 Tab 页面。

以下是核心实现步骤和代码：

1. 基本结构

使用 DefaultTabController 包裹，结合 Scaffold 的 bottomNavigationBar 和 body。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

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

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    TabBarView(children: [Page1(), Page2(), Page3(), Page4(), Page5()]),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.yellow),
    Container(color: Colors.purple),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          title: Text('仿闲鱼导航'),
          bottom: TabBar(
            tabs: [
              Tab(text: '首页'),
              Tab(text: '鱼塘'),
              Tab(text: '发布'),
              Tab(text: '消息'),
              Tab(text: '我的'),
            ],
            isScrollable: true,
          ),
        ),
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.pool), label: '鱼塘'),
            BottomNavigationBarItem(icon: Icon(Icons.add_circle), label: '发布'),
            BottomNavigationBarItem(icon: Icon(Icons.chat), label: '消息'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
          ],
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }
}

// 示例页面，实际替换为你的页面
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('首页内容'));
  }
}
// 其他 Page2~Page5 类似...

2. 关键点说明

  • 底部导航：BottomNavigationBar 控制主要页面切换。
  • 顶部 TabBar：在第一个导航项（首页）内使用 TabBar 实现子分类切换。
  • 状态管理：通过 _currentIndex 跟踪当前选中的导航项。
  • 页面结构：第一个页面是 TabBarView，其他页面是普通容器。

3. 自定义样式

如需更接近闲鱼效果：

  • 修改图标和文字颜色
  • 调整 TabBar 样式（如指示器颜色、标签样式）
  • 使用自定义图标（通过 Image.asset 加载本地图片）
BottomNavigationBar(
  currentIndex: _currentIndex,
  selectedItemColor: Colors.orange, // 选中颜色
  unselectedItemColor: Colors.grey, // 未选中颜色
  // ... 其他参数
)

这样就实现了基本的仿闲鱼导航结构，你可以根据实际需求进一步完善页面内容和样式。

回到顶部