介绍

Flutter是Google使用Dart语言开发的移动应用开发框架，只需一套Dart代码就能构建高性能、高保真的iOS和Android应用程序，并且在排版、图标、滚动、点击等方面实现零差异。

如果上面官网打不开这里有Flutter 中文网

搭建环境

如何搭建环境已经有很多文章了，这里就不再说了。

推荐两个(反正我是参考这两篇文章的)：

• Flutter 中文网快速开始
• CSDN Flutter 安装和初体验

效果

实现

1. 首先把 main.dart 里面自动生成代码删除

import 'package:flutter/material.dart';import 'douban/app.dart';void main(){ runApp(new DoubanApp()); }

2. 创建 app.dart 作为主入口

class DoubanApp extends StatefulWidget {@override DoubanAppState createState() => new DoubanAppState(); }class DoubanAppState extends State<DoubanApp>{ @override Widget build(BuildContext context) {} } 

3. 在创建 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'), ), ), ); } } 

4. 在 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)), ], ),

5. 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, ), ), ], ), ), ), ); } }

---

作者：晓锋残月
如果喜欢请关注打赏我
版权声明：本文为博主原创文章，转载请注明出处，谢谢！

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/17563.html