#盲盒+码# HarmonyOS卡片----喂奶记录卡片之页面排版 原创

panda_coder
发布于 2022-12-9 17:03
浏览
1收藏

【本文正在参加「盲盒」+码有奖征文活动】https://ost.51cto.com/posts/19288

卡片效果

数据录入卡片 统计图卡片
#盲盒+码# HarmonyOS卡片----喂奶记录卡片之页面排版-鸿蒙开发者社区 #盲盒+码# HarmonyOS卡片----喂奶记录卡片之页面排版-鸿蒙开发者社区

任何时候在排版前一定要在大脑中大致绘制出版式,整体采用上下结构还是左右结构,再对每个部分的内容进行布局构思。

数据录入卡片

数据录入卡片采用flex布局,将内容分为四个部分,顶部吃奶时间文字,中间吃奶量按钮,排便时间文字以及底部排便按钮。
所以在顶层div采用flex布局,主轴方向采用垂直向下的column,然后再建4个div,4个div都采用主轴方向为水平方向的row,故我们给4个div添加一个共同的class。

<div class="container">
	<div class="content-box"><div>
	<div class="content-box"><div>
	<div class="content-box"><div>
	<div class="content-box"><div>
</div>

吃奶时间部分

由于text组件不能嵌套,所以我们需要将文字分为三部分,分别为黑色普通文本,红色时间文本,黑色普通文本,并添加不同class

 <div class="content-box">
        <text class="show-text">距上次吃奶已过去</text>
        <text class="date-text">{{ eatDate }}</text>
        <text class="show-text">秒</text>
 </div>

排便时间部分

与上述相同

<div class="content-box">
        <text class="show-text">距上次排便已过去</text>
        <text class="date-text">{{ shitDate }}</text>
        <text class="show-text">秒</text>
</div>

吃奶量部分

吃奶量分为左右两部分,左侧文字说明,右侧按钮组,故整体排版为,并且给左侧的文字设定固定宽度,靠右排列

<div class="content-box">
    <text class="tips-text" style="width : 72px; text-align : right;">吃奶量:</text>
	<div class="btn-tools">
	</div>
</div>

而所有按钮都是相同样式,且能换行显示。换行显示则需要给btn-tools样式添加flex-wrap参数
完成代码

<div class="content-box">
        <text class="tips-text" style="width : 72px; text-align : right;">吃奶量:</text>
        <div class="btn-tools">
            <button class="btn btn-ml" @click="mbtn-clk1">{{ mbtn1 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk2">{{ mbtn2 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk3">{{ mbtn3 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk4">{{ mbtn4 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk5">{{ mbtn5 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk6">{{ mbtn6 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk7">{{ mbtn7 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk8">{{ mbtn8 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk9">{{ mbtn9 }}</button>
            <button class="btn btn-ml" @click="mbtn-clk10">{{ mbtn10 }}</button>
        </div>
    </div>
.content-box{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.btn-tools{
    display: flex;
    flex-wrap: wrap;
}
.btn{
    border-radius: 2px;
    padding: 3px 6px;
    margin:3px;
    font-size: 12px;
    box-shadow: 1px 1px 1px #ffe3e3e3;
}
.btn-ml{
    font-size: 10px;
    width: 46px;
    background-color: #ff1697de;
}

排便按钮部分

排便按钮部分,依次排列为文本,按钮,按钮

<div class="content-box">
        <text class="tips-text">排便颜色:</text>
        <button class="btn btn-gold" @click="healthy-shit">正常金黄色</button>
        <button class="btn btn-green" @click="unhealthy-shit">非正常色</button>
    </div>

统计图卡片排版

统计图卡片分为上下两部分,上部分为chart统计图,下部分为总计吃奶量文本
同样在顶层div采用flex布局,且主轴方向为垂直往下
总计吃奶量参考上述吃奶时间

<div class="container" @click="show">
    <chart type="line" options="{{options}}" style="width: 100%;height: 80%;" datasets="{{datasets}}"></chart>
    <div class="content-box">
        <text class="show-text">今日吃奶总量</text>
        <text class="date-text">{{ total }}</text>
        <text class="show-text">ml</text>
    </div>
</div>

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
1
收藏 1
回复
举报
1条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

提前构思,做到胸有成竹

回复
2022-12-9 17:34:33
回复
    相关推荐