问题描述
我为我的项目创建了标签栏。它包括两个标签,每个标签代表两个页面。
这是代码
import 'package:Flutter/material.dart';
class TabView extends StatefulWidget {
@override
_TabViewState createState() => _TabViewState();
}
class _TabViewState extends State<TabView> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 2,vsync: this);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade300,body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),child: Column(
children: [
Container(
height: 45,decoration: Boxdecoration(
color: Colors.grey.shade300,borderRadius: BorderRadius.circular(
16.0,),child: TabBar(
controller: _tabController,indicator: Boxdecoration(
borderRadius: BorderRadius.circular(
16.0,color: Colors.grey.shade900,labelColor: Colors.white,unselectedLabelColor: Colors.grey.shade900,tabs: [
Tab(
text: 'One',Tab(
text: 'Two',],Expanded(
child: TabBarView(
controller: _tabController,children: [
Center(
child: Text(
'Page One',style: TextStyle(
fontSize: 25,fontWeight: FontWeight.w600,Center(
child: Text(
'Page Two',);
}
}
这里是输出
示例
我想使用标签栏将第一页容器的颜色从红色改为蓝色,不想切换到第二页
我该怎么做?
解决方法
TabBar
不太适合此目的,尽管可以对其进行调整。我建议您使用cupertino 包中的CupertinoSegmentedControl
。这是 docs,这是代码示例:
enum _Tab { one,two }
class MyWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
_Tab _selectedTab = _Tab.one;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,children: [
SizedBox(height: 16),CupertinoSegmentedControl<_Tab>(
selectedColor: Colors.black,borderColor: Colors.black,pressedColor: Colors.grey,children: {
_Tab.one: Text('One'),_Tab.two: Text('Two'),},onValueChanged: (value) {
setState(() {
_selectedTab = value;
});
},groupValue: _selectedTab,),SizedBox(height: 64),Builder(
builder: (context) {
switch (_selectedTab) {
case _Tab.one:
return Center(
child: Container(
width: 100,height: 100,color: Colors.red,);
case _Tab.two:
return Center(
child: Container(
width: 100,color: Colors.blue,);
}
},],);
}
}
另请看CupertinoSlidingSegmentedControl。
,- 对于您的要求,根本不要使用 TabBarView,直接使用容器,根据 selectedtab 索引更改其颜色值
class Tabscreenstate extends State<Tabscreen> with TickerProviderStateMixin {
int selectedTabIndex = 0;
TabController tabController;
@override
void initState() {
tabController = TabController(length: 2,vsync: this);
tabController.addListener(() {
setState(() {
selectedTabIndex = tabController.index;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
tabbar(),Container(color:selectedTabIndex == 0 ? Colors.red : Colors.green),);
}
Widget tabbar() => TabBar(
controller: tabController,onTap: (value) {
setState(() {
selectedTabIndex = value;
});
},tabs: [
Text("tab one"),Text("tab two"),);
}