我不知道如何使标签栏像这样在我的Flutter网我能有一个主意或怎么叫这个模式。示例视频:https://youtu.be/A3ttwYljg_8
s3fp2yjn1#
你只需要给TabBarView实体,剩下的就由flutter自己来处理了。样本代码:-
TabBarView
TabBarView( children: <Widget>[ Tabbar 1 body ...., //1st index, 1st tab Tabbar 2 body ...., //2nd index, 2nd tab Tabbar 3 body ...., //... Tabbar 4 body ...., //... Tabbar 5 body .... //... ] )
选项卡栏视图完整代码:-
import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); static const String _title = 'Flutter Code Sample'; @override Widget build(BuildContext context) { return const MaterialApp( title: _title, home: MyStatelessWidget(), ); } } class MyStatelessWidget extends StatefulWidget { const MyStatelessWidget({super.key}); @override State<MyStatelessWidget> createState() => _MyStatelessWidgetState(); } class _MyStatelessWidgetState extends State<MyStatelessWidget> { @override Widget build(BuildContext context) { return DefaultTabController( initialIndex: 0, length: 5, child: Scaffold( appBar: AppBar( backgroundColor: const Color.fromARGB(255, 107, 179, 234), title: const Text('TabBar Widget'), bottom: const TabBar( labelColor: Colors.black, indicator: BoxDecoration(color: Colors.yellow), labelPadding: EdgeInsets.only(bottom: 5), indicatorPadding: EdgeInsets.only(left: 30, right: 30, bottom: 10, top: 5), tabs: <Widget>[ SizedBox( width: 70, height: 40, child: Center( child: Tab( text: "Tab 1", ), ), ), SizedBox( width: 70, height: 40, child: Tab( text: "Tab 2", ), ), SizedBox( width: 70, height: 40, child: Tab( text: "Tab 3", ), ), SizedBox( width: 70, height: 40, child: Tab( text: "Tab 4", ), ), SizedBox( width: 70, height: 40, child: Tab( text: "Tab 5", ), ), ], ), ), body: TabBarView( children: <Widget>[ Column( children: [ Expanded( child: Container( color: Colors.red, )), Expanded( child: Container( color: Colors.purple, )) ], ), Column( children: [ Expanded( child: Container( color: const Color.fromARGB(255, 9, 79, 135), )), Expanded( child: Container( color: Colors.purple, )) ], ), Column( children: [ Expanded( child: Container( color: const Color.fromARGB(255, 144, 255, 54), )), Expanded( child: Container( color: Colors.purple, )) ], ), Column( children: [ Expanded( child: Container( color: const Color.fromARGB(255, 109, 40, 36), )), Expanded( child: Container( color: Colors.yellow, )) ], ), Column( children: [ Expanded( child: Container( color: Colors.green, )), Expanded( child: Container( color: Colors.yellow, )) ], ), ], ), ), ); } }
输出:-
1条答案
按热度按时间s3fp2yjn1#
你只需要给
TabBarView
实体,剩下的就由flutter自己来处理了。样本代码:-
选项卡栏视图
完整代码:-
输出:-