使用flutter开发一个工具类App代码示例要有三个TAB页面。第一个TAB页面里面有可以左右切换的子tab页面有5个。分别是热门、音频、视频、图片、文件转换。第二个TAB为收藏页面。第三个TAB为app的设置页面。需要CupertinoApp风格的。
以下是一个简单的示例:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HotPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('热门'),
);
}
}
class AudioPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('音频'),
);
}
}
class VideoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('视频'),
);
}
}
class ImagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('图片'),
);
}
}
class FileConvertPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('文件转换'),
);
}
}
class FavoritePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('收藏'),
);
}
}
class SettingsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('设置'),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _tabPages = [
CupertinoTabView(builder: (context) => HotPage()),
CupertinoTabView(builder: (context) => AudioPage()),
CupertinoTabView(builder: (context) => VideoPage()),
CupertinoTabView(builder: (context) => ImagePage()),
CupertinoTabView(builder: (context) => FileConvertPage()),
];
final List<BottomNavigationBarItem> _tabItems = [
BottomNavigationBarItem(icon: Icon(Icons.whatshot), label: '热门'),
BottomNavigationBarItem(icon: Icon(Icons.audiotrack), label: '音频'),
BottomNavigationBarItem(icon: Icon(Icons.video_call), label: '视频'),
BottomNavigationBarItem(icon: Icon(Icons.image), label: '图片'),
BottomNavigationBarItem(icon: Icon(Icons.file_copy), label: '文件转换'),
];
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: _tabItems,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
tabBuilder: (context, index) {
return _tabPages[index];
},
),
routes: {
'/favorite': (context) => CupertinoPageScaffold(child: FavoritePage()),
'/settings': (context) => CupertinoPageScaffold(child: SettingsPage()),
},
);
}
}
这个示例中,我们创建了五个子页面,分别是热门、音频、视频、图片、文件转换,以及收藏和设置页面。我们使用了CupertinoTabScaffold和CupertinoTabBar来创建三个TAB页面,其中第一个TAB页面里面又有五个子TAB页面。我们还使用了CupertinoPageScaffold来创建收藏和设置页面,并在routes中注册了这两个页面。
在CupertinoTabBar中,我们使用了currentIndex属性来控制当前TAB页面的索引,使用onTap回调来处理TAB切换。在tabBuilder中,我们根据索引返回对应的页面。
最终,我们将整个应用包装在了CupertinoApp中,以实现Cupertino风格的UI。
原文地址: http://www.cveoy.top/t/topic/CWT 著作权归作者所有。请勿转载和采集!