NativeScript - 控制元件

NativeScript 提供了一套豐富的使用者介面元件，稱為“控制元件”。每個控制元件都執行特定的任務，並帶有一組方法。在本節中，我們將詳細瞭解 NativeScript 控制元件。

按鈕

按鈕是一個用於執行點選事件操作的元件。當用戶點選按鈕時，它會執行相應的操作。其定義如下：

<Button text="Click here!" tap="onTap"></Button>

讓我們在我們的 BlankNgApp 中新增按鈕，如下所示：

步驟 1

開啟 **src\app\home\home.component.html**。這是我們主頁元件的 UI 設計頁面。

步驟 2

在 **GridLayout** 元件內新增一個按鈕。完整程式碼如下：

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!"></button> 
</GridLayout>

輸出

以下是按鈕的輸出：

步驟 3

我們可以使用如下所示的 CSS 對按鈕進行樣式設定：

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!" class="-primary"></button> 
</GridLayout>

這裡，**primary** 類用於表示主按鈕。

輸出

以下是 **ButtonPrimary** 的輸出：

步驟 4

NativeScript 提供了格式化選項，以便在按鈕中提供自定義圖示。示例程式碼如下：

<GridLayout> 
   <Button class="-primary"> 
      <FormattedString> 
         <Span text="&#xf099;" class="fa"></Span> 
         <Span text=" Button.-primary with icon"></Span> 
      </FormattedString> 
   </Button> 
</GridLayout>
.fa {
   font-family: "FontAwesome", "fontawesome-webfont";
}

這裡，

&#xf099 指定了圖示在字型 FontAwesome 中的位置。下載最新的 Font Awesome 字型並將 fontawesome-webfont.ttf 放入 src\fonts 資料夾中。

輸出

以下是 **ButtonPrimary** 的輸出：

步驟 5

可以使用以下語法建立圓角按鈕：

<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>

輸出

以下是 ButtonPrimary 的輸出：

文字欄位

文字欄位元件 用於從使用者獲取資訊。讓我們將我們的主頁更改為如下所示：

<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>

這裡，

color 表示文字顏色
backgroundColor 表示文字框的背景
height 表示文字框的高度

輸出

以下是文字欄位的輸出：

文字檢視

文字檢視元件 用於從使用者獲取多行文字內容。讓我們將我們的主頁更改為如下所示：

<GridLayout> 
   <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100"> 
   </TextView> 
</GridLayout>

這裡，maxLength 表示文字檢視接受的最大長度。

輸出

以下是文字檢視的輸出：

搜尋欄

此元件用於搜尋任何查詢或提交任何請求。其定義如下：

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..."></SearchBar> 
<StackLayout>

我們可以應用樣式：

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar> 
</StackLayout>

以下是 SearchBarStyle 的輸出：

開關

開關基於切換在選項之間進行選擇。預設狀態為 false。其定義如下：

<StackLayout> 
   <Switch checked="false" loaded="onSwitchLoaded"></Switch> 
</StackLayout>

以上程式的輸出如下所示：

滑塊

滑塊是一個滑動元件，用於選擇數值範圍。其定義如下：

<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>

以上程式的輸出如下所示：

進度條

進度條指示操作中的進度。當前進度以條形表示。其定義如下：

<StackLayout verticalAlign="center" height="50"> 
   <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>

以下是進度條的輸出：

活動指示器

活動指示器顯示任務的進度。其定義如下：

<StackLayout verticalAlign="center" height="50"> 
   <ActivityIndicator busy="true" color="red" width="50" 
   height="50"></ActivityIndicator> 
</StackLayout>

以下是活動指示器的輸出：

影像

影像控制元件用於顯示影像。可以使用“ImageSource” url 載入它。其定義如下：

<StackLayout class="m-15" backgroundColor="lightgray">
   <Image src="~/images/logo.png" stretch="aspectFill"></Image> 
</StackLayout>

影像控制元件的輸出如下所示：

網頁檢視

網頁檢視顯示網頁。可以使用 URL 載入網頁。其定義如下：

<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>

以上程式碼的輸出如下所示：

日期選擇器

日期選擇器元件用於選擇日期。其定義如下：

<StackLayout class="m-15" backgroundColor="lightgray"> 
   <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker> 
</StackLayout>

日期選擇器元件的輸出如下所示：

時間選擇器

時間選擇器元件用於選擇時間。其定義如下：

<StackLayout class="m-15" backgroundColor="lightgray"> 
<TimePicker hour="9" 
   minute="25" 
   maxHour="23" 
   maxMinute="59" 
   minuteInterval="5"> 
</TimePicker> 
</StackLayout>

以下是時間選擇器元件的輸出：

列印頁面