以下是一个简单的示例代码,实现了一个具有三个tab的工具类app,第一个tab有5个子tab,第二个tab是收藏页面,第三个tab是设置页面。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toolbox',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Toolbox'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

  TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "热门"),
            Tab(text: "音频"),
            Tab(text: "视频"),
            Tab(text: "图片"),
            Tab(text: "文件转换"),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text("热门")),
          Center(child: Text("音频")),
          Center(child: Text("视频")),
          Center(child: Text("图片")),
          Center(child: Text("文件转换")),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.star), label: "收藏"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}
使用flutter开发一个工具类App代码示例要有三个TAB页面。第一个TAB页面里面有可以左右切换的子tab页面有5个。分别是热门、音频、视频、图片、文件转换。第二个TAB为收藏页面。第三个TAB为app的设置页面。

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

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