万能前端框架uni app初探05：flex布局设备控制页面

前言

本节我们使用flex布局方式，设计一个设备控制页面。

一、基础知识

1. Flex布局简介

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。传统的布局，基于盒状模型，依赖 display属性 + position属性 + float属性，实现某些特殊布局时候非常不方便，而使用Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

2. Flex布局特点

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3. Flex布局方式

实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

注意：

• 1.行内元素也使用inline-flex，块容器使用flex

• 2.当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

有下面六种属性可以设置在容器上，它们分别是：

(1) flex-direction

(2) flex-wrap

(3) flex-flow

(4) justify-content

(5) align-items

(6) align-content

各种属性具体使用参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

二、示例

将上一讲app04工程复制为app005,然后拖到HBuilder X中。

1.示例代码

修改pages/index/index.vue中代码如下

<template>
        <view class="container">
                <view class="single_image_wrap">
                        <image src="../../static/led.jpg" class="device_image"></image>
                </view>

                        <view class="view_show">
                          {{text}}
                        </view>

                        <view class="switch_led">
                                <switch @click="btn_clicked">按钮</switch>
                        </view>


        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                flag: 0,
                                text: 'LED灯',
                        }
                },
                methods: {
                        btn_clicked() {
                                if (this.flag == 0)
                                {
                                        this.flag = 1
                                        uni.showToast({
                                                title:"打开LED",
                                        })
                                }else
                                {
                                        this.flag = 0
                                        uni.showToast({
                                                title:"关闭LED",
                                        })
                                }

                        },
                }
        }
</script>

<style>
        .container {
                /* display: flex; */
                display: inline-flex;
                
        }
        .device_image {
          margin-top: 10px;
          width: 40px;
          height: 40px;
        }
        .view_show {
          margin-top: 20px;
          margin-left: 10px;
          font-size: 14px;
          color: #939393;
        }
        .switch_led{
                margin-top: 10px;
                margin-left: 350px;
        }
</style>

本例所有元素都在同一行，所以使用inline-flex。

三、运行

点击运行—>运行到浏览器—>Chome，web端显示如下：

四、结语

(1) 获取资料

如您在使用过程中有任何问题，请加QQ群进一步交流,也可以github提Issue。

QQ交流群：906015840 (备注：物联网项目交流)

源码获取：扫描下方二维码，关注公众号，回复uni app即可

一叶孤沙出品：一沙一世界，一叶一菩提