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

panda_coder

发布于 2022-12-9 17:03

5648浏览

1收藏

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

卡片效果

数据录入卡片	统计图卡片

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

数据录入卡片

数据录入卡片采用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>
1.
2.
3.
4.
5.
6.

吃奶时间部分

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

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

排便时间部分

与上述相同

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

吃奶量部分

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

<div class="content-box">
    <text class="tips-text" style="width : 72px; text-align : right;">吃奶量：</text>
	<div class="btn-tools">
	</div>
</div>
1.
2.
3.
4.
5.

而所有按钮都是相同样式，且能换行显示。换行显示则需要给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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

.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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

排便按钮部分

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

<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>
1.
2.
3.
4.
5.

统计图卡片排版

统计图卡片分为上下两部分，上部分为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.
2.
3.
4.
5.
6.
7.
8.