我想在我的体内实现一个自定义的可滚动 TabBar,而不是在 appBar 中
最佳答案
PageView 和 PageController
所以这并不是您要找的东西,您可以水平滚动 (scrollView) 而不是底部栏,但我希望这能将您推向正确的方向。此代码基本上使用 pageView
来显示页面,并且由于有一个页面 Controller ,您可以为特定页面的任何按钮或 onPress
设置动画。
如有任何问题,请告诉我!
import 'package:flutter/material.dart';
class TestWidget extends StatefulWidget {
TestWidget({Key key}) : super(key: key);
@override
_TestWidgetState createState() => _TestWidgetState();
}
class _TestWidgetState extends State<TestWidget> {
int _selectedIndex = 0;
PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tab Bar"),
),
body: Center(
child: Column(
children: <Widget>[
Expanded(
flex: 10,
child: ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
splashColor: Colors.blueAccent,
color: Colors.blue,
onPressed: () {
_pageController.animateToPage(0, duration: Duration(milliseconds: 500), curve: Curves.ease);
},
child: Text("One",),
),
FlatButton(
splashColor: Colors.blueAccent,
color: Colors.blue,
onPressed: () {
_pageController.animateToPage(1, duration: Duration(milliseconds: 500), curve: Curves.ease);
},
child: Text("Two",),
),
FlatButton(
splashColor: Colors.blueAccent,
color: Colors.blue,
onPressed: () {
_pageController.animateToPage(2, duration: Duration(milliseconds: 500), curve: Curves.ease);
},
child: Text("Three",),
)
],
),
),
Expanded(
flex: 40,
child: PageView(
controller: _pageController,
children: [
Text("Page One"),
Text("Page Two"),
Text("Page Three")
],
),
),
],
),
),
);
}
}
这基本上允许您使用任何您不会切换页面的标签栏或按钮,同时保持滑动功能:-)
关于flutter - 如何在 flutter 中创建自定义 tabBar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57038170/