在這一步中,你將添加一個按鈕。應用啟用時,文本字段中沒有文本。用戶單擊按鈕時,應用將顯示出 Anne Bonney 的字樣。
## 編輯 `piratebadge.html`
...
<div class="widgets">
<div>
<input type="text" id="inputName" maxlength="15">
</div>
<div>
<button id="generateButton">Aye! Gimme a name!</button>
</div>
</div>
...
- 按鈕有一個 ID 叫做 `generateButton` ,所以Dart可以找到它。
## 編輯 piratebadge.dart
import 'dart:html';
ButtonElement genButton;
- 按鈕元素是 `dart:html` 中眾多元素的一個。
- 變量,包括數字,如果沒有實質內容,就為null。
void main() {
querySelector('#inputName').onInput.listen(updateBadge);
genButton = querySelector('#generateButton');
genButton.onClick.listen(generateBadge);
}
- 注冊一個 `click` 事件
...
void setBadgeName(String newName) {
querySelector('#badgeName').text = newName;
}
- 這個方法更新了 HTML 頁面
為按鈕實現一個點擊監聽
...
void generateBadge(Event e) {
setBadgeName('Anne Bonney');
}
- 這個方法將 `badgeName` 的顯示內容設置為了 Anne Bonney 。
修改 `updateBadge()` 方法,在其中調用 `setBadgeName()` 方法
void updateBadge(Event e) {
String inputName = (e.target as InputElement).value;
setBadgeName(inputName);
}
- 將文本框輸入的值賦值給一個本地 String 變量
在 `updateBadge()` 方法中添加一個 if-else 結構
void updateBadge(Event e) {
String inputName = (e.target as InputElement).value;
setBadgeName(inputName);
if (inputName.trim().isEmpty) {
// To do: add some code here.
} else {
// To do: add some code here.
}
}
-
`String` 來源于 `dart:core` 庫,這個庫在每一個 Dart程序中都被自動添加。
-
Dart 擁有公共的語言結構,例如 `if-else`。
void updateBadge(Event e) {
String inputName = (e.target as InputElement).value;
setBadgeName(inputName);
if (inputName.trim().isEmpty) {
genButton..disabled = false
..text = 'Aye! Gimme a name!';
} else {
genButton..disabled = true
..text = 'Arrr! Write yer name!';
}
}
- `updateBadge()` 的代碼在按鈕元素上使用 cascade 操作。其結果和下面代碼結果一樣
genButton.disabled = false;
genButton.text = 'Aye! Gimme a name!';
## 運行應用
保存你的文件
右擊 `piratebadge.html` 選擇 `Run in Dartium`。
和下面的實際比較一下。

**圖片 4.1** 運行