[英]How to change the shape of Tabs() when TabBarView() is swiped in Flutter?
我一直在尝试更改TabBar()
中Tabs()
的形状,并使用TabBar()
() 中的onTap:(){}
属性进行了更改。
但问题是当我在TabBarView()
中滑动页面时我想要相同的功能,所以我也尝试过这样做,但我做不到。
当我在TabBarView()
中滑动页面时,我想更改Tabs()
的形状。
下面是我的代码实现:
import 'package:flutter/material.dart';
class Demo extends StatefulWidget with PreferredSizeWidget {
@override
_DemoState createState() => _DemoState();
@override
Size get preferredSize => AppBar().preferredSize;
}
class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
late TabController _tabController;
late int _index;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this, initialIndex: 1);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
_index = _tabController.index;
return SafeArea(
child: Scaffold(
body: TabBarView(
controller: _tabController,
children: [
Pages(pageName: "Page 0"),
Pages(pageName: "Page 1"),
Pages(pageName: "Page 2"),
],
),
appBar: AppBar(
elevation: 0.0,
bottom: TabBar(
onTap: (value) {
setState(() {
value = _index;
print("TabIndex: $value");
});
},
labelColor: Colors.black,
indicator: BoxDecoration(
color: Colors.white,
borderRadius: _index == 0
? BorderRadius.only(topRight: Radius.circular(10.0))
: _index == 1
? BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0))
: BorderRadius.only(topLeft: Radius.circular(10.0)),
),
controller: _tabController,
tabs: [
Tab(text: "Tab0"),
Tab(text: "Tab1"),
Tab(text: "Tab2"),
],
),
),
),
);
}
}
class Pages extends StatelessWidget {
late final String pageName;
Pages({required this.pageName});
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text(
pageName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 60.0,
),
),
),
);
}
}
我在这里想念什么? 你能告诉我吗!!
这种混淆可以通过添加addListners()
和_tabController
来解决。
以下是我的回答:
我从TabBar()
中删除了onTap:(){}
属性,因为它不是必需的,并且在initState(){}
中我添加了带有_tabController
的addListener()
方法。 这解决了所有问题,并且Tabs()
样式监听来自TabBarView()
的滑动功能
import 'package:flutter/material.dart';
class Demo extends StatefulWidget with PreferredSizeWidget {
@override
_DemoState createState() => _DemoState();
@override
Size get preferredSize => AppBar().preferredSize;
}
class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
late TabController _tabController;
int _selectedIndex = 1;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this, initialIndex: 1);
_tabController.addListener(() {
setState(() {
_selectedIndex = _tabController.index;
});
print("Current Index: $_selectedIndex");
});
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: TabBarView(
controller: _tabController,
children: [
Pages(pageName: "Page 0"),
Pages(pageName: "Page 1"),
Pages(pageName: "Page 2"),
],
),
appBar: AppBar(
elevation: 0.0,
bottom: TabBar(
labelColor: Colors.black,
indicator: BoxDecoration(
color: Colors.white,
borderRadius: _selectedIndex == 0
? BorderRadius.only(topRight: Radius.circular(10.0))
: _selectedIndex == 1
? BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0))
: BorderRadius.only(topLeft: Radius.circular(10.0)),
),
controller: _tabController,
tabs: [
Tab(text: "Tab0"),
Tab(text: "Tab1"),
Tab(text: "Tab2"),
],
),
),
),
);
}
}
class Pages extends StatelessWidget {
late final String pageName;
Pages({required this.pageName});
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text(
pageName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 60.0,
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.