参考
1.main.dart
import 'package:flutter/material.dart';
import 'app.dart';
//main函数的runApp方法设置首页界面
void main() {
runApp(new MusicPlayer());
}
2.app.dart
import 'package:flutter/material.dart';
import 'package:music/SettingNavigation.dart';
import 'package:music/SquareNavigation.dart';
import 'package:music/MusicNavigation.dart';
/*
* 主界面
*/
//继承于一个有状态的组件,状态会在widget的生命周期中发生变化;如果是无状态的组件,里面的值不可变
class MusicPlayer extends StatefulWidget {
@override
//创建状态,在状态里面写布局
MusicPlayerState createState() => new MusicPlayerState();
}
class MusicPlayerState extends State<MusicPlayer> with SingleTickerProviderStateMixin {
//导航控制器
late TabController controller;
@override
void initState() {
//初始化,底部的三个导航按键
controller = new TabController(length: 3, vsync: this);
}
@override
void dispose() {
//销毁
controller.dispose();
super.dispose();
}
//Widget用于构建UI
@override
Widget build(BuildContext context) {
//写法是:返回的东西是什么什么什么什么,MaterialApp包含了许多Widget
return new MaterialApp(
//Scaffold相当于布局的容器
home: new Scaffold(
//body是Scaffold的属性,当前界面所显示的主要内容
body: new TabBarView(
//内容三个按键对应的三个fragment
controller: controller,
children: <Widget>[
new MusicPage(),
new SquarePage(),
new SettingPage(),
],
),
//bottomNavigationBar:显示在底部的导航栏按钮栏
bottomNavigationBar: new Material(
color: Colors.white,
child: new TabBar(
controller: controller,
//选中标签时的颜色
labelColor: Colors.deepPurpleAccent,
//没有选中标签时的颜色
unselectedLabelColor: Colors.black26,
//tabs也可以认为是一个Widget
tabs: <Widget>[
new Tab(
text: "音乐",
icon: new Icon(Icons.brightness_5),
),
new Tab(
text: "广场",
icon: new Icon(Icons.map),
),
new Tab(
text: "设定",
icon: new Icon(Icons.directions_run),
),
],
),
),
),
);
}
}
3.MusicNavigation.dart
import 'package:flutter/material.dart';
/*
* 音乐界面,相当于fragment
*/
//该界面创建有状态的组件
class MusicPage extends StatefulWidget {
@override
//状态
PlaygroundState createState() => new PlaygroundState();
}
class PlaygroundState extends State<MusicPage> {
@override
Widget build(BuildContext context) {
//MaterialApp-Scaffold
return new MaterialApp(
//Scaffold相当于布局的容器
home: new Scaffold(
//appBar是状态栏
appBar: new AppBar(
//设置文字
title: new Text("音乐"),
//设置appbar背景颜色
backgroundColor: Color.fromARGB(255, 119, 136, 213),
//设置标题是否局中
centerTitle: true,
),
//body就是写界面了
body: new Center(
child: new Text('音乐'),
),
),
);
}
}
4.SettingNavigation.dart
import 'package:flutter/material.dart';
/*
*设定界面,相当于fragment
*/
class SettingPage extends StatefulWidget {
@override
PlaygroundState createState() => new PlaygroundState();
}
class PlaygroundState extends State<SettingPage> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("设定"),
backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色
centerTitle: true, //设置标题是否局中
),
body: new Center(
child: new Text('设定'),
),
),
);
}
}
5.SquareNavigation.dart
import 'package:flutter/material.dart';
/*
*广场界面,相当于fragment
*/
class SquarePage extends StatefulWidget {
@override
PlaygroundState createState() => new PlaygroundState();
}
class PlaygroundState extends State<SquarePage> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("广场"),
backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色
centerTitle: true, //设置标题是否局中
),
body: new Center(
child: new Text('广场'),
),
),
);
}
}