以下是一个使用Flutter开发的示例工具类App,包含三个TAB页面,分别是热门、音频、视频、图片、文件转换、收藏和设置页面。使用了Cupertino风格的UI。

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

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

class ToolApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tool App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ToolHomePage(),
    );
  }
}

class ToolHomePage extends StatefulWidget {
  @override
  _ToolHomePageState createState() => _ToolHomePageState();
}

class _ToolHomePageState extends State<ToolHomePage> {
  int _selectedTabIndex = 0;

  void _onTabTapped(int index) {
    setState(() {
      _selectedTabIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tool App'),
      ),
      body: _buildBody(),
      bottomNavigationBar: _buildBottomNavigationBar(),
    );
  }

  Widget _buildBody() {
    switch (_selectedTabIndex) {
      case 0:
        return _buildHotTab();
      case 1:
        return _buildAudioTab();
      case 2:
        return _buildVideoTab();
      case 3:
        return _buildImageTab();
      case 4:
        return _buildFileConvertTab();
      case 5:
        return _buildFavoritesTab();
      case 6:
        return _buildSettingsTab();
      default:
        return Container();
    }
  }

  Widget _buildBottomNavigationBar() {
    return CupertinoTabBar(
      currentIndex: _selectedTabIndex,
      onTap: _onTabTapped,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.whatshot),
          label: '热门',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.audiotrack),
          label: '音频',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.video_library),
          label: '视频',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.image),
          label: '图片',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.file_upload),
          label: '文件转换',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite),
          label: '收藏',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          label: '设置',
        ),
      ],
    );
  }

  Widget _buildHotTab() {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.whatshot),
            label: '热门',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.trending_up),
            label: '趋势',
          ),
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        return Center(
          child: Text(
            index == 0 ? '热门' : '趋势',
            style: Theme.of(context).textTheme.headline6,
          ),
        );
      },
    );
  }

  Widget _buildAudioTab() {
    return Center(
      child: Text(
        '音频',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }

  Widget _buildVideoTab() {
    return Center(
      child: Text(
        '视频',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }

  Widget _buildImageTab() {
    return Center(
      child: Text(
        '图片',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }

  Widget _buildFileConvertTab() {
    return Center(
      child: Text(
        '文件转换',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }

  Widget _buildFavoritesTab() {
    return Center(
      child: Text(
        '收藏',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }

  Widget _buildSettingsTab() {
    return Center(
      child: Text(
        '设置',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }
}
使用flutter开发一个工具类App代码示例要有三个TAB页面。第一个TAB页面里面有可以左右切换的子tab页面有5个。分别是热门、音频、视频、图片、文件转换。第二个TAB为收藏页面。第三个TAB为app的设置页面。需要iOS Cupertino风格的。

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

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