Я относительно новичок во Flutter и застрял в проблеме с панелью вкладок.
Я создал эту панель вкладок во всплывающем контейнере. Я бы хотел, чтобы сама панель вкладок оставалась на месте, а содержимое прокручивалось под ней. Однако в моей текущей версии весь раздел (включая параметры панели вкладок) помещается под текстовый контейнер выше.
Как я могу исправить это? Я изучил SliverAppBars, но мне не нужна полная панель приложений, только панель вкладок.
Код ниже — с акцентом на раздел NestedScrollView. Любая помощь очень ценится!
class TokenTabs extends StatefulWidget {
const TokenTabs({Key? key}) : super(key: key);
@override
State<TokenTabs> createState() => _TokenTabsState();
}
class _TokenTabsState extends State<TokenTabs>
with SingleTickerProviderStateMixin {
late int currentTab;
late TabController tabController;
@override
void initState() {
currentTab = 1;
tabController = TabController(length: 3, vsync: this, initialIndex: 1);
tabController.animation!.addListener(() {
final value = tabController.animation!.value.round();
if (value != currentTab && mounted) {
changePage(value);
}
});
super.initState();
}
void changePage(int newTab) {
setState(() {
currentTab = newTab;
});
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final Color unselectedColor = Colors.grey;
return NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 0.1, color: Colors.grey.withOpacity(0.5)),
),
),
height: 45,
child: TabBar(
controller: tabController,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
color: Colors.orange,
width: 3,
)),
indicatorPadding: const EdgeInsets.fromLTRB(6.0, 0.0, 6.0, 0.0),
tabs: [
Text(
'Posts',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight:
currentTab == 0 ? FontWeight.bold : FontWeight.normal,
fontSize: 16.0,
color: currentTab == 0 ? Colors.black : unselectedColor,
),
),
Text(
'Holders',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight:
currentTab == 1 ? FontWeight.bold : FontWeight.normal,
fontSize: 16.0,
color: currentTab == 1 ? Colors.black : unselectedColor,
),
),
Text(
'Rewards',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight:
currentTab == 2 ? FontWeight.bold : FontWeight.normal,
fontSize: 16.0,
color: currentTab == 2 ? Colors.black : unselectedColor,
),
),
],
),
),
),
];
},
body: Container(
child: TabBarView(
controller: tabController,
children: const [
Text('Posts of users'),
Text('Other holders'),
Text('Rewards unlocked'),
],
),
),
);
}
}
вы можете прочитать следующую статью о представлениях панели вкладок Flutter. Надеюсь, поможет https://daniasblog.com/flutter-tabbar-gradient-style/
Решил это - вместо этого просто использовал DefaultTabController:
return DefaultTabController(
length: 3,
child: Column(
children: [
SizedBox(
height: 40,
child: TabBar(
controller: tabController,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
color: Colors.orange,
width: 3,
)),
indicatorPadding: const EdgeInsets.fromLTRB(6.0, 0.0, 6.0, 0.0),
tabs: [
Text(
'Posts',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight:
currentTab == 0 ? FontWeight.bold : FontWeight.normal,
fontSize: 16.0,
color: currentTab == 0 ? Colors.black : unselectedColor,
),
),
Text(
'Holders',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight:
currentTab == 1 ? FontWeight.bold : FontWeight.normal,
fontSize: 16.0,
color: currentTab == 1 ? Colors.black : unselectedColor,
),
),
Text(
'Rewards',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight:
currentTab == 2 ? FontWeight.bold : FontWeight.normal,
fontSize: 16.0,
color: currentTab == 2 ? Colors.black : unselectedColor,
),
),
],
),
),
Expanded(
child: TabBarView(
controller: tabController,
children: [
ListView.builder(
itemCount: 100,
itemBuilder: (_, int index) {
return Text('Index $index');
}),
ListView.builder(
itemCount: 100,
itemBuilder: (_, int index) {
return Text('Index $index');
}),
ListView.builder(
itemCount: 100,
itemBuilder: (_, int index) {
return Text('Index $index');
}),
],
),
),
],
),
);
Вы должны отметить это как принятый ответ.
Спасибо, что указали мне на ваш блог, но я до сих пор не могу понять, как зафиксировать TabBar, не используя его как часть панели приложения. Можете ли вы посоветовать, как лучше всего решить эту проблему в приведенном выше коде?