這次就不費話了，我們直接進入主題，新建一個項目，然後找到pubspec.yaml，然後添加包
english_words: ^3.1.4點擊Packages get
添加english_words
現在我們既可以開始寫代碼
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) {
final wordPair = new WordPair.random();
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text(wordPair.asPascalCase),
),
),
);
}
}
寫完代碼點擊閃電我們跑一跑
運行效果
添加一個 有狀態的部件（Stateful widget）
Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
Stateful widgets 持有的狀態可能在widget生命週期中發生變化. 實現一個 stateful widget 至少需要兩個類:
- 一個 StatefulWidget類。
- 一個 State類。 StatefulWidget類本身是不變的，但是 State類在widget生命週期中始終存在.
在這一步中，你將添加一個有狀態的widget-RandomWords，它創建其State類RandomWordsState。State類將最終為widget維護建議的和喜歡的單詞對。
- 添加有狀態的 RandomWords widget 到 main.dart。 它也可以在MyApp之外的文件的任何位置使用，但是本示例將它放到了文件的底部。RandomWords widget除了創建State類之外幾乎沒有其他任何東西
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
- 添加 RandomWordsState 類.該應用程序的大部分代碼都在該類中， 該類持有RandomWords widget的狀態。這個類將保存隨著用戶滾動而無限增長的生成的單詞對， 以及喜歡的單詞對，用戶通過重複點擊心形 ❤️ 圖標來將它們從列表中添加或刪除。
- 你會一步一步地建立這個類。首先，通過添加高亮顯示的代碼創建一個最小類
class RandomWordsState extends State<randomwords> {
}
- 在添加狀態類後，IDE會提示該類缺少build方法。接下來，你將添加一個基本的build方法，該方法通過將生成單詞對的代碼從MyApp移動到RandomWordsState來生成單詞對。
- 將build方法添加到RandomWordState中，如下面高亮代碼所示
class RandomWordsState extends State<randomwords> {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new Text(wordPair.asPascalCase);
}
}
- 通過下面高亮顯示的代碼，將生成單詞對代的碼從MyApp移動到RandomWordsState中
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random(); // 刪除此行
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
//child: new Text(wordPair.asPascalCase),
child: new RandomWords(),
),
),
);
}
}
重新啟動應用程序
運行效果
創建一個無限滾動ListView
這個我們直接拉取官方文檔，我就不過多解釋，因為感覺官方寫的蠻清楚的。
在這一步中，您將擴展（繼承）RandomWordsState類，以生成並顯示單詞對列表。 當用戶滾動時，ListView中顯示的列表將無限增長。 ListView的builder工廠構造函數允許您按需建立一個懶加載的列表視圖。
- 向RandomWordsState類中添加一個_suggestions列表以保存建議的單詞對。 該變量以下劃線（_）開頭，在Dart語言中使用下劃線前綴標識符，會強制其變成私有的。
- 另外，添加一個biggerFont變量來增大字體大小
class RandomWordsState extends State<randomwords> {
final _suggestions = <wordpair>[];
final _biggerFont = const TextStyle(fontSize: 18.0);
...
}
- 向RandomWordsState類添加一個 _buildSuggestions() 函數. 此方法構建顯示建議單詞對的ListView。
- ListView類提供了一個builder屬性，itemBuilder 值是一個匿名回調函數， 接受兩個參數- BuildContext和行迭代器i。迭代器從0開始， 每調用一次該函數，i就會自增1，對於每個建議的單詞對都會執行一次。該模型允許建議的單詞對列表在用戶滾動時無限增長。
- 添加如下高亮的行:
class RandomWordsState extends State<randomwords> {
...
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中顯示每個新詞對，這使您在下一步中可以生成更漂亮的顯示行
- 在RandomWordsState中添加一個_buildRow函數 :
class RandomWordsState extends State<randomwords> {
...
Widget _buildRow(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
}
- 更新RandomWordsState的build方法以使用_buildSuggestions()，而不是直接調用單詞生成庫。 更改後如下面高亮部分：
class RandomWordsState extends State<randomwords> {
...
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random(); // 刪除這兩行
return new Text(wordPair.asPascalCase);
return new Scaffold (
appBar: new AppBar(
title: new Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
}
...
}
- 更新MyApp的build方法。從MyApp中刪除Scaffold和AppBar實例。 這些將由RandomWordsState管理，這使得用戶在下一步中從一個屏幕導航到另一個屏幕時， 可以更輕鬆地更改導航欄中的的路由名稱。
- 用下面高亮部分替換最初的build方法：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
home: new RandomWords(),
);
}
}
最終代碼如下，重新新啟動應用程序或者熱重載一下。你應該看到一個單詞對列表。儘可能地向下滾動，您將繼續看到新的單詞對。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
//child: new Text(wordPair.asPascalCase),
child: new RandomWords(),
),
),
);
}
}
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
//class RandomWordsState extends State<randomwords> {
// @override
// Widget build(BuildContext contex) {
// final wordPair = new WordPair.random();
// return new Text(wordPair.asPascalCase);
// }
//}
class RandomWordsState extends State<randomwords> {
final _suggestions = <wordpair>[];
final _biggerFont = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
return new Scaffold (
// appBar: new AppBar(
// title: new Text('Startup Name Generator'),
// ),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// The itemBuilder callback is called once per suggested word pairing,
// and places each suggestion into a ListTile row.
// For even rows, the function adds a ListTile row for the word pairing.
// For odd rows, the function adds a Divider widget to visually
// separate the entries. Note that the divider may be difficult
// to see on smaller devices.
itemBuilder: (context, i) {
// Add a one-pixel-high divider widget before each row in theListView.
if (i.isOdd) return new Divider();
// The syntax "i ~/ 2" divides i by 2 and returns an integer result.
// For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
// This calculates the actual number of word pairings in the ListView,
// minus the divider widgets.
final index = i ~/ 2;
// If you've reached the end of the available word pairings...
if (index >= _suggestions.length) {
// ...then generate 10 more and add them to the suggestions list.
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
}
);
}
Widget _buildRow(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
}
然後我們就生成了一個無線滾動的listvIew。
無線滾動的listvIew
明天寫交互。其實可以直接看文檔，官方的文檔還是寫的比較清楚的。
分享到:
閱讀更多 我有一隻小蟑螂 的文章
