NativeScript - Widgets部件

NativeScript提供了大量的用户界面组件，被称为"Widget"小部件。每个小部件都执行一项特殊任务，并带有一组方法。

Button 组件

按钮是执行点击事件动作的组件。当用户点击按钮时，它将执行相应的操作。它定义如下-

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

让无涯教程在BlankNgApp中添加按钮，如下步骤:

第1步    -  打开 src\app\home\home.component.html。这是home组件的UI设计页面。

第2步    -  在 GirdLayout 组件内添加一个按钮。完整的代码如下-

<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 类用于表示主按钮。运行上面代码输出

第4步    -  NativeScript提供格式化选项，以在按钮中提供自定义图标。示例代码如下-

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

＆#xf099指定字体FontAwesome中图标的位置。下载最新的Font Awesome字体，并将fontawesome-webfont.ttf放在src\fonts文件夹中。

运行上面代码输出

第5步    -  可以使用以下语法创建圆形按钮-

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

运行上面代码输出

Label 组件

标签组件用于显示静态文本。如下更改主页-

<GridLayout> 
   <Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true">
   </Label> 
</GridLayout>

在这里，如果标签超出屏幕宽度，则textWrap会包装标签的内容，运行上面代码输出

TextField 组件

TextField组件用于从用户获取信息。让无涯教程按照下面指定的方式更改主页-

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

• color                         - 代表文本颜色

• backgroundColor   - 代表文本框的背景

• height                       -  代表文本框的高度

运行上面代码输出

TextView 组件

TextView Component用于从用户获取多行文本内容。按照下面指定的方式更改主页-

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

在这里，maxLength表示TextView接受的最大长度。

运行上面代码输出

SearchBar 组件

该组件用于搜索任何查询或提交任何请求。它定义如下-

<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>

Switch 组件

Switch基于切换选项之间的选择。默认状态为false。它定义如下-

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

上面程序的输出如下所示-

Slider 组件

滑块是用于选择数字范围的滑动组件。它定义如下-

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

上面程序的输出如下:

Progress 组件

进度小部件指示操作的进度。当前进度以条形表示。它定义如下-

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

ActivityIndicator 组件

ActivityIndi​​cator显示进度中的任务。它定义如下-

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

Image 组件

图像小部件用于显示图像。可以使用" ImageSource"加载。它定义如下-

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

图像小部件的输出如下所示-

WebView 组件

WebView显示网页。可以使用URL加载网页。它定义如下-

链接：https://www.learnfk.comhttps://www.learnfk.com/nativescript/nativescript-widgets.html

来源：LearnFk无涯教程网

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

上面代码的输出如下所示-

DatePicker 组件

DatePicker组件用于选择日期。它定义如下-

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

TimePicker 组件

TimePicker组件用于选择时间。它定义如下-

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