以下是一个示例代码,展示了如何在不使用Scaffold的情况下创建一个带有TabBar和TabView的页面:
import 'package:flutter/material.dart';
class MyTabbedPage extends StatefulWidget {
@override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tabbed Page'),
),
body: Column(
children: [
TabBar(
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
Center(child: Text('Tab 1 content')),
Center(child: Text('Tab 2 content')),
Center(child: Text('Tab 3 content')),
],
),
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyTabbedPage(),
));
}
在此示例中,我们创建了一个名为MyTabbedPage
的有状态的小部件,它继承自StatefulWidget
。在_MyTabbedPageState
类中,我们使用SingleTickerProviderStateMixin
来创建一个TabController
,它用于管理TabBar和TabView之间的切换。
在initState
方法中,我们初始化TabController并设置其长度为3(即3个选项卡)。
在dispose
方法中,我们释放TabController资源。
在build
方法中,我们创建了一个Column小部件,其中包含TabBar和TabView。TabBar用于显示选项卡,并使用TabController进行控制。TabView用于显示选项卡对应的内容,并使用同一个TabController来控制切换。
最后,在main函数中,我们将MyTabbedPage小部件作为home传递给MaterialApp,从而使其成为应用程序的根小部件。