本章目标

1 进一步了解组件Text、Input、Button用法

2 学习组件Picker的用法

在前面的章节中，我们已经使用过了组件Text、Input、Button，现在我们再来专门详细介绍一下它们。

一 组件Text

Text是文本组件，用于呈现一段文本信息。

1 添加文本样式

设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。启动DevEco Studio，新建一个项目或者打开之前的项目。这里我们以之前创建的项目Components为例。在项目窗口中右键单击pages目录，新建一个JS Page，取名textpage

修改pages > tabspage > textpage.css文件，代码如下

/* textpage.css */.container {    width: 100%;    height: 100%;    flex-direction: column;    align-items: center;    justify-content: center;}.title {    font-size: 30px;    text-align: center;    width: 200px;    height: 100px;    color: blue;    allow-scale: true;    word-spacing: 20px;}

2 添加划线

设置text-decoration和text-decoration-color属性为文本添加划线和划线颜色。text-decoration可选值为：

underline：文字下划线修饰；line-through：穿过文本的修饰线nnone：标准文本。

<!-- textpage.hml --><div class="container">    <text>        Hello {{ title }}    </text>    <text class="linethrough">        Hello {{ title }}    </text>    <text class="underline">        Hello {{ title }}    </text></div>

/* textpage.css */.container {    width: 100%;    height: 100%;    flex-direction: column;    align-items: center;    justify-content: center;}text {    font-size: 30px;    text-align: center;    width: 200px;    height: 100px;    color: blue;    allow-scale: true;    word-spacing: 20px;}.linethrough {    text-decoration: line-through;    text-decoration-color: red;}.underline {    text-decoration: underline;    text-decoration-color: red;}

3 隐藏文本内容

当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。text-overflo在设置了最大行数的情况下生效，可选值为：

clip：将文本根据父容器大小进行裁剪显示；ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。

<!-- textpage.hml --><div class="container">    ……    <text class="overflow">        Hello {{ title }}    </text></div>

/* textpage.css */…….overflow {    width: 100px;    max-lines: 1;    text-overflow: ellipsis;}

4 设置文本折行

设置word-break属性对文本内容做断行处理，word-break可选值为：

normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。

<!-- textpage.hml --><div class="container">    ……    <div class="content">        <text class="wordbreak">            Hello {{ title }}        </text>    </div></div>

/* textpage.css */…….content {    width: 50%;    flex-direction: column;    justify-content: center;    align-items: center;}.wordbreak {    height: 200px;    border: 1px solid red;    text-align: center;    word-break: break-word;    font-size: 40px;}

5 使用子组件Span

<!-- textpage.hml --><div class="container">    ……    <text>        <span class="hello">Hello </span>        <span>{{ title }}</span>    </text></div>

/* textpage.css */…….hello {    color: red;}

说明

当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。

在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。

二 组件Button

Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。Button的type属性不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：

capsule：胶囊型按钮，带圆角按钮，有背景色和文本；circle：圆形按钮，支持放置图标；text：文本按钮，仅包含文本显示；arc：弧形按钮，仅支持智能穿戴；download：下载按钮，额外增加下载进度条功能，仅支持手机和智慧屏。

1 设置按钮类型

在项目窗口中右键单击pages目录，新建一个JS Page，取名buttonpage

<!-- buttonpage.hml --><div class="container">    <button class="circle" type="circle">+</button>    <button class="text" type="text">button</button></div>

/* buttonpage.css */.container {    flex-direction: column;    justify-content: center;    align-items: center;}.circle {    font-size: 120px;    background-color: blue;    radius: 72px;}.text {    margin-top: 30px;    text-color: white;    font-size: 30px;    font-style: normal;    background-color: blue;    width: 50%;    height: 100px;}

说明

胶囊按钮（type=capsule）不支持border相关样式。

圆形按钮（type=circle）不支持文本相关样式。

文本按钮（type=text），自适应文本大小，不支持尺寸样式设置（radius，width，height），背景透明不支持background-color样式。

Button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。

如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。

<!-- config.json -->"module": {  "reqPermissions": [{    "name": "ohos.permission.INTERNET"  }],}

2 显示下载进度

为Button组件添加progress方法，来实时显示下载进度条的进度。

<!-- buttonpage.hml --><div class="container">    ……    <button class="download" type="download" @click="setProgress">        {{ downloadText }}    </button></div>

/* buttonpage.css */.container {    flex-direction: column;    justify-content: center;    align-items: center;}button {    text-color: white;    font-size: 30px;    font-style: normal;    background-color: blue;    width: 50%;    height: 100px;}.circle {    font-size: 120px;    background-color: blue;    radius: 72px;}.text {    margin-top: 30px;    margin-bottom: 30px;}.download {    width: 300px;    height: 50px;}

// buttonpage.jsimport prompt from '@system.prompt';export default {    data: {        percent: 0,        downloadText: '下载',        isPaused: true,        intervalId: null    },    start() {        this.intervalId = setInterval(() => {            if(this.percent < 100) {                this.percent += 1;                this.downloadText = this.percent + '%';            } else {                prompt.showToast({                    message: '下载完成'                });                this.paused();                this.downloadText = '下载';                this.percent = 0;                this.isPaused = true;            }        } ,100);    },    paused() {        clearInterval(this.intervalId);        this.intervalId = null;    },    setProgress(e) {        if (this.isPaused) {            prompt.showToast({                message: '下载开始'            });            this.start();            this.isPaused = false;        } else {            prompt.showToast({                message: '暂停'            });            this.paused();            this.isPaused = true;        }    }}

说明

setProgress方法只支持button的类型为download。

三 组件Input

Input是交互式组件，用于接收用户数据。

input组件类型type属性可选值为text，email，date，time，number，password，button，checkbox，radio。

其中text，email，date，time，number，password这六种类型之间支持动态切换修改。

button，checkbox，radio不支持动态修改。可选值定义如下：

button：定义可点击的按钮；checkbox：定义多选框；radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；text：定义一个单行的文本字段email：定义用于e-mail地址的字段；date：定义 date 控件（包括年、月、日，不包括时间）；time：定义用于输入时间的控件（不带时区）；number：定义用于输入数字的字段；password：定义密码字段（字段中的字符会被遮蔽）。

说明

智能穿戴仅支持button、radio、checkbox类型。

Input还有另外一些常用的属性，如下表所示

checked

boolean

false

否

当前组件是否选中，仅type为checkbox和radio生效。

name

string

-

否

input组件的名称。

value

string

-

否

input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。

placeholder

string

-

否

设置提示文本的内容，仅在type为text|email|date|time|number|password时生效。

maxlength

number

-

否

输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。

在项目窗口中右键单击pages目录，新建一个JS Page，取名inputpage

<!-- inputpage.hml --><div class="container">    <div class="div-button">        <dialog class="dialogClass" id="dialogId">            <div class="content">                <text>this is a dialog</text>            </div>        </dialog>        <input class="button" type="button" value="click" onclick="btnclick"></input>    </div>    <div class="content">        <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>    </div>    <div class="content">        <input type="date" class="flex" placeholder="Enter data"></input>    </div></div>

/* inputpage.css */.container {    align-items: center;    flex-direction: column;    justify-content: center;    background-color: #F1F3F5 ;}.div-button {    flex-direction: column;    align-items: center;}.dialogClass{    width:80%;    height: 200px;}.button {    margin-top: 30px;    width: 50%;    height: 50px;    font-size: 30px;}.content{    width: 90%;    height: 150px;    align-items: center;    justify-content: center;}.flex {    width: 80%;    margin-bottom:40px;}

// inputpage.jsexport default {    btnclick(){        this.$element('dialogId').show()    },}

因为在Previewer中不支持输入，可以在模拟器中运行程序看效果，具体步骤可以参考[华为鸿蒙应用开发 8]（稳了，鸿蒙3.0要来）JS UI常用容器组件Form。

Input支持的常用事件有：

change：输入框输入内容发生变化时触发该事件，返回用户当前输入值。

说明

改变value属性值不会触发该回调。

当input类型为text、email、date、time、number、password时，还支持search事件。设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

四 组件Picker

滑动选择器组件Picker通过type属性设置类型，该属性值不支持动态修改。可选择项有：

text：文本选择器。date：日期选择器。time：时间选择器。datetime：日期时间选择器。

说明

当Picker类型为time和datetime时，可以通过hours属性设置时间格式，可选值：

12：按照12小时制显示，用上午和下午进行区分；

24：按照24小时制显示。

默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

multi-text：多列文本选择器。

Picker支持的事件

change：选择器选择值后点击弹窗中的确定按钮时触发该事件cancel：用户点击弹窗中的取消按钮时触发该事件

另外，多列文本选择器还支持columnchange事件。多列文本选择器中某一列的值改变时触发该事件，其中：

column：第几列修改。newValue：选中的值。newSelected：选中值对应的索引。

在项目窗口中右键单击pages目录，新建一个JS Page，取名pickerpage

<!-- picker.hml --><div class="container">    <picker id="picker_text" type="text" value="{{textvalue}}"            range="{{rangetext}}" class="pickertext" ></picker>    <picker id="picker_date" type="date" value="{{datevalue}}"            lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker>    <picker id="picker_time" type="time" value="24-hour format"            hours="24" onchange="timeonchange"  class="pickertime"></picker>    <picker id="picker_multi" type="multi-text" value="{{multitextvalue}}"            columns="3" range="{{multitext}}" selected="{{multitextselect}}"            onchange="multitextonchange" oncancel="multitextoncancel"            class="pickermuitl"></picker></div>

/* pickerpage.css */.container {    flex-direction: column;    justify-content: center;    align-items: center;    background-color: #F1F3F5;}picker {    font-size: 30px;    margin-bottom: 30px;}.pickermuitl {    margin-bottom:20px;    width: 600px;    height: 50px;    font-size: 25px;    letter-spacing:15px;}

// pickerpage.jsimport prompt from '@system.prompt';export default {    data: {        rangetext:['15', "20", "25"],        textvalue:'Select text',        datevalue:'Select date',        multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]],        multitextvalue:'选择多行文本',        multitextselect:[0,0,0],    },    multitextonchange(e) {        this.multitextvalue=e.newValue;        prompt.showToast({ message:"Multi-column text changed to:" + e.newValue })    },    multitextoncancel() {        prompt.showToast({ message:"multitextoncancel" })    },}

在Previewer预览器运行程序，点击各选择器查看效果。