介紹

Flutter是Google使用Dart語言開發(fā)的移動應(yīng)用開發(fā)框架，只需一套Dart代碼就能構(gòu)建高性能、高保真的iOS和Android應(yīng)用程序，并且在排版、圖標、滾動、點擊等方面實現(xiàn)零差異。

如果上面官網(wǎng)打不開這里有Flutter 中文網(wǎng)

搭建環(huán)境

如何搭建環(huán)境已經(jīng)有很多文章了，這里就不再說了。

推薦兩個(反正我是參考這兩篇文章的)：

• Flutter 中文網(wǎng)快速開始
• CSDN Flutter 安裝和初體驗

效果

實現(xiàn)

1. 首先把 main.dart 里面自動生成代碼刪除

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

2. 創(chuàng)建 app.dart 作為主入口

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

3. 在創(chuàng)建 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 實現(xiàn)

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

---

作者：曉鋒殘月
如果喜歡請關(guān)注打賞我
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請注明出處，謝謝！

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17563.html