使用flutter开发一个工具类App代码示例要有三个TAB页面。第一个TAB页面里面有可以左右切换的子tab页面有5个。分别是热门、音频、视频、图片、文件转换。第二个TAB为收藏页面。第三个TAB为app的设置页面。
以下是一个简单的示例代码,实现了一个具有三个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();
}
}
原文地址: https://www.cveoy.top/t/topic/CUu 著作权归作者所有。请勿转载和采集!