手机端UI-长篇大论之-区域

hhh. · 发表于 2024-5-6 17:53:37

本帖最后由 hhh. 于 2024-11-14 00:31 编辑

导航：

前言：

说明：

一般问题，请善用论坛和网页搜索，里面有答案。
也可以借助AI工具，可以很方便的解决问题。如：通义千问，GhatGPT。

页面结构：

页面主要有上，中，下三个部分，通俗理解就是：页眉→内容→页脚（dock栏）。
其中上和下这两个部分的卡片，分别固定在屏幕的页眉和页脚。
其中内容部分由：区域卡片组成。

前期准备：

添加页面：

因页面跳转需要，需要添加最少8个页面，可见性设置为“不可见”或者“子视图”。
分别为：玄关，阳台，客厅，餐厅，书房，厨房，洗漱间，卫生间，主卧，次卧等，视个人情况而定。

那请泡好茶，我们开始卡片的添加

重要：

在视图配置页面修改主题为：minimalist-mobile，包含手机端UI全部界面。
在视图配置页面修改视图类型为：默认类型（部件），包含：主页，区域，我的。

卡片添加：

使用手动模式添加卡片，支持可视化编辑器。
请按照：页眉→区域卡片→dock栏。这个顺序依次添加卡片。
文件按照数字顺序命名，按照顺序添加即可。

需要修改：

区域篇，主要使用的就是模板，就需要更改模版中的实体ID。
这种颜色的部分属于模版（模版就是使用代码获取实体信息，或者是改变实体信息，用于显示）。
这个颜色的部分整篇代码都需要更改。就是“实体ID”
页面跳转，需要修改这个颜色中的页面地址，/dashboard-cellphone/xuanguan 这个地址就是添加好的页面地址栏。

上半部分代码：

type: custom:mushroom-template-card
no_card: true
icon: mdi:door
icon_color: |-
  {% if is_state('binary_sensor.xuan_guan_ren_ti_jian_ce', 'on') %}
blue
  {% endif %}
layout: horizontal
fill_container: false
primary: 玄关
secondary: '{{ states(''sensor.xiaomi_smartlock_state'') }}'
tap_action:
  action: navigate
  navigation_path: /dashboard-cellphone/xuanguan
hold_action:
  action: none
double_tap_action:
  action: none

下半部分代码：

- type: custom:mushroom-chips-card
         chips:
            - type: template
            icon: |-
               {% if is_state('sensor.door_state', 'opened') %}
                  mdi:door-open
               {% else %}
                  mdi:door-closed-lock
               {% endif %}
            icon_color: |-
                {% if is_state('sensor.door_state', 'opened') %}
                  red
               {% else %}
                  blue
               {% endif %}
            - type: light
            entity: light.xuan_guan_deng_zu
            content_info: none
            use_light_color: true
            - type: template
            entity: camera.dahuasn
            icon: mdi:webcam
         alignment: center

普通灯光卡片代码：

type: custom:mushroom-light-card
no_card: true
primary_info: none
secondary_info: none
layout: vertical
fill_container: false
use_light_color: true
entity: light.xuan_guan_deng_zu

其他：