使用flutter开发一个CupertinoApp风格的工具类App代码示例底部是三个TAB页面。分别是工具页面、收藏页面、设置页面。其中工具TAB页面里面有可以左右切换的子tab页面有5个。分别是热门、音频、视频、图片、文件转换。

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return CupertinoApp( title: '工具类App', theme: CupertinoThemeData( primaryColor: CupertinoColors.activeBlue, ), home: HomePage(), ); } }

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }

class _HomePageState extends State { int _selectedIndex = 0;

final List _tabPages = [ ToolPage(), FavoritePage(), SettingPage(), ];

final List _tabTitles = [ '工具', '收藏', '设置', ];

@override Widget build(BuildContext context) { return CupertinoTabScaffold( tabBar: CupertinoTabBar( items: [ BottomNavigationBarItem( icon: Icon(CupertinoIcons.tool), label: '工具', ), BottomNavigationBarItem( icon: Icon(CupertinoIcons.bookmark), label: '收藏', ), BottomNavigationBarItem( icon: Icon(CupertinoIcons.settings), label: '设置', ), ], currentIndex: _selectedIndex, onTap: (index) { setState(() { _selectedIndex = index; }); }, ), tabBuilder: (context, index) { return _tabPages[index]; }, ); } }

class ToolPage extends StatefulWidget { @override _ToolPageState createState() => _ToolPageState(); }

class _ToolPageState extends State with SingleTickerProviderStateMixin { TabController _tabController;

final List _tabTitles = [ '热门', '音频', '视频', '图片', '文件转换', ];

@override void initState() { super.initState(); _tabController = TabController(length: _tabTitles.length, vsync: this); }

@override Widget build(BuildContext context) { return Scaffold( appBar: CupertinoNavigationBar( middle: Text('工具'), ), body: Column( children: [ CupertinoSegmentedControl( children: { 0: Text('左右切换'), 1: Text('热门'), 2: Text('音频'), 3: Text('视频'), 4: Text('图片'), 5: Text('文件转换'), }, groupValue: 0, onValueChanged: (value) {}, ), TabBar( controller: _tabController, tabs: [ for (var title in _tabTitles) Tab( text: title, ), ], isScrollable: true, ), Expanded( child: TabBarView( controller: _tabController, children: [ for (var title in _tabTitles) Center( child: Text(title), ), ], ), ), ], ), ); } }

class FavoritePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: CupertinoNavigationBar( middle: Text('收藏'), ), body: Center( child: Text('收藏页面'), ), ); } }

class SettingPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: CupertinoNavigationBar( middle: Text('设置'), ), body: Center( child: Text('设置页面'), ), ); } }