精华内容
下载资源
问答
  • 常用的页面组件有哪些
    千次阅读
    2021-11-17 20:58:33

    Container 布局容器

    Container 布局容器:用于布局的容器组件,方便快速搭建页面的基本结构

    • <el‐container>:外层容器。当子元素中包含 <elheader><el‐footer>时,全部子元素会垂直上下排列,否则会水平左右排列
    • <el‐header>:顶栏容器
    • <el‐aside>:侧边栏容器
    • <el‐main>:主要区域容器
    • <el‐footer>:底栏容器

    Dropdown 下拉菜单

    Dropdown 下拉菜单:将动作或菜单折叠到下拉菜单中

    • <el-dropdown split-button>:下拉按钮
    • <el-dropdown-menu>下拉菜单
    • <el-dropdown-item>下拉项
    • divided 分隔

    NavMenu 导航菜单

    NavMenu 导航菜单:为网站提供导航功能的菜单
    <el-menu>:导航菜单
    <el-submenu index="1">:导航按钮
    <template slot="title">标题和名称 <i class="el-icon-menu">图标 -
    <span slot="title">导航二</span>导航标题
    <el-menu-item>导航项

    Table 表格

    Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或
    其他自定义操作

    • <el-table :data="tableData" stripe>:表格\数据绑定对象\样式
    • <el-table-column prop="date" label="日期">:表格行\数据绑定对象属性\表头
      align="center":居中
    • slot-scope:作用域插槽,可以获取表格数据
    • cope:代表表格数据,可以通过 scope.row 来获取表格当前行数据,scope 不是固定写法
    • <el-button type="primary" size="mini"@click="handleUpdate(scope.row)">按钮\类型\大小\事件绑定

    Form 表单

    • <el-form :model="ruleForm" :rules="rules" ref="ruleForm">:表单/绑定数据模板/绑定校验
    • <el-form-item label="活动名称" prop="name">表单项\显示内容\数据模板属性绑定
    • <el-input v-model="ruleForm.name">表单输入框/数据绑定
    • <el-select v-model="ruleForm.region" placeholder="请选择活动区域">:下拉框/数据绑定/提示
    • <el-option label="区域一" value="shanghai"></el-option>:下拉项/数据项
    • ref 绑定校验信息
    • prop 对应 rules 中对应的校验规则字段名
    更多相关内容
  • 此资源包括了Layui各常用组件的使用方法,前端页面功能以及与后端功能接口对接的简单示例
  • 微信小程序常用组件

    千次阅读 2022-04-30 23:07:49
    一、小程序组件分类 ...二、小程序常用组件 ① view 普通视图区域 类似于 HTML 中的 div,是一个块级元素 常用来实现页面的布局效果 ② scroll-view 可滚动的视图区域 常用来实现滚动列表效果 ③

    一、小程序组件分类

    小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
    视图容器
    基础内容
    表单组件
    导航组件
    ⑤ 媒体组件
    ⑥ map 地图组件
    ⑦ canvas 画布组件
    ⑧ 开放能力
    ⑨ 无障碍访问

    二、小程序常用组件

    ① view

    • 普通视图区域

    • 类似于 HTML 中的 div,是一个块级元素

    • 常用来实现页面的布局效果

    ② scroll-view

    • 可滚动的视图区域
    • 常用来实现滚动列表效果

    ③ swiper 和 swiper-item

    • 轮播图容器组件 和 轮播图 item 组件

    1.swiper常用属性

    在这里插入图片描述

    三、常用的基础内容组件

    ① text

    • 文本组件
    • 类似于 HTML 中的 span 标签,是一个行内元素

    ② rich-text

    • 富文本组件
    • 支持把 HTML 字符串渲染为 WXML 结构

    1.text组件的基本使用

    通过 text 组件的 selectable 属性,实现长按选中文本内容的效果:
    在这里插入图片描述

    2.rich-text组件的基本使用

    通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构:
    在这里插入图片描述

    四、其他常用组件

    button

    • 按钮组件

    • 功能比 HTML 中的 button 按钮丰富

    • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

    image

    • 图片组件
    • image 组件默认宽度约 300px、高度约 240px

    navigator

    • 页面导航组件

    • 类似于 HTML 中的 a 链接

    1.botton按钮的基本使用

    在这里插入图片描述

    2.image组件的基本使用

    在这里插入图片描述

    3.image组件的mode属性

    image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
    在这里插入图片描述

    五、小程序API

    小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。
    小程序官方把 API 分为了如下 3 大类:
    ① 事件监听 API

    • 特点:以 on 开头,用来监听某些事件的触发
    • 举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

    ② 同步 API

    • 特点1:以 Sync 结尾的 API 都是同步 API
    • 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
    • 举例:wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容

    ③ 异步 API

    • 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete
      接收调用的结果

    • 举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据

    展开全文
  • Vue实现父子组件页面刷新的常用方法

    很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下:


    1、原地页面重新加载(不推荐)

    this.$router.go(0) //根据路由重新定向到当前页
    或者
    location.reload() //重新加载当前页
    

    上述两种方法可以数据同步,但是其实都是重新加载当前页面,在刷新的时候会出现屏幕闪动,如果当前页面初始化加载的数据或者请求很多的时候,此种方法严重影响效率和体验感。

    2、空白页面作为过渡

    新建一个空白页面组件empty.vue,点击确定的时候先跳转到这个空白页,然后再立刻跳转回当前页面。

    在需要刷新的页面先引入空白页面组件,再添加路由跳转:

    //引入空白页面组件
    import empty from '@/views/organization/empty.vue'
    
    //添加路由跳转
    this.$router.replace({ path:'/empty' });
    

    此种方法基本和上述两种方法,不会出现一瞬间的空白页(如果网络不好或者数据量大也可能会出现),只是地址栏有个快速的切换的过程,如果数据量不大也可以采用。

    3、使用Provide / Inject组合控制显示

    详情参考官网指导文档。

    通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。


    对于这种情况,我们可以使用一对 provideinject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。

    此种方法最基本的Vue脚手架工程很容易实现:

    在App.vue跟组件中定义变量和方法如下:

    <template>
      <div id="app">
        <router-view v-if="isShow"/>
      </div>
    </template>
    
    <script>
    	export default {
    	  name: 'App',
    	  provide(){   //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。
    	    return{
    	      reload:this.reload
    	    }
    	  },
    	  data(){
    	    return{
    	      isShow:true   //控制视图是否显示的变量
    	    }
    	  },
    	  methods:{
    	    reload(){
    	      this.isShow=false;   //先关闭
    	      this.$nextTick(()=>{
    	        this.isShow=true  //再打开
    	      })
    	    }
    	  }
    	}
    </script>
    

    在子组件中使用inject注入根组件的reload方法:

    <template>
      <div>
          <div class="header">
              <button @click="update()">刷新页面</button>
          </div>
      </div>
    </template>
    
    <script>
    	export default {
    		data(){
    		  return{
    		
    		  }
    		},
    		inject:['reload'],//inject注入根组件的reload方法
    		methods:{
    		  update(){
    		    this.reload();
    		    console.log('刷新页面')
    		  }
    		}
    	}
    </script>
    

    但是我使用的vue项目是基于webpack构建的,整体项目结构有点不同,搞了半天也没搞出来:

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"/>
      </div>
    </template>
    
    <script lang="ts">
        import {
            Component,
            Vue
        } from 'vue-property-decorator'
    
        @Component({
            name: 'App',
            provide() { //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。
                reload: this.reload
            },
            data() {
                return {
                    isRouterAlive: true //控制视图是否显示的变量
                }
            },
            method: {
                reload() {
                    this.isRouterAlive = false //先关闭
                    this.$nextTick(() => {
                        this.isRouterAlive = true  //再打开
                    })
                }
            }
        })
        export default class extends Vue {}
    </script>
    

    子组件中注入reload:

    <script lang="ts">
    
        import {
            updateStore,//更新门店信息
            getStoresData,//获取门店列表信息
            searchStore//根据门店id和商户id获取门店信息
        } from '@/api/organization.ts'
        
        import App from '@/App.vue'
        
        @Component({
            components: {
                updateStore,
                getStoresData,
                searchStore
            }
        })
    
    	/**
         * 此处的默认输出是集成Vue类(和java中定义实体类跟相似)
         */
        export default class createTasks extends Vue {
        	//此处注入relod
        	inject:['reload'];
    
    		private async ensureDialog() {
                let res = await updateStore(this.form)
                this.syncDialogVisible = false;
                if (res) {
                    this.$message.success('修改成功');
                }
                //到达此处说明请求响应成功
                this.reload();//此处调用根组件的reload方法
            }
    	}
    

    上述做法不生效,如果有大神知道哪个不对,还望不吝赐教。

    4、v-on:param父组件监听子组件事件

    我们知道Vue有一个特点,只要vue实例中的数据属性值发生改变,页面中使用v-model或者:data渲染绑定的数据也会随之改变,通常情况下展示数据的界面为父组件,需要对父组件中的某一条数据进行增删改查操作时,都会响应弹出一个组件框悬浮在父组件之上单独展示某一条数据的内容,而这个悬浮组件就可以看做是子组件。

    所以我们只要在父组件中监听到子组件的行为事件,就可以在进行当前页面的局部数据刷新(非重新加载)。

    父组件:index.vue

    <template>
      <div class="data-container">
          <h3>门店管理</h3>
    
        <el-table
          :data="list"
          fit
          highlight-current-row
          :header-cell-style="{color:'#5373e0',background:'#f3f6fb'}"
          style="width: 100%">
    	</el-table>
    
    	<addStore :dialogVisible.sync="dialogVisible" v-on:post="getList" @refreshList="getList"></addStore>
    	<setCode :dialogVisible.sync="dialogVisible1" @refreshList="getList" :code="codes"></setCode>
    	<updateStore :dialogVisible.sync="dialogVisible2" v-on:put="getList" @refreshList="getList" :storeIds="storeId"></updateStore>
    	<setUse :dialogVisible.sync="dialogVisible3" @refreshList="getList" @getAppId="getAppIds"></setUse>
    	
    	<pagination v-show="total>0" :total="total" :page.sync="pageNo" :limit.sync="pageSize" @pagination="getList" />
    	</div>
    </template>
    
    <script lang="ts">
        
        import addStore from '@/views/organization/addStore.vue'
        import Pagination from "@/components/Pagination/index.vue";
        import setCode from '@/views/organization/setCode.vue'
        import updateStore from '@/views/organization/updateStore.vue'
        import setUse from '@/views/organization/setUse.vue'
        @Component({
            components: {
                addStore,
                Pagination,
                setCode,
                updateStore,
                setUse
            }
        })
        export default class extends Vue {
    
            private list: any[] = [];
            private pageNo: number = 1;
            private pageSize: number = 10;
            private total: number = 0;
            private dialogVisible: boolean = false;
            private dialogVisible1: boolean = false;
            private dialogVisible2: boolean = false;
            private dialogVisible3: boolean = false;
            private appId: string = '';
            private codes: string = '';
            private storeId: string = '';
            private storeForm = {
                storeName: '',
                storeNumber: ''
            }
            private form = {
                totalAmount: '',
                body: ''
    
            }
            created() {
                this.getList()
            }
    
            private async getList() {
                let data = await getStoresData(this.pageNo, this.pageSize, this.storeForm)
                this.list = data.items; //查询到的门店列表
                this.total = this.list.length; //查询到的总记录数
            }
        }
    </script>
    

    可以看到上述父组件中包含了以下子组件:

    //新增门店子组件
    <addStore :dialogVisible.sync="dialogVisible" v-on:post="getList" @refreshList="getList"></addStore>
    
    //更新门店子组件
    <updateStore :dialogVisible.sync="dialogVisible2" v-on:put="getList" @refreshList="getList" :storeIds="storeId"></updateStore>
    

    getList方法的作用就是更新当前父组件要展示的数据:

    private async getList() {
         let data = await getStoresData(this.pageNo, this.pageSize, this.storeForm)
         this.list = data.items; //查询到的门店列表
    }            
    

    getStoresData方法:

    //分页条件查询商户下门店
      export const getStoresData = (pageNo:number,pageSize:number,data:any) =>
        request({
          url: `/merchant/my/stores/merchants/page?pageNo=${pageNo}&pageSize=${pageSize}&tenantId=${UserModule.tenantId}`,
          method: 'post',
          data
      })
    

    渲染数据:

    this.list = data.items; //查询到的门店列表
    
    <el-table
          :data="list"
          fit
          highlight-current-row
          :header-cell-style="{color:'#5373e0',background:'#f3f6fb'}"
          style="width: 100%">
        </el-table>
    

    更新数据子组件updaStore.vue:

    <template>
      <el-dialog title="修改门店信息" :visible.sync="syncDialogVisible" @open="opend">
        <el-form :inline="false">
          <el-form-item label="门店名称:" :label-width="formLabelWidth" :rules="[{required:true}]">
            <el-input v-model="form.storeName"></el-input>
          </el-form-item >
    
          <el-form-item label="门店地址:" :label-width="formLabelWidth">
            <el-input v-model="form.storeAddress"></el-input>
          </el-form-item>
    
          <el-form-item label="门店编号:" :label-width="formLabelWidth">
            <el-input v-model="form.storeNumber"></el-input>
          </el-form-item>
    
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="syncDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensureDialog">确 定</el-button>
        </div>
        
      </el-dialog>
    </template>
    
    <script lang="ts">
        @Component({
            components: {
                updateStore,
                getStoresData,
                searchStore
            }
        })
    
        export default class createTasks extends Vue {
            @PropSync('dialogVisible', {
                type: Boolean,
                default: false
            })
            syncDialogVisible!: boolean
            @PropSync('storeIds', {
                type: String
            })
            storeId!: string
    
            private form = {
                id: 0,
                storeAddress: '',
                storeName: '',
                storeNumber: 0,
                parentId: 0,
                storeStatus: '',
                merchantId: 0
            }
    
            private storeForm = {
                storeNumber: '',
                storeName: ''
            }
    
            list: any[] = [];
            pageNo: number = 1;
            pageSize: number = 10;
            total: number = 0;
            private filterData: any[] = [];
            private opend() {
                this.getList();
            }
            private async getList() {
                let res = await searchStore(this.storeId);
                this.form = res.result;
    		}
            private async ensureDialog() {
                let res = await updateStore(this.form)
                this.syncDialogVisible = false;
                if (res) {
                    this.$message.success('修改成功');
                }
            }
        }
    </script>
    

    实际应用场景:
    在这里插入图片描述
    在这里插入图片描述
    在子组件updateStore.vue中,点击确定修改,修改成功之后在当前组件中进行查询门店列表getStoresData:

    private async ensureDialog() {
                let res = await updateStore(this.form)
                this.syncDialogVisible = false;
                if (res) {
                    this.$message.success('修改成功');
                }
    			//此处查询列表信息
                let ret = await getStoresData(this.pageNo, this.pageSize, this.storeForm);
                this.list = ret.items;
                this.total = this.list.length;
            }
    

    按理论是查询到了修改之后的门店列表list,但是当前是在子组件中,list和父组件index.vue中的list作用域不同,所以父组件中的内容也不会发生改变同步更新,那怎么办呢?

    上述我们说了,我们需要父组件监听子组件的事件,当子组件完成相应的操作请求之后可以触发父组件所监听的回调函数,让其父组件index.vue实现list的更新,刷新页面中的数据。

    在父组件index.vue中:

    //更新门店子组件
    <updateStore :dialogVisible.sync="dialogVisible2" v-on:put="getList" @refreshList="getList" :storeIds="storeId"></updateStore>
    

    v-on:put="getList"其中的put就是监听子组件的一个可触发事件,所以我们可以在子组件中完成put更新请求之后,触发该事件,让父组件来完成同步更新渲染数据。

    此处完成同步更新有两种方式:

    • 子组件直接触发父组件的监听事件,父组件查询列表信息
    • 子组件将查询好的列表信息,在触发监听事件同时传递给父组件

    第一种方式:直接触发监听事件

    private async ensureDialog() {
                let res = await updateStore(this.form)
                this.syncDialogVisible = false;
                if (res) {
                    this.$message.success('修改成功');
                }
                //触发父组件监听事件put
    			this.$emit('put');
            }
    
    //父组件监听到事件put
    v-on:put="getList"
    
    //调用getList方法重新查询列表信息(此处的this.list就是渲染界面的绑定属性),这样完成数据刷新,而不用重新加载整个页面
    private async getList() {
                let data = await getStoresData(this.pageNo, this.pageSize, this.storeForm)
                this.list = data.items; //查询到的门店列表
                this.total = this.list.length; //查询到的总记录数
            }
    

    第二种方式:触发监听事件的同时传递数据

    private async ensureDialog() {
                let res = await updateStore(this.form)
                this.syncDialogVisible = false;
                if (res) {
                    this.$message.success('修改成功');
                }
    			//此处查询列表信息
                let ret = await getStoresData(this.pageNo, this.pageSize, this.storeForm);
                let = ret.items;
                 = this.list.length;
                 //触发父组件监听事件put,同时传递数据(后面的皆为参数数据)
    			this.$emit('put',ret.items,ret.items.length);
            }
    
    //父组件监听到事件put
    v-on:put="getList"
    
    //根据子组件传递过来的数据进行同步更新渲染(此方法的参数列表个数要与所监听的事件传递的参数个数保持一致)
    private async getList(param1,param2) {
                this.list = param1; //子组件传递过来的列表数据
                this.total = param2; //子组件传递过来的列表记录数
            }
    

    addStore.vue子组件同样可以用此方法完成同步更新渲染。

    参考文档:

    好了就到这吧!!!


    在这里插入图片描述

    一起学编程,让生活更随和!如果你觉得是个同道中人,欢迎关注博主公众号:【随和的皮蛋桑】。专注于Java基础、进阶、面试以及计算机基础知识分享🐳。偶尔认知思考、日常水文🐌。

    在这里插入图片描述

    展开全文
  • web元件库 ElementUI元件库+后台模板页面+官网组件 pc元件库(兼容Axure9),web元件库及常用后台页面面板。
  • Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,本文介绍了bootstrap的常用组件和栅格式布局详解,兴趣的可以了解一下
  • delphi常用组件

    2013-08-19 13:08:22
    delphi常用组件的简单介绍,和基本组件的基本属性。
  • flutter常用组件

    千次阅读 2022-01-14 21:44:15
    Scaffold1、MaterialApp2、Scaffold三、Container 组件、Text 组件1、Text 组件2、Container 组件四、图片组件1、Image 组件2、引入本地图片3...、StatefulWidget 状态组件七、BottomNavigationBar 自定义底部导航条...

    一、自定义组件

    在Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidgetStatefulWidget

    StatelessWidget: 无状态组件,状态不可变的widget
    StatefulWidget: 有状态组件,持有的状态可能在widget 生命周期改变

    import 'package:flutter/material.dart';
    void main(){
    	runApp(MyApp());
    }
    class MyApp extends StatelessWidget{
        @override
        Widget build(BuildContext context) {
            // TODO: implement build
            return Center(
                child: Text(
                	"我是一个文本内容",
                	textDirection: TextDirection.ltr,  // 文字方向
                    // 文字样式
                	style: TextStyle(
                        fontSize: 40.0,
                        fontWeight: FontWeight.bold,
                        // color: Colors.yellow
                        color: Color.fromRGBO(255, 222, 222, 0.5)
                    ),
                ),
            );
        }
    }
    

    二、MaterialApp 和 Scaffold

    1、MaterialApp

    MaterialApp 是一个方便的Widget,它封装了应用程序实现 Material Design 所需要的一些Widget。一般作为顶层widget 使用。

    常用的属性:
    home(主页)
    title(标题)
    color(颜色)
    theme(主题)
    routes(路由)

    2、Scaffold

    Scaffold 是Material Design 布局结构的基本实现。此类提供了用于显示drawer、snackbar 和底部 sheet 的API。

    Scaffold 有下面几个主要属性:
    appBar - 显示在界面顶部的一个AppBar。
    body - 当前界面所显示的主要内容Widget。
    drawer - 抽屉菜单控件。

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    // TODO: implement build
        return MaterialApp(
          title: "我是一个标题",
          home: Scaffold(
            appBar: AppBar(
              title: Text('IT 营'),
              elevation: 30.0, //设置标题阴影不需要的话值设置成0.0
            ),
            body: MyHome(),
          ),
          theme: ThemeData(
              // 设置主题颜色
              primarySwatch: Colors.yellow),
        );
      }
    }
    
    class MyHome extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    // TODO: implement build
        return Center(
          child: Text(
            "我是Dart 一个文本内容",
            textDirection: TextDirection.ltr,
            style: TextStyle(
                fontSize: 40.0, fontWeight: FontWeight.bold, color: Colors.black38
    			// color: Color.fromRGBO(255, 222, 222, 0.5)
                ),
          ),
        );
        ;
      }
    }
    

    三、Container 组件、Text 组件

    1、Text 组件

    属性功能
    textAlign文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐)
    textDirection文本方向(ltr 从左至右,rtl 从右至左)
    overflow文字超出屏幕之后的处理方式(clip 裁剪,fade 渐隐,ellipsis 省略号)
    textScaleFactor字体显示倍率
    maxLines文字显示最大行数
    style字体的样式设置

    TextStyle 常用参数:

    属性功能
    decoration文字装饰线(none 没有线,lineThrough 删除线,overline 上划线,underline 下划线)
    decorationColor文字装饰线颜色
    decorationStyle文字装饰线风格([dashed,dotted] 虚线,double 两根线,solid 一根实线,wavy 波浪线)
    wordSpacing单词间隙(如果是负值,会让单词变得更紧凑)
    letterSpacing字母间隙(如果是负值,会让字母变得更紧凑)
    fontStyle文字样式(italic 斜体,normal 正常体)
    fontSize文字大小
    color文字颜色
    fontWeight字体粗细(bold 粗体,normal 正常体)

    2、Container 组件

    属性功能
    alignmenttopCenter:顶部居中对齐
    topLeft:顶部左对齐
    topRight:顶部右对齐
    center:水平垂直居中对齐
    centerLeft:垂直居中水平居左对齐
    centerRight:垂直居中水平居右对齐
    bottomCenter 底部居中对齐
    bottomLeft:底部居左对齐
    bottomRight:底部居右对齐
    marginmargin 属性是表示Container 与外部其他组件的距离。
    margin: EdgeInsets.all(20.0)
    paddingpadding 就是Container 的内边距, 指Container 边缘与Child 之间的距离
    padding: EdgeInsets.all(10.0)
    transform让Container 进行一些旋转之类的
    transform: Matrix4.rotationZ(0.2)
    height容器高度
    width容器宽度
    child容器子元素
    decoration组件样式
    decoration: BoxDecoration(
      color: Colors.blue,
      // 边框样式
      border: Border.all(
        color: Colors.red,
        width: 2.0,
      ),
      // 边框圆角
      borderRadius:
        BorderRadius.all(
          Radius.circular(8.0)
        )
    )
    

    四、图片组件

    1、Image 组件

    图片组件是显示图像的组件,Image 组件有很多构造函数,这里例举两个:
    Image.asset, 本地图片
    Image.network 远程图片

    Image 组件的常用属性:

    属性名类型说明
    alignmentAlignment图片的对齐方式
    color 和
    colorBlendMode
    设置图片的背景颜色,通常和colorBlendMode 配合一起使用,这样可以使图片颜色和背景色混合。
    fitBoxFitfit 属性用来控制图片的拉伸和挤压,这都是根据父容器来的。
    BoxFit.fill: 全图显示,图片会被拉伸,并充满父容器。
    BoxFit.contain: 全图显示,显示原比例,可能会有空隙。
    BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
    BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
    BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
    BoxFit.scaleDown:效果和contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大。
    repeatImageRepeatImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。
    ImageRepeat.repeatX: 横向重复,纵向不重复。
    ImageRepeat.repeatY:纵向重复,横向不重复。
    width宽度 一般结合ClipOval 才能看到效果
    height高度 一般结合ClipOval 才能看到效果
    return Center(
      child: Container(
        child: Image.network(
            "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
            alignment: Alignment.topLeft,
            color: Colors.red,
            colorBlendMode: BlendMode.colorDodge,
            // repeat: ImageRepeat.repeatX,
            fit: BoxFit.cover,
          ),
        width: 300.0,
        height: 400.0,
        decoration: BoxDecoration(
          color: Colors.yellow
        ),
      ),
    );
    

    2、引入本地图片

    图片组件

    然后,打开 pubspec.yaml 声明一下添加的图片文件

    图片组件2

    代码中使用

    child: Container(
      child: Image.asset("images/a.jpeg",
        fit:BoxFit.cover
      ),
      width: 300.0,
      height: 300.0,
      decoration: BoxDecoration(
        color: Colors.yellow
      ),
    )
    

    3、实现圆角图片

    child: Container(
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(20),
            image: DecorationImage(
                image: NetworkImage("http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg"),
                fit: BoxFit.cover
            )
        ),
    ),
    

    4、实现圆形图片

    Center(
        child: ClipOval(
            child: Image.network(
                "https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
                width: 150.0,
                height: 150.0,
            ),
        )),
    

    五、列表组件

    列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。

    列表有以下分类:
    1、垂直列表
    2、垂直图文列表
    3、水平列表
    4、动态列表
    5、矩阵式列表

    1、ListView 组件

    属性类型说明
    scrollDirectionAxisAxis.horizontal 水平列表
    Axis.vertical 垂直列表
    paddingEdgeInsetsGeometry内边距
    resolvebool组件反向排序
    childrenList列表元素
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    // TODO: implement build
        return Center(
          child: ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.phone),
                title: Text(
                  "this is list",
                  style: TextStyle(fontSize: 28.0),
                ),
                subtitle: Text('this is list this is list'),
              ),
              ListTile(
                title: Text("this is list"),
                subtitle: Text('this is list this is list'),
                trailing: Icon(Icons.phone),
              ),
              ListTile(
                title: Text("this is list"),
                subtitle: Text('this is list this is list'),
              )
            ],
          ),
        );
      }
    }
    

    水平列表

    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    // TODO: implement build
        return Container(
            height: 200.0,
            margin: EdgeInsets.all(5),
            child: ListView(
              scrollDirection: Axis.horizontal,  // 定义水平列表
              children: <Widget>[
                Container(
                  width: 180.0,
                  color: Colors.lightBlue,
                ),
                Container(
                  width: 180.0,
                  color: Colors.amber,
                  child: ListView(
                    children: <Widget>[
                      Image.network(
                          'https://resources.ninghao.org/images/childhood-in-a-picture.jpg'),
                      SizedBox(height: 16.0),
                      Text(
                        '这是一个文本信息',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 16.0),
                      )
                    ],
                  ),
                ),
                Container(
                  width: 180.0,
                  color: Colors.deepOrange,
                ),
                Container(
                  width: 180.0,
                  color: Colors.deepPurpleAccent,
                ),
              ],
            ));
      }
    }
    

    动态列表(动态循环数据)

    class HomeContent extends StatelessWidget {
      List list = new List();
      HomeContent({Key key}) : super(key: key) {
        for (var i = 0; i < 20; i++) {
          list.add("这是第${i}条数据");
        }
        print(list);
      }
      @override
      Widget build(BuildContext context) {
        return ListView.builder(  // 定义动态列表
          itemCount: this.list.length,
          itemBuilder: (context, index) {
    // print(context);
            return ListTile(
              leading: Icon(Icons.phone),
              title: Text("${list[index]}"),
            );
          },
        );
      }
    }
    

    2、GridView 组件

    GridView 创建网格列表有多种方式,主要介绍两种:

    1、可以通过GridView.count 实现网格布局
    2、通过GridView.builder 实现网格布局

    常用属性:

    名称类型说明
    scrollDirectionAxis滚动方向
    paddingEdgeInsetsGeometry内边距
    resolvebool组件反向排序
    crossAxisSpacingdouble水平子Widget 之间间距
    mainAxisSpacingdouble垂直子Widget 之间间距
    crossAxisCountint一行的Widget 数量
    childAspectRatiodouble子Widget 宽高比例
    children[ ]子元素
    gridDelegateSliverGridDelegateWithFixedCrossAxisCount(常用)
    SliverGridDelegateWithMaxCrossAxisExtent
    控制布局,主要用在GridView.builder 里面

    GridView.count 实现网格布局:

    class LayoutContent extends StatelessWidget {
      List<Widget> _getListData() {
        var tempList = listData.map((value) {
          return Container(
            child: Column(
              children: <Widget>[
                Image.network(value["imageUrl"]),
                SizedBox(height: 12),
                Text(value["title"],
                    textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
              ],
            ),
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
          );
        });
    // ('124124','124214')
        return tempList.toList();
      }
    
      @override
      Widget build(BuildContext context) {
    // TODO: implement build
        return GridView.count(
          padding: EdgeInsets.all(20),
          crossAxisCount: 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
    // childAspectRatio:0.7,
          children: this._getListData(),
        );
      }
    }
    

    GridView.builder 实现网格布局:

    class LayoutContent extends StatelessWidget {
      Widget _getListData(context, index) {
        return Container(
          child: Column(
            children: <Widget>[
              Image.network(listData[index]["imageUrl"]),
              SizedBox(height: 12),
              Text(listData[index]["title"],
                  textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
            ],
          ),
          decoration: BoxDecoration(
              border: Border.all(
                  color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
        );
      }
    
      @override
      Widget build(BuildContext context) {
    // TODO: implement build
        return GridView.builder(
          itemCount: listData.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    //横轴元素个数
              crossAxisCount: 2,
    //纵轴间距
              mainAxisSpacing: 20.0,
    //横轴间距
              crossAxisSpacing: 10.0,
    //子组件宽高长度比例
              childAspectRatio: 1.0),
          itemBuilder: this._getListData,
        );
      }
    }
    

    六、StatefulWidget 有状态组件

    • 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget / StatefulWidget。
    • StatelessWidget 是无状态组件,状态不可变的 widget
    • StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变。
    • 通俗的讲:如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget
    class HomePage extends StatefulWidget {
      //Flutter2.2.0之后需要注意把Key改为可空类型  {Key? key} 表示Key为可空类型
      HomePage({Key? key}) : super(key: key);
    
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
    
      List list=[];
      @override
      Widget build(BuildContext context) {
        return ListView(
          children: <Widget>[
            Column(
              children: this.list.map((value){
                return ListTile(
                  title: Text(value),
                );
              }).toList()
            ),
            SizedBox(height: 20),
            //Flutter2.x以后可以使用ElevatedButton替代RaisedButton也可以继续使用RaisedButton
            ElevatedButton(
              child: Text("按钮"),
              onPressed: (){
                // 通过 setState 方法改变状态
                setState(() {
                    this.list.add('新增数据1');
                    this.list.add('新增数据2');
                });
              },
            )
          ],
        );
      }
    }
    

    七、BottomNavigationBar 自定义底部导航条

    BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,BottomNavigationBar 是 Scaffold 组件的参数。

    BottomNavigationBar 常见的属性:

    属性说明
    itemsList 底部导航条按钮集合
    iconSizeicon 大小
    currentIndex默认选中第几个
    onTap选中变化回调函数
    fixedColor选中的颜色
    typeBottomNavigationBarType.fixed
    BottomNavigationBarType.shifting
    Scaffold(
        appBar: AppBar(
            title: Text('Flutter Demo')
        ),
        body: this._pagesList[this._curentIndex],  // 通过改变值实现页面切换
        bottomNavigationBar: BottomNavigationBar(
            currentIndex: _curentIndex,
            onTap: _changePage,
            fixedColor: Colors.black,
            type: BottomNavigationBarType.fixed,
            items: [
                BottomNavigationBarItem(
                    title:Text("首页"),
                    icon:Icon(Icons.home)
                ),
                BottomNavigationBarItem(
                    title:Text("分类"),
                    icon:Icon(Icons.category)
                ),
                BottomNavigationBarItem(
                    title:Text("设置"),
                    icon:Icon(Icons.settings)
                ),
            ],
        ),
    )
    
    展开全文
  • 这个资源是一个思维导图的形式,主要的目的是学习bootstrap中常用的样式和常用组件。方便我们在后面学习python的web框架的时候遇到写页面的时候可以达到我们的预期。如果不能看明白的话,在后期还会上传一些例子和...
  • vue常用组件

    千次阅读 2022-05-11 13:28:07
    一、Vue.js UI组件 二、Vue.js开发框架 三、Vue.js实用库 四、Vue.js服务端 五、Vue.js辅助工具 六、Vue.js应用实例 七、Vue.js Demo示例 八、详细分类 01、UI组件及框架 02、滚动scroll组件 03、slider...
  • ElementUI:常用组件

    千次阅读 2019-10-14 13:31:35
    ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。 官网地址:http://element-cn.eleme.io/#/zh-CN XX健康项目后台系统就是使用ElementUI来...
  • 常用的vue组件库总结

    千次阅读 2021-10-15 09:57:00
    常用的vue组件库总结 1、element-ui 此组件框算是vue的标配 用途:适用于PC端开发 地址:点击查看 2、Vant Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。 **用途:**适用...
  • Android 四大组件有哪些 功能是什么

    千次阅读 2020-11-19 09:06:13
    Android的四大组件分别是: 1.activity 显示界面 2.service 服务 3.Broadcast Receiver 广播 4.Content Provider 数据通信 1. activity 显示页面: a.首先activity就是一个单独的窗口; 一个activity相当于我们...
  • html页面引入vue组件

    千次阅读 2021-06-29 08:16:42
    html页面引入vue组件需要在页面引入http-vue-loader.js注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会跨域问题,可以在本地配置一个nginx转发,再用浏览器访问...component.vueHello {{who}}...
  • vue常用组件封装

    千次阅读 2020-10-12 19:09:51
    if (isLogin) { if (to.path === ‘/login’) { sessionStorage.clear() } next() } else { //如果用户token不存在则跳转到login页面 if (to.path === ‘/login’) { next() } else { next(‘/login’) } } }) base...
  • 微信小程序 常见组件

    千次阅读 2021-09-25 21:18:14
    重点为小程序中常用的布局组件 view,text,rich-text,button,image,navigator,icon,swipe,radio,checkbox等 文章目录常见组件viewtextimageswiper 轮播图组件navigator 导航组件rich-text 富文本button外观属性开放...
  • 十大常用web前端UI组件库,赶紧收藏

    千次阅读 2022-04-07 15:15:40
    今天主要介绍web前端常用的UI库,这些网站基本都是背靠互联网大厂,值得web前端开发者收藏,当然还是要多多学习使用。 Vant 一款有赞出品轻量、可靠的的移动UI组件库,目前支持 Vue2、Vue3、React,微信和支付宝小...
  • UI组件库一览表

    千次阅读 2022-03-29 10:16:02
    1、Bootstrap ... 2、WeUI ...VUX - Vue 移动端 UI 组件库VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。https://vux.li/ 4、Ant Design Mobile ...
  • Axure8、Axure9最热门,最常用的92个axure组件库,包含Element最新的设计元素,包括ant最新的组件,还有常用的各种文件库,一直再适用,原型从未被超越,不要觉得贵,下载了绝对不会后悔~
  • Axure组件库-3,包括22个组件组件列表如下: 1、表格元素 2、菜单和按钮 3、操作系统窗口 4、操作系统元素 5、草稿样式库文件 6、窗体和容器 7、导航和分页 8、广告位 9、广告位标准尺寸组件库 ...22、页面布局
  • App 组件.rplib

    2019-11-13 15:41:28
    axure rp最全精选组件库大全 几十种 包括:各种手机,表单,弹窗,搜索,宫格。。
  • Vue开发中常用组件

    千次阅读 2019-04-09 16:13:40
    1. vue-countTo (它是一个vue组件,将在指定的持续时间内计入目标数) 安装使用: npm install vue-count-to 例子: <template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'>&...
  • 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了问题,因为子组件中没有 onShow , 执行不到更新数据操作的函数。 但是一种方式可以解决,如下图所示: 示例代码 代码干净...
  • uni-app 常用组件实战

    千次阅读 2019-06-17 20:17:28
    view 视图容器 文档地址 用于包裹其他组件 ...如果是页面需要实现上拉加载、下拉刷新,推荐使用 页面的滑动加载和下拉刷新 缺陷和使用注意 适配问题:请勿在 scroll-view 中使用 canvas、textarea、map、...
  • 微信小程序常用视图容器组件

    千次阅读 2022-03-15 22:33:57
    微信小程序常用视图容器组件1、组件概述2、常用的试图容器组件2.1 view2.1.1 案例2.2 scroll-view2.2.1 案例2.3 swiper2.3.1 案例 1、组件概述   组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果。...
  • JSP 动作元素有哪些?作用是什么? jsp的标准动作元素十种之多,但是常用的就以下这六种 jsp:include:在页面被请求的时候引入一个文件。 jsp:useBean:寻找或者实例化一个JavaBean。 jsp:setProperty:设置...
  • Bootstrap框架常用组件

    千次阅读 2022-02-13 21:24:55
    组件是构成页面中独立结构单元,是对结构的抽象,它主要以页面结构形式存在,可复用性很强。组件的使用并不复杂,每个组件拥有自己的作用域,每个组件区域之间独立工作,并且互不影响。 组件可以自己的属性和方法...
  • 目录(一)Java Swing概述(二)窗口(1)JFrame常用方法(2)菜单条、菜单、菜单项(三)常用组件与布局(1)常用组件(2)常用容器(3)常用布局(四)处理事件(一)事件处理模式(二)ActionEvent事件(三)...
  • React组件间通信(常用方式,简单易用)

    千次阅读 多人点赞 2021-10-26 20:29:47
    React知识中一个主要内容便是组件之间的通信,以下列举几种常用组件通信方式,结合实例,通俗易懂,建议收藏。 一、父子组件通信 原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调...
  • 一、页面水印组件:WaterMark ,根据...四、骨架屏组件:ProSkeleton,类似进度条效果,用户一个过渡,增强用户体验。 五、ProField 原子组件:统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 205,106
精华内容 82,042
热门标签
关键字:

常用的页面组件有哪些