我正在使用Flutter应用程序,并尝试将一个细分添加到我的应用程序 . 是否有可能在Flutter中实现它 . 所以我想为2个按钮设置2个不同的小部件 . 它类似于Flutter中的TabBar或本机应用程序中的Segment
正如您所尝试的那样,您可以轻松地使用 TabBarView 实现它 . 下面的代码显示了如何实现它的非常基本的实现 .
TabBarView
例:
class Example extends StatefulWidget { @override _ExampleState createState() => new _ExampleState(); } class _ExampleState extends State<Example> with SingleTickerProviderStateMixin { // TabController to control and switch tabs TabController _tabController; // Current Index of tab int _currentIndex = 0; @override void initState() { super.initState(); _tabController = new TabController(vsync: this, length: 2, initialIndex: _currentIndex); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Example"), ), body: new Column( children: <Widget>[ new Padding( padding: const EdgeInsets.symmetric(vertical: 20.0), child: new Container( decoration: new BoxDecoration(border: new Border.all(color: Colors.blue)), child: new Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ // Sign In Button new FlatButton( color: _currentIndex == 0 ? Colors.blue : Colors.white, onPressed: () { _tabController.animateTo(0); setState(() { _currentIndex = 0; }); }, child: new Text("SignIn"), ), // Sign Up Button new FlatButton( color: _currentIndex == 1 ? Colors.blue : Colors.white, onPressed: () { _tabController.animateTo(1); setState(() { _currentIndex = 1; }); }, child: new Text("SignUp"), ) ], ), ), ), new Expanded( child: new TabBarView( controller: _tabController, // Restrict scroll by user physics: const NeverScrollableScrollPhysics(), children: [ // Sign In View new Center( child: new Text("SignIn"), ), // Sign Up View new Center( child: new Text("SignUp"), ) ]), ) ], ), ); } }
希望有所帮助!
1 回答
正如您所尝试的那样,您可以轻松地使用
TabBarView
实现它 . 下面的代码显示了如何实现它的非常基本的实现 .例:
希望有所帮助!