Flutter中Flashy TabBarItem跳转至其他页面的实现方法

问题解决思路 #

FlashyTabBarItem 没有onPressed/onTap属性，这就是你添加这些属性报错的原因。底部导航的点击逻辑由父组件FlashyTabBar的onItemSelected统一处理，你只需要：

1. 把tabItems替换成实际要跳转的页面组件
2. 让页面body根据选中的索引_selectedIndex切换展示对应的页面

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'post_detail.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/cupertino.dart';
import 'package:flashy_tab_bar2/flashy_tab_bar2.dart';
import 'Influencerprofile.dart';
import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  // 替换成实际的页面组件
  List<Widget> tabItems = [
    // 首页Feed（保留你原来的布局）
    Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(children: [
        Container(
            child: Stack(alignment: Alignment.bottomLeft, children: [
          Align(
              alignment: Alignment.topCenter,
              child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: TextField(
                    readOnly: true,
                    decoration: InputDecoration(
                      hintText: "Search influencer",
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(50),
                        borderSide: BorderSide.none,
                      ),
                      fillColor: Colors.black.withOpacity(0.1),
                      filled: true,
                    ),
                  )))
        ])),
        SizedBox(height: 10),
        Container(
            alignment: Alignment.centerRight,
            child: Text('Location', style: TextStyle())),
        Expanded(
          child: LiquidPullToRefresh(
            onRefresh: _handleRefresh,
            color: Colors.black,
            child: ListView.builder(
              itemCount: 10, // 根据实际需求调整列表数量
              itemBuilder: (context, index) => PostDetail(),
            ),
          ),
        ),
      ]),
    ),
    // 收藏页
    Center(child: Text("Favourites Page")),
    // 发布页
    Center(child: Text("Add Post Page")),
    // 消息页
    Center(child: Text("Notifications Page")),
    // 个人主页（你已导入的页面）
    Influencerprofile(),
  ];

  Future<void> _handleRefresh() async {
    return await Future.delayed(Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text(
          'INFLUFIT.CLUB',
          style: GoogleFonts.bebasNeue(
              fontWeight: FontWeight.bold, fontSize: 30, color: Colors.white),
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(30),
          ),
        ),
      ),
      // 根据选中索引切换页面
      body: tabItems[_selectedIndex],
      bottomNavigationBar: FlashyTabBar(
        selectedIndex: _selectedIndex,
        showElevation: true,
        // 点击导航项更新选中索引，触发页面切换
        onItemSelected: (index) => setState(() {
          _selectedIndex = index;
        }),
        items: [
          FlashyTabBarItem(
            icon: Icon(Icons.home),
            title: Text('Feed'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Favourites'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.add),
            title: Text('Add'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.notifications_active_outlined),
            title: Text('News'),
          ),
          FlashyTabBarItem(
            icon: Icon(Icons.person),
            title: Text('My profile'),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 移除了原来Scaffold body里的固定布局，改为直接展示tabItems[_selectedIndex]，实现页面切换
• 更新tabItems列表，将每个元素替换为对应导航项的页面组件（第一个元素保留你原有的Feed布局）
• 无需给FlashyTabBarItem添加任何点击属性，FlashyTabBar的onItemSelected已处理点击逻辑，更新索引后会自动触发页面重建

内容的提问来源于stack exchange，提问作者Lili