flutter 如何使用自定义选项卡栏更改页面/屏幕

rpppsulh  于 2023-01-31  发布在  Flutter
关注(0)|答案(1)|浏览(186)

我想改变自定义标签栏屏幕,我想当我点击所有鞋(所有鞋的页面应显示)然后乔丹和休息,我已经尝试了这么多的方式,但它是不是为我工作。请协助我。
The image我想改变自定义选项卡栏屏幕,我想当我点击所有鞋(所有鞋的页面应该显示)然后乔丹和其他人,我已经尝试了这么多的方式,但它不适合我。请协助我。

`class MyTabBar extends StatefulWidget {
  const MyTabBar({Key? key}) : super(key: key);

  @override
  State<MyTabBar> createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> 
with SingleTickerProviderStateMixin{
  int _isSelectedIndex = 0;

  late TabController _tabController;

  @override
   void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 6);
  }

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

  List<Widget> pageList = [
    const AllShoesPage(),
    const JordanPage(),
    const BasketBallPage(),
    const TennisPage(),
    const WalkingPage(),
    const SoccerPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 60.0,
          width: double.infinity,
          child: TabBar(
            controller: _tabController,
            tabs: [ListView.builder(
              physics: const BouncingScrollPhysics(),
              itemCount: tabBarItems.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, index) {
                return Column(
                  children: [
                    GestureDetector(
                     onTap: () => setState(() =>_isSelectedIndex = index),
                      child: Container(
                        margin: const EdgeInsets.all(5.0),
                        height: 45,
                        width: MediaQuery.of(context).size.width / 5,
                        decoration: BoxDecoration(
                          color: _isSelectedIndex == index
                              ? Appcolors.primaryColor
                              : Appcolors.whiteColor,
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Center(
                          child: Text(
                            tabBarItems[index],
                            style: GoogleFonts.poppins(
                                color: _isSelectedIndex == index
                                    ? Appcolors.whiteColor
                                    : Appcolors.darkGreyColor),
                          ),
                        ),
                      )
                    ),
                    Visibility(
                      visible: _isSelectedIndex == index,
                      child: Container(
                        width: 5,
                        height: 5,
                        decoration: const BoxDecoration(
                            color: Appcolors.primaryColor,
                            shape: BoxShape.circle),
                      ),
                    )
                  ],
                );
              },
            )]
          ),
        ),
        TabBarView(
          controller: _tabController,
          children: pageList)
      ],
    );
  }
}
`
bnlyeluc

bnlyeluc1#

这里,tabs需要Widget列表,但您只提供了一个Widget,即listView.builder,请尝试以下操作

tabs: List.generate(tabBarItems.length, (index) => MyWidget())

既然你已经在使用TabBar,所以你不需要使用GestureDetector(),如果你不想水平滚动效果,也可以使用isScrollable: flase,
我还用展开的小部件 Package TabBarView,如下所示

Expanded(child: TabBarView())

相关问题