首页 > 其他分享 >浮木云学习日志(5)---APP页面搭建

浮木云学习日志(5)---APP页面搭建

时间:2024-01-29 11:00:12浏览次数:34  
标签:容器 APP 弹性 --- 浮木云 组件 搭建 页面

上次分享了浮木云的交互编排,帮助我们实现了页面一些简单交互操作,而这些简单的交互操作已经基本能够覆盖完整的页面交互了。剩下一些复杂的交互编排我准备在后续用到的过程中再给大家一一分享。
今天我准备进军APP端静态页面搭建了,可能我这人对任何事都充满好奇,在看到浮木云可以直接给我提供手机壳效果,辅助我能够做APP端页面,此时我已经不满足于仅会制作web端的静态页面了。说句实在话,工作这么多年我还没做过app端的页面,因此对于app端页面设计我也是地地道道纯小白了。
本次我搭建的页面还是仿照浮木云平台https://www.fumucloud.com/模版中心https://www.fumucloud.com/template模版页面。
1创建应用
搭建页面之前必不可少的步骤,创建应用,输入应用名称和行业分类,选择APP应用类型,页面布局根据具体需求选择,这里我选择的是底部导航。

2尺寸选择
创建应用过后,页面会自动创建一个名字叫“首页”的页面,系统自动会提供一个初始的手机壳页面。当然,如果你对系统给出的手机壳外形不满意,可以自己选择你喜欢的手机型号,来适配你要搭建的原型页面,这里我选择iphone12/13/14。

3导航设置
这里就是对刚才选择的底部导航进行配置,根据具体需求确定底部导航有几个字段,这里我按照模版中心的页面,也选择添加四个菜单字段。

页面呈现效果是这样滴,为什么这四个字段的颜色都是一样的,跟模版中心是有点不太一样?

终于找到问题所在了,因为我在配置导航菜单数据时,跳转页面只能选择首页,导致四个菜单字段都是选中状态。因此我多复制了几个页面,并在导航菜单数据的每一个菜单选中对应的跳转页面,具体操作如下:

最后的页面的呈现效果是这样滴:

4框架搭建
仿照模版中心的“项目管理”页面,首先在页面从上层到下层依次放置弹性容器、下拉筛选框和列表容器,将整个框架布局定义好。

5内容填充
框架搭建好之后,分别对上述的框架进行内容填充,上层的弹性容器直接放入搜索框组件。

对下拉筛选框进行下拉子项设置:

同时在属性配置中对背景颜色、下拉框的选中颜色,以及下拉框动画时长进行相应的属性设置。

接着在列表容器中放置两个弹性容器,分别在弹性容器中填充对应的内容,在填充内容之前,首先设置弹性容器的内间距和外间距,同时在该弹性容器内的框架搭建好,分别在放置的文字组件内填写文字名称。

在第二个弹性容器内放入两个弹性容器,分别表示“参与人数”和“项目补贴”的内容。接下来就是在两个小的弹性容器内再次放置图片组件和文字组件,并对图片组件和文字组件设置相应的尺寸,同时通过图片组件上传图片。

接下来就是对项目进度的内容填充,首先放置两个弹性容器,分别表示“流程审批”和“需求分析”。在“流程审批”弹性容器内放置一个图片组件和一个弹性容器,该弹性容器是用来放置文字组件的,保证文字的表示更加规范。最后呈现的效果是这样滴。

好了,一个稍微糊弄的APP端页面就这样搭建好了,虽然在制作过程中一直在嵌套容器,于我个人而言,正是通过这些容器的嵌套,才保证了页面的规范性。想想以前用Axure设计的页面,简直不忍直视,不是Axure用不起,而是浮木云更有性价比,哈哈哈。
今天的学习分享就到这里了,如果感兴趣的话,请一键三连哦。

标签:容器,APP,弹性,---,浮木云,组件,搭建,页面
From: https://www.cnblogs.com/shouqian/p/17994073

相关文章

  • 从传统到智能:物联网-交通数据运维平台的革新之路
    随着城市化进程的加速和科技的不断创新,交通问题已经成为影响城市发展的重要因素。而物联网技术的出现,为解决这一问题带来了全新的解决方案。 山海鲸可视化搭建的物联网-交通数据运维平台依托物联网技术,实现了对交通数据的全面、实时监控和管理,不仅改变了传统的交通管理模式,更让......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-37-如何截图-上篇
    1.简介这个系列的文章也讲解和分享了差不多三分之一吧,突然有小伙伴或者童鞋们问道playwright有没有截图的方法。答案当然是:肯定有的。宏哥回过头来看看确实这个非常基础的知识点还没有讲解和分享。那么在这个契机下就把它插队分享和讲解一下。Playwright提供了一个截屏的API:page.......
  • 手机adb抓app日志
    Android系统的adb工具的下载及MIUI打开USB调试-知乎(zhihu.com)下载 SDKPlatformTools (本文以Windows系统为例)解压下载下来的zip文件打开手机的「开发者模式」:设置→「我的设备」(Mydevice)→「全部参数」(Allspecs)→点击7次「MIUI版本」(MIUIversio......
  • 上周热点回顾(1.22-1.28)
    热点随笔:· 全球IPv4耗尽,下个月开始收费! (咸鱼Linux运维)· 通义灵码,降临博客园 (博客园团队)· .NET开源的简单、快速、强大的前后端分离后台权限管理系统 (追逐时光者)· C#开源免费的开发效率提升利器:DevToys开发人员的瑞士军刀! (追逐时光者)· 你和时间管理大师,就......
  • 洛谷题解-[ABC325E] Our clients, please wait a moment
    https://www.luogu.com.cn/problem/AT_abc325_e题目描述ある国には都市がNNN個あります。あなたは、都市111にある営業所から000個以上の都市を経由して都市NNNにある訪問先へ移動しようとしています。移動手段は社用車と電車の222種類があります。都市......
  • MySQL数据库连接报错1130 - Host 'xxx' is not allowed to connect to this MySQL ser
    目录现象描述原因分析解决办法:本文解决MySQL数据库连接报错1130-Host'xxx'isnotallowedtoconnecttothisMySQLserver。返回目录返回目录现象描述MySQL数据库,使用Navicat、root用户连接报错:原因分析这个报错原因是权限问题,需要修改连接权限。进入mysql......
  • 洛谷题单指南-排序-P1093 [NOIP2007 普及组] 奖学金
    原题链接:https://www.luogu.com.cn/problem/P1093题意解读:本题考察排序,根据题意,先按总分从大到小排,再按语文从大到小排,以上都相同则按学号从小到大排。100分代码:#include<bits/stdc++.h>usingnamespacestd;constintN=305;structstudent{intid;intyuw......
  • 【2024-01-26】有点年味
    20:00世界上没有哪一道伤口是永远不能愈合的,虽然愈合后在阴雨的日子还会感觉到痛。                                                 ——迟子建我今天开始在公司感受......
  • 【2024-01-27】连岳摘抄
    23:59我从多话的人学到了静默,从偏狭的人学到了宽容,从残忍的人学到了仁爱,但奇怪的是我对于这些老师并不感激。                                                 ——纪伯......
  • python之常用标准库-sys/os
    1.syssys常用的方法sys.path.append/sys.path.insert1#!/usr/bin/python2importos,sys3sys.path.insert(0,os.path.dirname(os.path.dirname(__file__)))#将路径插入第1个位置4sys.path.append(os.path.dirname(os.path.dirname(__file__)))#将路径追加到末尾View......