快应用页面样式与布局

快应用页面样式与布局

在课程的大纲

• 盒模型
• 长度单位
• 设置样式
• Flex布局示例
• 动态修改样式
• 引入less预编译

盒模型

框架使用border-box模型，暂不支持content-box模型与box-sizing属性

布局所占宽度Width:

width = width(包含padding-left+ padding-right +border-left + border-right)

布局所占宽度Height:

Height = height(包含padding-top + padding-bottom +border-top + border-bottom)

长度单位

框架目前仅支持长度单位 px 和 %。与传统web页面不同，px是相对于项目配置基准宽度的单位。

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度

项目配置基准宽度：项目的配置文件（<ProjectName>/src/mainfest.json）中config.designWidth的值，默认为750

若设计宽度为640px,元素A在设计稿的宽度为100px，实现的两种方案如下：

1.框架样式1px 等于 设计稿1px

修改<ProjectName>/src/mainfest.json中，修改config.designWidth:

{
    "config": {
        "designWidth": 640
    }
}

2.不修改项目配置基准宽度：若当前项目配置的 基准宽度为 750，
设计稿宽度100px,在框架为 100 / 640 = x / 750 推出：x = 117

在框架宽度为：117px

设置样式

开发可以使用 内联样式、tag选择器、class选择器、id选择器来为组件设置样式

同时也可以使用 并列选择、后代选择器设置样式

    <template>
        <div class="tutorial-page">
            <text style="color: #FF0000;">内联样式</text>
            <text id="title">ID选择器</text>
            <text class="title">class选择器</text>
            <text>tag选择器</text>
        </div>
    </template>
    
    <style>
        .tutorial-page {
            flex-direction:column;
        }
        /* tag选择器 */
        text {
            color: #0000FF;
        }
        /* class 选择器（推荐）*/ 
        .title {
            color: #00FFOO;
        }
        /* ID选择器 */
        #title {
            color: #00A000;
        }
        /* 并列选择 */ 
        #title,.title {
            font-weight:bold;
        }
        /* 后代选择 */ 
        .tutorial-page text {
            font-size: 42px;
        }
        /* 直接后代选择器 */ 
        .tutorial-page > text {
            text-decoration:underline;
        }
    </style>

Flex布局示例

框架使用Flex 布局，div作为Flex容器组件，具有Flex布局的特性；text、a、span、label组件为文本容器组件，其它组件不能直接放置文本内容。

    <template>
        <div class="tutorial-page">
            <div class="item">
                <text>item1</text>
            </div>
            <div class="item">
                <text>item2</text>
            </div>
        </div>
    </template>
    
    <style>
        .tutorial-page {
            /* 交叉轴居中*/
            align-items:center;
            /* 纵向排列*/
            flex-direction:column;
        }
        .tutorial-page >.item {
           /* 空间足够时，允许压缩*/
           /* flex-shrink:1;*/
           /* 空间不足时，不允许压缩*/
            flex-shrink:0;
            /*主轴居中*/
            justify-content:center;
            width: 200px;
            height: 100px;
            margin:10px;
            background-color: #FF0000;
        }
    </style>

动态修改样式

动态修改样式有多种方式。与传统前端开发习惯一致，包括但不限于以下两种：

• 修改class: 更新组件的class属性中使用的变量的值
• 修改内联style:更新组件的style属性中的某个CSS的值

    <template>
        <div style="flex-direction: column;">
            <text class="normal-text {{className}}" onclick="changeClassName">点击我修改文字颜色</text>
            <text style="color:{{textColor}}" onclick="changeInlineStyle">点击我修改文字颜色</text>
        </div>
    </template>
    
    <style>
        .normal-text {
            font-weight:bold;
        }
        .text-blue {
            color: #0FAEFF;
        }
        .text-red {
            color: #F76160;
        }
    </style>
    
    <script>
        export default {
            private: {
                className: 'text-blue',
                textColor: #0FAEFF
            },
            
            onInit() {
                this.$page.setTitleBar({text: '动态修改样式'})
            },
            
            changeClassName() {
                this.className = 'text-red'
            },
            
            changeInlineStyle() {
                this.textColor = '#F76160'
            }
            
        }
    </script>

引入less预编译

首先要安装相关库的：less、less-loader

在终端用命令：

sudo npm install -g less
sudo npm install -g less-loader

安装成功后，可以用lessc -v查看版本号

使用外部的less style 示例如下：

    <template>
        <div class="tutorial-page">
            <text id="title">less示例</text>
        </div>
    </template>
    
    <style lang="less">
        /*引入外部less文件*/
        @import './style.less';
        .tutorial-page {
            /*主轴居中*/
            justify-content: center;
            background-color: #00BEAF;
            
            #title {
                color: #FF0000;
            }
        }
    </style>