介紹

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://www.junxiaosheng.cn/17563.html