文章概述
上一篇文章我們初體驗了Flutter，瞭解瞭如何建立專案與熱載入。本文我們通過完成一個列表的例子來進一步感受Flutter的使用效果。通過閱讀本文你講了解如下內容：
- 如何使用Android Studio開發Flutter應用
- 如何引入第三方庫
- 瞭解Flutter專案的主要結構
示例效果如下
建立專案
開啟Android Studio，File->New->New Flutter Project… 選擇 Flutter Application， 輸入專案名稱、位置、描述等資訊，選擇Next，輸入公司資訊，點選FInish完成。專案開啟後我們主要用如下圖的功能：
引入第三方庫
列表專案我們需要使用第三庫來實現，Flutter的第三方庫依賴放在pubspec.yaml檔案中。 開啟此檔案，鍵入如下內容：
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
english_words: ^3.1.0
dev_dependencies:
複製程式碼cupertino_icons 是一個字型圖示庫，english_words 是一個生成英文單詞的庫。
之後再命令列中執行如下命令
~/my/flutter/flutter_frist $ flutter packages get
複製程式碼你可能會遇到內容下載不下來的問題，這是牆的原因，通過修改國內映象可以解決，
~/my/flutter/flutter_frist $ export PUB_HOSTED_URL=https://pub.flutter-io.cn
~/my/flutter/flutter_frist $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼再次執行 flutter packages get 即可獲取依賴。
列表實現
準備好了上面內容，我們就可以去寫程式碼完成今天的任務了。開啟 main.dart ，清空裡面的程式碼。輸入如下程式碼：
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; //引入第三方庫標頭檔案
void main() => runApp(MyApp()); //專案入口
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) { //啟動專案會自動執行build方法。
return MaterialApp(
title: "Startup Name Generator",
home: RandomWord()
);
}
}
複製程式碼這段程式碼中我們引入了第三方檔案，建立專案入口。
StatelessWidget 繼承自 Widget。Widget是Flutter框架中的核心元件，StatelessWidget表示的是一個不可變的Widget。
當然上面程式碼還不能執行，我們需要實現RandomWord。
class RandomWordsStatus extends State<RandomWord> {
Widget _buildRow(WordPair pair) {
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar( //導航欄
title: Text('Startup Name Generator'), //標題
actions: <Widget>[ //按鈕
IconButton(icon: Icon(Icons.list), onPressed: _pushSaved ,)
],
),
// body: _buildSuggestions(),
);
}
}
}
class RandomWord extends StatefulWidget {
@override
RandomWordsStatus createState() => RandomWordsStatus();
}
複製程式碼此時執行專案，你可得到一個帶有導航條的空白頁。
接下來我們完成列表
Widget _buildSuggestions() {
_suggestions.clear();
_suggestions.addAll(generateWordPairs().take(20)); // 資料來源 隨機生成20個單詞
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: _suggestions.length,
itemBuilder: (context, i) {
if (i.isOdd) return Divider(); //顯示分割線
return _buildRow(_suggestions[i]); //顯示文件
});
}
//渲染cell
Widget _buildRow(WordPair pair) {
final bool alreadySaved = _saved.contains(pair);
return ListTile (
title: Text(pair.asPascalCase,
style: _biggerFont,
),
trailing: Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors
.red : null,
),
onTap: () { //點選事件
setState( //此方法自動重新整理介面。
(){
if(alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
}
);
},
);
複製程式碼到這一步我們就能看到一個列表了。
下面我們實現點選事件。
void _pushSaved() {
Navigator.of(context).push( //push下一個頁面
MaterialPageRoute<void>(
builder: (BuildContext context) {
//
final Iterable<ListTile> tiles = _saved.map(
(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
);
final List<Widget> divided = ListTile
.divideTiles(
context: context,
tiles: tiles
).toList();
return Scaffold(
appBar: AppBar(title: Text('saved Suggestions'),),
body: ListView(children:
divided,),
);
}
)
);
}
複製程式碼總結
OK，到此我們的列表頁面寫完了，不知道你的程式有沒有跑起來，你可以參照我的原始碼來完善你的程式碼。
本文參考資料Flutter官方Demo，體驗了Flutter的開發流程，個人覺得Flutter的開發體驗要比React Native高效的多。當然本文中還有很多我們不明白的地方，在之後的文章中都會一一講解。如果你對Flutter有興趣可以關注我的公眾號。