我想改变自定义标签栏屏幕,我想当我点击所有鞋(所有鞋的页面应显示)然后乔丹和休息,我已经尝试了这么多的方式,但它是不是为我工作。请协助我。
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)
],
);
}
}
`
1条答案
按热度按时间bnlyeluc1#
这里,
tabs
需要Widget列表,但您只提供了一个Widget,即listView.builder
,请尝试以下操作既然你已经在使用TabBar,所以你不需要使用GestureDetector(),如果你不想水平滚动效果,也可以使用
isScrollable: flase,
我还用展开的小部件 Package TabBarView,如下所示