本章内容 1 menu菜单 2 search搜索框 3 select下拉选择按钮 4 toolbar工具栏 5 divider分隔器 一 menu菜单 提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。HML中的菜单不会直接显示在界面中，需要调用其show(x, y)方法才会弹出显示，该方法有两个参数指定菜单弹窗的位置，x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。 菜单中某个项被点击选中时触发selected（value）事件，返回的value值为option子组件的value属性。 示例 <!-- menupage.hml --><div class="container"> <text class="title" @click="showPopupMenu"> Hello {{ title }} </text> <menu id="menu" @selected="menuSelected"> <option value="item1">菜单一</option> <option value="item2">菜单二</option> <option value="item3">菜单三</option> </menu></div> /* menupage.css */.container { flex-direction: column; justify-content: center; align-items: center;}.title { font-size: 30px; text-align: center; width: 200px; height: 100px;} // menupage.jsimport prompt from '@system.prompt';export default { data: { title: 'World' }, menuSelected(e) { prompt.showToast({ message: e.value }); }, showPopupMenu() { this.$element('menu').show({x:280, y:180}); }} 二 search搜索框 提供搜索框组件，用于提供用户搜索内容的输入区域。通过常用属性hint设置搜索提示文字，value设置搜索文本值，searchbutton设置搜索框末尾搜索按钮文本值。 search支持的事件很多，chang(text:newText):输入内容发生变化时触发，submit(text:submitText):点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。 示例 <!-- searchpage.hml --><div class="container"> <search id="search" hint="请输入搜索内容" searchbutton="搜索" @submit="submit" @change="change"></search></div> /* searchpage.css */.container { display: flex; justify-content: center; align-items: center; left: 0px; top: 0px; width: 454px; height: 454px;} // searchpage.jsimport prompt from '@system.prompt';export default { submit(e) { prompt.showToast({ message: e.value }); }, change(e) { prompt.showToast({ message: e.value }); }} 三 select下拉选择按钮 下拉选择按钮，可让用户在多个选项之间选择。 下拉选择新值后触发该事件change(newValue)，newValue的值为子组件option的value属性值。 示例 <!-- selectpage.hml --><div class="container"> <select @change="changeItem"> <option value="选项一">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> </select></div> // selectpage.jsimport prompt from '@system.prompt';export default { changeItem(e) { prompt.showToast({ message: e.value }); }}

注：搜索框的事件search(e)和select的事件change(e)中用e.value没有获取到值，不知道是什么原因。

四 toolbar工具栏 工具栏。放在界面底部，用于展示针对当前界面的操作选项。子组件为toolbar-item。 示例 <!-- toolbarpage.hml --><div class="container"> <toolbar style="position: fixed; bottom: 0px;"> <toolbar-item value="选项一"></toolbar-item> <toolbar-item value="选项二"></toolbar-item> <toolbar-item value="选项三"></toolbar-item> <toolbar-item value="选项四"></toolbar-item> <toolbar-item value="选项五"></toolbar-item> <toolbar-item value="选项六"></toolbar-item> </toolbar></div> 五 divider分隔器 提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 示例 <!-- selectpage.hml --><div class="container"> <select @change="changeItem"> <option value="选项一">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> </select> <divider class="divider" vertical="false"></divider> <select @change="changeItem"> <option value="选项一">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> </select></div> .container { flex-direction: column; justify-content: center; align-items: center; margin: 20px; width: 100%; height: 100%;}.divider { color: red; stroke-width: 3px; line-cap: round;} 关于基础组件的介绍到这章就结束了，还有几个组件，不是很常用，就不介绍了，大家可以去鸿蒙开发官网去查询文档https://img.hflfx.com/pic/5cwdgojjhaw 最后，还是要说，学写程序就是要多敲代码，多动手，用本系列中的这些组件已经可以组合出一些应用程序了，大家可以尝试一下。