在這一步中,你將在你的 App 中添加一個輸入框。作為一個用戶文本輸入框,Dart可以從中取得一個值。
在 class 為 widgets 的 <div>
中添加一個 <input>
標簽。
...
<div class="widgets">
<div>
<input type="text" id="inputName" maxlength="15">
</div>
</div>
...
<input>
標簽的 id 是 inputName
。Dart 使用 #inputName
的 CSS 選擇器從 DOM 中選擇這個元素在文件的頂部引入 dart:html
庫。
import 'dart:html';
這里從 dart:html
引入了所有的類和其他資源。
不要擔心臃腫的代碼。構建程序會幫你進一步簡化代碼。
dart:html
庫包含了所有DOM元素類型。
一會兒你將會使用一些關鍵字來導入一些特殊的庫。
Dart 編輯器會提示你導入的庫是未被使用的,沒關系,下一步我們就會修復它。
添加一個方法來監(jiān)聽輸入框
void main() {
querySelector('#inputName').onInput.listen(updateBadge);
}
在 dart:html
中定義的 querySelector()
方法,獲取到了指定的 DOM。這里,通過#inputName選擇器獲取到了指定的輸入框。
querySelector()
方法的返回值是一個 DOM 元素。
鼠標和鍵盤事件被存放在一個流中。
提供一個異步的流數(shù)據(jù)序列。使用 listen()
方法,可以從流中得到安全的數(shù)據(jù)。
onInput.listen()
監(jiān)聽到了輸入框的流事件。當監(jiān)聽到時,updateBadge()
方法被調用。
當用戶按下一個鍵時,將產(chǎn)生一個事件。
你可以用單引號或雙引號來創(chuàng)建一個字符串。
Dart 編輯器提示你有個方法沒有被創(chuàng)建,讓我們來解決它。
用一個 top-level
級別的方法來實現(xiàn)一個事件方法。
...
void updateBadge(Event e) {
querySelector('#badgeName').text = e.target.value;
}
這個函數(shù)將 badgename
元素的值設置成文本輸入字段的值。
事件 e
是 updateBadge
函數(shù)的參數(shù). 這個參數(shù)的名字是 e
;類型是一個 Event
修復警告信息
...
void updateBadge(Event e) {
querySelector('#badgeName').text = (e.target as InputElement).value;
}
e.target
是產(chǎn)生事件的輸入源。保存你的文件
右擊 piratebadge.html
選擇 Run in Dartium
。
和下面的示例比較一下。
更多建議: