第 4 章 步驟 3:添加一個(gè)按鈕

2018-02-24 16:04 更新

在這一步中,你將添加一個(gè)按鈕。應(yīng)用啟用時(shí),文本字段中沒有文本。用戶單擊按鈕時(shí),應(yīng)用將顯示出 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>
...
  • 按鈕有一個(gè) ID 叫做 generateButton ,所以Dart可以找到它。

編輯 piratebadge.dart

import 'dart:html';
ButtonElement genButton;
  • 按鈕元素是 dart:html 中眾多元素的一個(gè)。
  • 變量,包括數(shù)字,如果沒有實(shí)質(zhì)內(nèi)容,就為null。

    void main() {
    querySelector('#inputName').onInput.listen(updateBadge);
    genButton = querySelector('#generateButton');
    genButton.onClick.listen(generateBadge);
    }

  • 注冊一個(gè) click 事件

    ...
    void setBadgeName(String newName) {
    querySelector('#badgeName').text = newName;
    }

  • 這個(gè)方法更新了 HTML 頁面

為按鈕實(shí)現(xiàn)一個(gè)點(diǎn)擊監(jiān)聽

...
void generateBadge(Event e) {
  setBadgeName('Anne Bonney');
}
  • 這個(gè)方法將 badgeName 的顯示內(nèi)容設(shè)置為了 Anne Bonney 。

修改 updateBadge() 方法,在其中調(diào)用 setBadgeName() 方法

void updateBadge(Event e) {
  String inputName = (e.target as InputElement).value;
  setBadgeName(inputName);
}
  • 將文本框輸入的值賦值給一個(gè)本地 String 變量

updateBadge() 方法中添加一個(gè) if-else 結(jié)構(gòu)

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 庫,這個(gè)庫在每一個(gè) Dart程序中都被自動(dòng)添加。

  • Dart 擁有公共的語言結(jié)構(gòu),例如 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 操作。其結(jié)果和下面代碼結(jié)果一樣

    genButton.disabled = false;
    genButton.text = 'Aye! Gimme a name!';

運(yùn)行應(yīng)用

保存你的文件

右擊 piratebadge.html 選擇 Run in Dartium

和下面的實(shí)際比較一下。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號