import ‘package:flutter/material.dart’;
import ‘package:english_words/english_words.dart’;
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Startup Name Generator’,
theme: new ThemeData(
primaryColor: Colors.yellow,//改變主題的顏色
),
home: new RandomWords(),
);
}
}
//RandomWords除了創建State類，沒有任何其他的東西
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
//RandomWordsState存放主要的代碼
class RandomWordsState extends State < RandomWords > {
//_suggestions列表，保存建議的單詞對Dart語言中使用下劃線前綴標識符，會強制其變成私有的。另外添加biggerFont變量來增大字體大小。
final _suggestions = < WordPair >[];
//添加一個_saved Set集合到RandomWordState。這個集合存儲用戶喜歡（收藏）的單詞對。在這里Set比List更合適，因為Set中不允許重復的值
final _saved = new Set< WordPair >();
//字體大小設置
final _biggerFont = const TextStyle(fontSize: 18.0);
@override
//build
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Startup Name Generator’),
//提示: 某些widget屬性需要單個widget（child），而其它一些屬性，如action，需要一組widgets(children），用方括號[]表示。
//在RandomWordsState的build方法中為AppBar添加一個列表圖標。當用戶點擊列表圖標時，包含收藏夾的新路由頁面入棧顯示:
actions: < Widget >[
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)
],
),
body: _buildSuggestions(),//本方法顯示建議單詞對
);
}

//listView類提供一個builder屬性，itemBuilder值是一個匿名回調函數，接受兩個參數-BuildContext和行迭代器i，迭代器從0開始，每次調用一次該函數，i就會自增1，對每個建議的單詞對會執行一次。該模型對用戶滾動式無限增長。
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
//每一個建議的單詞對都會調用一次itemBuilder ，然后將單詞對添加到ListTile行中
//在偶數行，該函數會為單詞對添加一個ListTile row.
//對于奇數行，該函數會添加一個分割線widget，來分割相鄰的詞對
//小屏幕上，分割線會看起來比較吃力
itemBuilder: (context, i) {
//每一列前，添加一個1像素高的分割線widget
if (i.isOdd) return new Divider();
//i ~/ 2表示i/2,但返回值是整型（向下取整），比如i=1,2,3,4,5時，結果為0,1,1,2,2，這可以計算出ListView中減去分隔線后的實際單詞對數量
final index = i ~/ 2;
//如果是建議列表中最后一個單詞對
if (index >= _suggestions.length) {
//接著在生成10個單詞對，然后添加到建議列表
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
},
);
}
//對于每一個單詞對，_buildSuggestions函數都會調用一次_BuildRow。這個函數在ListTile中顯示每個新詞對，這可以讓你在下一步中可以生成漂亮的顯示行_buildRow函數。
Widget _buildRow(WordPair pair) {
//_buildRow()中添加alreadySaved來檢查確保單詞對還沒有添加到收藏夾中
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
//同時在_buildRow()中，添加一個心形圖標到ListTiles以啟用收藏的功能 。接下來就能給心形圖標添加交互功能了，重新啟動，就能在每一行看到心形了，但是他們還沒有交互（點擊）
trailing: new Icon(
alreadySaved ? Icons.adb: Icons.stars,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
//調用setState()函數來通知框架狀態已經改變了，即是點擊心形收藏，再次點擊從收藏夾中刪除
setState(
() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
},
);
},
);
}
//提示: 在Flutter的響應式風格的框架中，調用setState() 會為State對象觸發build()方法，從而導致對UI的更新

//向RandomWordsState類添加一個 _pushSaved() 方法
當用戶點擊導航欄中的列表圖標時，建立一個路由，并將其推入到導航管理器棧中。
此操作會切換頁面已顯示新路由。
新頁面的內容在MaterialPageRoute的builder屬性中構建，builder是一個匿名函數。
void _pushSaved() {
//添加Navigator.push調用，這使路由入棧（路由入棧皆指推入到導航管理器的棧）
Navigator.of(context).push(
//添加MaterialPageRoute及其Builder
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
//ListTile的divideTiles()方法在每個ListTile之間添加1像素的分割線。該divided變量持有最終的列表項。
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
//builder返回一個Scaffold，其中包含名為“Saved Suggestions”的新路由的應用欄。
新路由的Body由包含ListTiles行的ListView組成；每行通過一個分割線分隔
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Saved Suggestions’),
),
body: new ListView(children: divided),
);
},
),
);
}
}

總結

以上是生活随笔為你收集整理的flutter项目：启动名称生成器（代码解析）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。