NativeScript - Widgets部件

首页 / NativeScript入门教程 / NativeScript - Widgets部件

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

Button 组件

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

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

来源:LearnFk无涯教程网

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

运行上面代码输出

GirdLayout

第3步    -  可以使用CSS设置按钮的样式,如下所示:

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

这里,-primary 类用于表示主按钮。运行上面代码输出

纽扣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文件夹中。

运行上面代码输出

FontAwesome

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

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

运行上面代码输出

Home

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会包装标签的内容,运行上面代码输出

Label

TextField 组件

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

<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>
  • color                         - 代表文本颜色

  • backgroundColor   - 代表文本框的背景

  • height                       -  代表文本框的高度

运行上面代码输出

Text Field

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>
搜索栏style

Switch 组件

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

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

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

Program

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>

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

Image

WebView 组件

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

<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>
时间选择器

这一章《NativeScript - Widgets部件》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

猜你喜欢

程序员的数学基础课 -〔黄申〕

数据分析实战45讲 -〔陈旸〕

攻克视频技术 -〔李江〕

eBPF 核心技术与实战 -〔倪朋飞〕

好记忆不如烂笔头。留下你的足迹吧 :)