這里我實現(xiàn)的效果其實和原版的差別不大，只是沒有上面的清空購物車

只要在上面的菜單欄中選購了咖啡，這里的圖標就會自動展開成購物車

點擊后顯示具體的購物車咖啡

1.整體設(shè)計思路

大家有沒有覺得這里還是蠻復(fù)雜的，里面有購物車圖標、配送費計算、結(jié)算欄等等，那我們怎么設(shè)計呢？我們一步步來：

1. 先設(shè)計右側(cè)的購物車圖標，這就是就是一個Image組件
2. 中間的結(jié)算欄其實就是一個線性布局DirectionLayout
3. 已點咖啡的數(shù)量小圓圈
4. 上面的具體已點咖啡

2.購物車結(jié)算欄布局設(shè)計

這里我們先不討論里面的具體邏輯功能實現(xiàn)，后面在與詳情頁聯(lián)動的時候會帶著大家對里面的功能進行補充完整的，我們這里著重頁面布局的設(shè)計

2.1 右側(cè)購物車圖標

其實就是一個線性布局里面添加了一張圖片，而這個線性布局由邊框和是圓形的

<!--右側(cè)已點點餐圖標-->
<DependentLayout
    ohos:visibility="visible"
    ohos:id="$+id:btn_cart"
    ohos:bottom_margin="80vp"
    ohos:background_element="$graphic:diancan"
    ohos:align_parent_bottom="true"
    ohos:align_parent_right="true"
    ohos:height="68vp"
    ohos:width="68vp">
    <Image
        ohos:scale_mode="stretch"
        ohos:center_in_parent="true"
        ohos:image_src="$media:luckin"
        ohos:height="40vp"
        ohos:width="40vp"/>
</DependentLayout>

背景設(shè)置相關(guān)的graphic文件diancan.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval">
    <solid ohos:color="#fff"/>
    <stroke ohos:color="#C8BFE7" ohos:width="1vp"/>

</shape>

2.2 購物車結(jié)算欄

為了更好的展示，購物車結(jié)算欄是由右側(cè)圖標而來的，我們需要設(shè)置一樣的底部margin都為80vp；
那購物車結(jié)算欄的布局方式是什么呢？

1. 上面是配送費相關(guān)的文本Text信息
2. 中間一層時一個線性布局，在布局里面，左側(cè)是與購物車圖標一樣的圖片組件Image，中間是價格計算，右側(cè)是進行結(jié)算的按鈕Button組件
3. 整個結(jié)算欄平時是隱藏的
   

<!--底部結(jié)算欄-->
<DirectionalLayout
    ohos:id="$+id:menu_info_dl"
    ohos:visibility="hide"
    ohos:bottom_margin="80vp"
    ohos:align_parent_bottom="true"
    ohos:align_parent_right="true"
    ohos:height="94vp"
    ohos:background_element="$graphic:cart"
    ohos:width="340vp"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:discount_txt"
        ohos:margin="6vp"
        ohos:height="16vp"
        ohos:width="match_parent"
        ohos:text="配送費6元，再買24.6元立減3元"
        ohos:text_alignment="center"
        ohos:text_weight="600"
        ohos:text_size="16fp"
        ohos:text_color="#080e89"/>

    <DirectionalLayout
        ohos:id="$+id:cart_dl"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:bottom_margin="6vp"
        ohos:background_element="$graphic:count"
        ohos:orientation="horizontal">

        <Image
            ohos:margin="10vp"
            ohos:height="40vp"
            ohos:width="60vp"
            ohos:scale_mode="zoom_center"
            ohos:clip_alignment="center"
            ohos:image_src="$media:luckin"/>

        <DirectionalLayout
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:height="match_parent"
            ohos:width="180vp"
            ohos:orientation="vertical">

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:text="預(yù)計到手 "
                    ohos:text_alignment="center"
                    ohos:text_size="13fp"/>

                <Text
                    ohos:id="$+id:total_price"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:text="￥0"
                    ohos:text_alignment="center"
                    ohos:text_size="13fp"
                    ohos:text_weight="800"
                    ohos:text_color="#e65638"/>

            </DirectionalLayout>

            <Text
                ohos:top_margin="2vp"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="已享受更低優(yōu)惠，共減免￥17.6"
                ohos:text_size="12fp"
                ohos:text_alignment="center"
                ohos:text_color="#9d9d9f"/>

        </DirectionalLayout>

        <Button
            ohos:text_color="#fff"
            ohos:text="去結(jié)算"
            ohos:text_size="16fp"
            ohos:align_parent_right="true"
            ohos:background_element="$graphic:count_button"
            ohos:height="match_parent"
            ohos:width="match_parent"/>
    </DirectionalLayout>
</DirectionalLayout>

2.3 已點咖啡數(shù)量圓圈

效果圖如下所示：

問題1：我們思考一下這里的圓圈咋設(shè)置？？？
答：答案是肯定的，一定是一個圓形的線性布局里面包裹了一個Text文本組件

問題2：怎么設(shè)置到右上角呢?
答：使用覆蓋的方式設(shè)置到右上角，我們將這個線性布局設(shè)置的與結(jié)算欄同樣的高度，與左側(cè)的margin加大一點！因為整體的布局文件ability_main.xml中是相對布局DependentLayout的形式，所以不指定相對位置，會自己實現(xiàn)覆蓋！

2.4 已點咖啡模板

我們知道點擊中間的結(jié)算欄之后，會展示你具體點了哪些咖啡！【當然默認是隱藏的】

整個布局文件中，左側(cè)有一個復(fù)選框，我這里不是用的鴻蒙自帶的復(fù)選框組件哈，使用的一個Image進行代替，然后其余部分與二級菜單中具體咖啡幾乎是一樣的啦，所以copy過來即可！?。?br>
已點咖啡模板文件template_ordered.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="110vp"
    ohos:width="match_parent"
    ohos:orientation="horizontal">

    <Image
        ohos:left_margin="15vp"
        ohos:layout_alignment="vertical_center"
        ohos:height="20vp"
        ohos:width="20vp"
        ohos:image_src="$media:choose"
        ohos:scale_mode="zoom_center"
        ohos:clip_alignment="center"/>

    <Image
        ohos:left_margin="20vp"
        ohos:id="$+id:coffee_img"
        ohos:height="90vp"
        ohos:width="90vp"
        ohos:image_src="$media:coffee1"
        ohos:scale_mode="stretch"
        ohos:clip_alignment="center"
        ohos:layout_alignment="center"/>

    <DirectionalLayout
        ohos:left_margin="14vp"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical">

        <Text
            ohos:top_margin="5vp"
            ohos:id="$+id:coffee_title"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="厚乳拿鐵"
            ohos:text_color="#313131"
            ohos:text_size="20fp"
            ohos:text_alignment="center"/>

        <Text
            ohos:id="$+id:coffee_taste"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="熱/不另外加糖"
            ohos:text_color="#313131"
            ohos:text_size="12fp"
            ohos:text_alignment="center"/>

        <DirectionalLayout
            ohos:height="26vp"
            ohos:width="match_parent"
            ohos:top_margin="28vp"
            ohos:orientation="horizontal">

            <Text
                ohos:id="$+id:coffee_price"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="￥16"
                ohos:text_color="#dd5810"
                ohos:text_size="18fp"
                ohos:text_alignment="center"/>

            <DirectionalLayout
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:alignment="right"
                ohos:orientation="horizontal">

                <Image
                    ohos:height="32vp"
                    ohos:width="32vp"
                    ohos:image_src="$media:minus"
                    ohos:layout_alignment="vertical_center"
                    ohos:padding="5vp"
                    ohos:scale_mode="stretch"/>

                <Text
                    ohos:id="$+id:coffee_num"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:left_margin="2vp"
                    ohos:right_margin="2vp"
                    ohos:text="1"
                    ohos:text_alignment="vertical_center"
                    ohos:text_size="20fp"/>

                <Image
                    ohos:height="32vp"
                    ohos:width="32vp"
                    ohos:image_src="$media:plus"
                    ohos:layout_alignment="vertical_center"
                    ohos:padding="5vp"
                    ohos:scale_mode="stretch"/>
            </DirectionalLayout>
        </DirectionalLayout>
    </DirectionalLayout>
</DirectionalLayout>

這里對于模板的渲染，我們會在《詳情頁與首頁聯(lián)動》一文中詳細闡述~文章來源地址http://www.zghlxwxcb.cn/news/detail-810617.html

到了這里，關(guān)于鴻蒙版瑞幸咖啡開發(fā)日記（三）購物車結(jié)算欄開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！