介绍
Flutter是Google使用Dart语言开发的移动应用开发框架,只需一套Dart代码就能构建高性能、高保真的iOS和Android应用程序,并且在排版、图标、滚动、点击等方面实现零差异。
如果上面官网打不开这里有Flutter 中文网
搭建环境
推荐两个(反正我是参考这两篇文章的):
效果
实现
- 首先把
main.dart
里面自动生成代码删除
import 'package:flutter/material.dart';
import 'douban/app.dart';
void main(){
runApp(new DoubanApp());
}
- 创建
app.dart
作为主入口
class DoubanApp extends StatefulWidget {
@override
DoubanAppState createState() => new DoubanAppState();
}
class DoubanAppState extends State<DoubanApp>{
@override
Widget build(BuildContext context) {
}
}
- 在创建
movie.dart
、book.dart
、music.dart
三个页面
import 'package:flutter/material.dart';
class Movie extends StatefulWidget {
@override
MovieState createState() => new MovieState();
}
class MovieState extends State<Movie> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("电影"),
),
body: new Center(
child: new Text('Hello Movie'),
),
),
);
}
}
- 在
app.dart
中使用TabBarView
和bottomNavigationBar
中TabBar
实现
new TabBarView(
controller: controller,
children: [
new Movie(),
new Book(),
new Music(),
],
)
new TabBar(
controller: controller,
tabs: [
new Tab(
text: "电影",
icon: new Icon(Icons.movie)),
new Tab(
text: "图书",
icon: new Icon(Icons.book)),
new Tab(
text: "音乐",
icon: new Icon(Icons.music_video)),
],
),
- app.dart 完整代码
import 'package:flutter/material.dart';
import 'package:flutter_douban/douban/movie.dart';
import 'package:flutter_douban/douban/book.dart';
import 'package:flutter_douban/douban/music.dart';
class DoubanApp extends StatefulWidget {
@override
DoubanAppState createState() => new DoubanAppState();
}
class DoubanAppState extends State<DoubanApp>
with SingleTickerProviderStateMixin {
TabController controller;
@override
void initState() {
controller = new TabController(length: 3, vsync: this);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new TabBarView(
controller: controller,
children: [
new Movie(),
new Book(),
new Music(),
],
),
bottomNavigationBar: new Material(
color: Colors.blue,
child: new TabBar(
controller: controller,
tabs: [
new Tab(
text: "电影",
icon: new Icon(
Icons.movie,
),
),
new Tab(
text: "图书",
icon: new Icon(
Icons.book,
),
),
new Tab(
text: "音乐",
icon: new Icon(
Icons.music_video,
),
),
],
),
),
),
);
}
}