以下是一个简单的示例:

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()),
      },
    );
  }
}

这个示例中,我们创建了五个子页面,分别是热门、音频、视频、图片、文件转换,以及收藏和设置页面。我们使用了CupertinoTabScaffoldCupertinoTabBar来创建三个TAB页面,其中第一个TAB页面里面又有五个子TAB页面。我们还使用了CupertinoPageScaffold来创建收藏和设置页面,并在routes中注册了这两个页面。

CupertinoTabBar中,我们使用了currentIndex属性来控制当前TAB页面的索引,使用onTap回调来处理TAB切换。在tabBuilder中,我们根据索引返回对应的页面。

最终,我们将整个应用包装在了CupertinoApp中,以实现Cupertino风格的UI。

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

原文地址: http://www.cveoy.top/t/topic/CWT 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录