2015做微网站多少钱,找网站设计公司 看那些,科技部政服务服平台,wordpress 头条插件在学习的路上我们不能只是停留在对理论知识的理解#xff0c;还应该将理论和实战进行结合#xff0c;这样才有利于我们能够更有深度的掌握知识#xff0c;最终形成自己的知识体系结构。我们在实战的时候#xff0c;不仅可以巩固我们的理论知识#xff0c;还能够在实战中发…在学习的路上我们不能只是停留在对理论知识的理解还应该将理论和实战进行结合这样才有利于我们能够更有深度的掌握知识最终形成自己的知识体系结构。我们在实战的时候不仅可以巩固我们的理论知识还能够在实战中发现问题并找到合适的解决方案。前面的章节中我们已经学习了六大布局和常用的组件我们在学习布局和组件的时候也有一些小示例。通过这些小示例我们仅仅是对当前的布局和组件的使用有了深刻的认识但UI界面布局中不可能单纯只存在某个组件复杂的UI界面中会出现多种布局、多种组件进行组合。本节我将在HarmonyOS智慧屏上实现常规的计算器。整个计算器是将文本组件和按钮组件组合起来然后放在一个容器中。通过监听按钮的点击事件并更改文本组件的显示内容最终达成计算器(本节示例中遗忘了小数点如果有兴趣的话可以自己尝试的加上小数点)的效果。对于计算器UI界面而言我将其拆解为上下两部分上区域用于显示下区域用于按钮组。在上区域存在两个Text组件分别用于显示数学表达式和按钮对应的数字值。下区域是一些按钮组件数字区域运算符号以及回退和清除。对于整个示例布局我做了简单的拆解和介绍接下来我将以代码的形式实现上面的UI界面。为了使各个布局中的组件能通过不同的占比显示我这里选用DirectionalLayout布局并设置它的权重比来实现组件在不居中的占比。1、整个布局分为上下两个区域因此DirectionalLayout布局的方向为vertical(垂直)。并且分为两个区域上下区域占比为23。xmlns:ohoshttp://schemas.huawei.com/res/ohosohos:heightmatch_parentohos:widthmatch_parentohos:orientationverticalohos:heightmatch_parentohos:widthmatch_parentohos:weight2ohos:orientationverticalohos:heightmatch_parentohos:widthmatch_parentohos:weight3ohos:orientationvertical2、上区域是两个Text组件布局依旧是DirectionalLayout布局两个组件在布局中的权重比为3:4。ohos:heightmatch_parentohos:widthmatch_parentohos:weight2ohos:orientationverticalohos:id$id:show_math_expressionohos:heightmatch_parentohos:widthmatch_parentohos:background_element#FFFFFFohos:weight3ohos:text527-ohos:text_size40fpohos:text_alignmentright | vertical_centerohos:right_padding20vp/ohos:id$id:show_input_valueohos:heightmatch_parentohos:widthmatch_parentohos:background_element#F2F2F2ohos:weight4ohos:text1ohos:text_size60fpohos:text_alignmentright | vertical_centerohos:right_padding20vp/3、下区域为按钮组区域分为三部分除了等号之外的按钮都是在各自布局中的占比为1。ohos:heightmatch_parentohos:widthmatch_parentohos:weight3ohos:orientationverticalohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:background_element#FFFF00ohos:orientationhorizontalohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text7/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text8/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text9/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text-/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:image_src$media:delete/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:background_element#FF00FFohos:orientationhorizontalohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text4/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text5/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text6/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text*/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text//ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:textC/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:background_element#00FFFFohos:orientationhorizontalohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text1/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text2/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text3/ohos:heightmatch_parentohos:widthmatch_parentohos:weight1ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text_color#455A64ohos:text_weight700ohos:text0/ohos:heightmatch_parentohos:widthmatch_parentohos:weight2ohos:text_size50fpohos:background_element$graphic:background_button_styleohos:text_alignmentcenterohos:text/4、预览UI布局界面5、UI界面布局组件完成后接下来我将实现具体的操作业务这里仅罗列部分详情请查阅代码。1)首先对组件进绑定//显示表达式private Text showMathExp null;//显示录入private Text showInputValue null;//数字按钮7private Button btnServe null;// ...//回退按钮private Image btnBack null;Overridepublicvoid onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);showMathExp (Text) findComponentById(ResourceTable.Id_show_math_expression);showInputValue (Text) findComponentById(ResourceTable.Id_show_input_value);//按钮btnServe (Button) findComponentById(ResourceTable.Id_btn_seven);// ...//回退btnBack (Image) findComponentById(ResourceTable.Id_btn_back);}2)按钮的监听事件//点击按钮7的操作btnServe.setClickedListener(l - {//TODO 现有表达式显示区是否有内容//更改表达式显示区内容//showMathExp.setText();//更改录入数字显示区内容showInputValue.setText(7);});对于表达式显示区、具体运算等业务逻辑可以直接查看代码此处不做详细赘述。我的HarmonyOS GitHub库©著作权归作者和HarmonyOS技术社区共同所有如需转载请注明出处否则将追究法律责任【编辑推荐】【责任编辑jianghua TEL(010)68476606】点赞 0
