grails 布局

react-native grid 排序-概述说明以及解释1.引言1.1 概述概述部分的内容可以从以下方面展开：React Native是Facebook开发的一个用于构建移动应用程序的框架。

它允许开发人员使用JavaScript和React的语言组合来构建本机移动应用程序。

其中，Grid布局是React Native中常用的布局方式之一，它能够将UI元素按照行列的形式进行排列，使得应用界面更加整齐和美观。

Grid布局是一种二维布局系统，将页面划分为一系列的行和列。

在React Native中，使用Flexbox布局来实现Grid布局。

Flexbox是一种弹性盒子布局模型，它可以根据容器的大小和元素的需求自动分配空间，使得UI元素能够在容器内部自动适应布局。

通过设置行和列的属性，我们可以实现各种复杂的Grid布局。

在React Native中实现Grid排序有多种方法。

我们可以使用Flexbox 布局的属性来控制元素的位置和大小，如flexDirection和justifyContent 等。

另外，我们还可以使用其他的库或组件来辅助进行Grid排序，如react-native-grid-view和react-native-flexbox-grid等。

这些库和组件提供了更多的布局选项和功能，使得Grid排序更加灵活和方便。

本文将通过介绍Grid布局的基本概念和原理，以及React Native中的Grid排序的实现方法和技巧，帮助读者更好地理解和应用Grid布局。

同时，本文还将探讨Grid排序在移动应用开发中的应用场景和优势，并展望Grid排序的未来发展方向。

通过阅读本文，读者将能够了解Grid布局在React Native中的基本原理和用法，以及如何灵活使用Grid排序实现更复杂和美观的移动应用界面。

希望本文能够对React Native开发者和移动应用开发者有所帮助，并为Grid排序的使用和发展提供一些思路和参考。

第26卷第8期 计算机应用与软件Vol 126No .82009年8月 Computer App licati ons and Soft w are Aug .2009基于Gra ils 框架的W eb 应用开发蔡波斯(北京林业大学管理科学与工程系,北京100083)收稿日期:2009-02-14。

蔡波斯,本科生,主研领域:J2EE,管理信息系统。

摘　要 在分析当前W eb 应用开发的现状之后,介绍了新兴框架Grails,并对其MVC 各层进行了简单的分析。

通过Grails 集成s p ring 的acegi 来开发一个简单的权限管理系统,并对中文化问题的解决方案进行了总结,对运用grails 进行快速开发进行了全面的展示。

总结了Grails 框架在利用java 资源进行企业级开发的优势。

关键词 Java Grails 权限管理D EVELO P ING W EB APPL I CAT IO N BASED O N GRA I L S FRAME WO RKCai Bosi(D epart m ent of M anage m ent Science and Engineering,B eijing Forestry U niversity,B eijing 100083,China )Abstract After analyzing the status quo of current web devel opment,an e merging web fra me work 2Grails is intr oduced .I n this article,first we si m p ly exp lained each layer of MVC model in Grails,then devel oped a si m p le p rivilege manage ment syste m by integrating the acegi in s p ring thr ough Grails,and illustrated the s oluti ons for dis p laying the Chinese infor mati on on Grails πpages .The rap id devel op ing efficiency with Grails has been fully showed as well .Finally,we su mmarised the advantages of Grails fra me in devel op ing the enter p rise 2level app licati on by utilising current java res ources .Keywords Java Grails Privilege management0　引　言当前的W eb 开发呈现三足鼎立的现状,ASP /ASP .NET,PHP,JSP 。

Grails企业web应用开发与部署作者：李茂圣日期：2009年8月20日本人保留所有权利序言Grails是个好东西，在中国算是个新东西，尝鲜总要付出代价。

我喜欢能快速解决问题的方式方法，有些时候即使付出代价，也值了。

在大家都还在犹豫的时候，综合分析后，决定在我们的项目中使用Grails来开发，为什么不选择ROR(Ruby and Rails)，因为是java 出生的，所以选择GOG(Groovy On Grails)。

在将近一年的开发过程中，问题总是不断，总是在不断的尝试、咨询。

国内目前大部分的开发都是居于个人尝试，所以项目实际应用中的问题基本没人解答，在完成我们的前期开发和部署后，我简单的把我一些经验分享给大家，希望大家在将来的实际应用中有所帮助。

如果大家在开发过程中遇到什么问题，也可以进入我们的论坛（Groovy中文论坛：）交流或者直接发EMAIL(vottot@)给我，我们可以一起探讨、解决问题。

本教程主要讲解企业开发环境和部署环境，不会涉及太深入的开发。

同时，感谢每一位支持我们的人，更感谢为GOG推广做出努力的、无私奉献的人。

目录第1章简介1.1Grails介绍1.2Grails应用第2章开发准备2.1安装JDK2.2安装Grails2.3安装数据库2.3安装开发工具第3章Grails WebMail3.1创建第一个Grails程序3.2Grails工程结构3.3创建域(Domain)3.4创建控制器3.5创建视图3.6数据源配置3.7运行Grails程序3.8配置本地开发模式第4章Grails服务器环境4.1Tomcat安装4.2Apache安装4.3Mod_jk连接配置4.4创建自己的服务器配置4.5虚拟主机的配置第5章总结第1章简介Groovy在JAX会议上获得最具创新和创造性项目，注定他将成为一颗新秀，与JAVA的无缝集成，注定是企业级领域的一颗新星。

1.1Grails介绍Grails是一套用于Web敏捷开发的开源框架，它基于Groovy 编程语言，并构建于Spring、Hibernate和其它标准Java框架之上。

1、首先到intellij官网下载 (2)2、下载grails3：https:/// (2)3、将下载的grails压缩包解压到本地 (2)4、鼠标右键单击计算机--高级系统设置--（高级）环境变量 (2)5、在系统变量栏点击新建： (3)6、在系统变量栏找到Path，在末尾加上;%GRADLE_HOME%\bin，确定 (3)7、测试：打开dos命令窗口，运行：grails -version (3)8、配置Java jdk环境变量，jdk安装跟前面grails安装差不多 (4)9、打开intellij,新建grails项目（File-Poeject） (4)10、选择环境支持 (5)8、单击next，输入工程名，Finish，底部状态栏有个在动，说明程序正在添加配置 (5)9、部署项目，启动 (5)10、成功 (6)Intellij 2015+grails-3.1.5环境搭建1、首先到intellij官网下载intellij的安装包：/idea/或/idea/download/#section=windows(说明：intellij有两种版本，即：Community和Ultimate，Community意为社区版，Ultimate 为终极版，建议下载Ultimate这个版本，因为它的功能是最完整的，里面包含了对grails 的支持)。

license server激活：/idea/key.php2、下载grails3：https:///2.1 在grails官网的导航菜单打开Download2.2 点击右上方的Download按钮就可以下载最新版，你还可以选择Github下载其他版本3、将下载的grails压缩包解压到本地4、鼠标右键单击计算机--高级系统设置--（高级）环境变量5、在系统变量栏点击新建：6、在系统变量栏找到Path，在末尾加上;%GRADLE_HOME%\bin，确定7、测试：打开dos命令窗口，运行：grails -version成功8、配置Java jdk环境变量，jdk安装跟前面grails安装差不多8.1 新建变量：JAVA_HOME 变量值：E:\Java\jdk1.88.2 编辑Path，在末尾加上%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;（前面没有分号的加上分号）8.3 新建：变量：CLASSPATH 变量值：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar 8.4 测试：9、打开intellij,新建grails项目（File-Poeject）10、选择环境支持8、单击next，输入工程名，Finish，底部状态栏在动，说明程序正在添加配置9、部署项目，启动10、成功(注：如果要导入grails项目到intellij中，首先要经过前面的步骤，新建一个测试项目先跑起来，这样的话能能测试你的运行环境是否正常，否则在你不知道运行环境是否正常的情况下就开始导入新项目，这样很难排查真正的问题，影响开发速度。

例子：
def c = JbzCargo.createCriteria()
def results = c {
like(“carno", “%11%")
and {
between(“grossweight", 500, 1000)
eq(“driver”, “张三")
}
maxResults(10)
order(“carno", "desc")
ultraediteclipsenetbeansideaj创建你的第一个grails程序cdgrailshomemkdirgrailsappscdgrailsappsgrailscreateappboxinmiscdboxinmisgrailsrunappgrails应用的目录结构conf配置设置数据源controllers控制器domain领域类i18n国际化资源绑定信息servicesservice类等同于本地sessionbeantaglib标签库views视图模版layouts布局模版所有控制器都可使用test测试lib应用所需的自定义库src其它源程序webappweb部分webinf从领域类开始grailscreatedomainclassjbzcargograilsgeneratealljbzcargo运行
准备上路
安装JDK5 下载Grails： 安装Grails：
环境变量：PATH：$GRAILS_HOME/bin
安装数据库：MySql5 文档：
Grails入门指南 Grails中文参考手册
开发环境：ultraedit，eclipse，netbeans，ideaJ
创建你的第一个Grails程序
tareweight(min:0,max:10000)

grid中的高级用法在网页设计和布局中，CSS的Grid布局是一种强大而灵活的工具。

除了常见的基本用法之外，Grid还提供了许多高级功能，可以帮助设计师更好地控制页面布局和元素位置。

1. 嵌套Grid：Grid布局支持嵌套，这意味着可以在一个Grid容器中创建另一个Grid布局。

这使得我们可以更精细地定义网页布局和元素的位置。

通过嵌套Grid，我们可以在一个Grid单元格内创建更复杂的布局，使得页面更具层次感。

2. 自适应网格：Grid提供了自适应网格的功能，这意味着我们可以根据元素的大小和内容自动调整网格的大小和位置。

通过设置grid-template-columns和grid-template-rows属性为auto，网格将自动调整以适应元素的大小。

这使得网页可以适应不同的屏幕尺寸和设备。

3. 网格对齐：Grid布局提供了丰富的网格对齐方式，可以更好地控制元素在网格单元格中的位置。

通过使用justify-items和align-items属性，我们可以水平和垂直对齐单个元素。

而通过使用justify-content和align-content属性，我们可以对齐整个网格中的元素。

4. 自由定位：Grid中的自由定位功能允许我们在网格容器中自由放置元素，而不受网格单元格的限制。

通过使用grid-column-start，grid-column-end，grid-row-start和grid-row-end属性，我们可以精确地指定元素在网格中的位置和跨度。

这使得我们能够更好地控制布局的细节和元素之间的间距。

5. 响应式设计：Grid布局可以与CSS媒体查询一起使用，从而实现响应式设计。

通过在不同的媒体查询中更改网格样式，我们可以根据不同的屏幕尺寸和设备调整网页的布局和元素排列。

这使得网页可以在不同的屏幕上呈现出最佳的视觉效果和用户体验。

Grid布局提供了许多高级用法，使得网页设计师能够更精确地控制页面布局和元素位置。

在这一期的精通Grails 中，Scott Davis 演示如何通过使用层叠样式表（CSS）、模板、标记库（T agLib）等技术来对Grails 应用程序的外观进行有趣的更改。

欢迎阅读第二年度的精通Grails。

正如我在2008 年的最后一篇文章中许诺的一样，在新的一年将使用新的应用程序。

再见了，Trip Planner！让我们欢迎blog 发布系统（blog publishing system）！我已经将这个应用程序命名为Blogito。

在西班牙语中，它表示“little blog”，或者是对笛卡儿的Cogito ergo sum（“我思故我在”）表示敬意。

可从 下载这个完整的应用程序。

在接下来的几篇文章中，您将一步步构建核心的功能。

这篇文章的重点是显著地更改Grails 应用程序的外观。

去年的Trip Planner 的外观很怪异，恐怕只有开发人员才会喜欢（说句公道话，与外观相比，我对核心功能更感兴趣）。

在本文中，通过使用一些CSS 和局部模板进行调整，将得到一个外观新颖的Grails 应用程序。

在这个过程中，您还可以简单温习一下Grails 特性，比如scaffold、自动时间戳、修改默认模板、创建自定义T agLib，以及调整关键配置文件（比如Bootstrap.groovy 和URLMapper.groovy）。

在开始之前，必须安装Grails 1.1。

撰写本文时，它还是beta 版。

安装Grails 1.1Grails 在Java 1.5 或1.6 上运行表现最佳。

通过命令提示符输入java -version，确保Java 版本是比较新的。

Java 1.5 或1.6 就绪之后，安装Grails 的步骤就很简单了：1从Grails 站点下载grails.zip 文件。

2解压缩grails.zip。

3创建一个GRAILS_HOME 环境变量。

4将GRAILS_HOME/bin 添加到PATH。

JavaGUI布局管理器容器可设置布局管理器，管理容器中组件的布局：container.setLayout(new XxxLayout());Java有6种布局管理器，AWT提供了5种：FlowLayoutBorderLayoutGridLayoutGridBagLayoutCradLayoutSwing还提供了⼀种：BoxLayout1、FlowLayout 流式布局顾名思义，组件像⽔流⼀样，从第⼀⾏开始，从左向右依次排列，碰到边界时转到下⼀⾏继续。

三个构造函数：FlowLayout() //使⽤默认参数FlowLayout(int align) //设置对齐⽅式FlowLayout(int align,int hgap,int vgap) //设置对齐⽅式、⽔平间距、垂直间距align是FlowLayout类的常量，⽐如：FlowLayout.LEFT，FlowLayout.CENTER2、BorderLayout 边界布局将容器划分为EAST、WEST、SOUTH、NORTH、CENTER五个部分，每个部分可放置⼀个组件。

2个构造函数：BorderLayout() //使⽤默认参数BorderLayout(int hgap,int vgap) //设置⽔平间距、垂直间距放置组件时需指定位置：container.add(Component comp, Borderlayout.SOUTH); //第⼆个参数是BorderLayout类的常量，指定组件位置container.add(Component comp); //缺省位置时，默认为BorderLayout.CENTER，放在中间⼀共5个位置，⼀个位置最多放1个组件。

当然，可以在⼀个位置放置多个组件，只是后放置的组件会覆盖之前放置的组件。

也可以⼀个都不放。

3、GridLayout ⽹格布局将容器划分为指定⾏数、列数的⽹格，每个格⼦的尺⼨都相同，⼀个格⼦中放置⼀个组件，适合组件⼤⼩差不多的，⽐如放置计算器的按钮。

grid布局详解说明在CSS当中，布局⼀直是⼀个⾮常重要的话题，在漫长的发展时间当中，出现了很多种布局⽅案，但是就整体来说主要分成解决PC端和移动端布局的两⼤类，在这两⼤类中包括例如传统的table布局，后期的display+float+position的布局⽅案，再⽐如CSS3中新增加的Flex布局和多列布局等等，⽽在本篇博⽂中，将会主要讲述⼀种⽐较新的布局⽅案Grid布局。

正是因为Grid布局的年纪较⼩，所以从兼容性上来说，要逊⾊于Flex布局，但是从实际的开发效率上来讲，却是⽐Flex更加强⼤，这也是本篇博⽂的出发点之⼀。

Grid布局从某种意义上来说和Flex布局很类似，都有着⾃⼰的⼀套属性和布局逻辑。

但是从复杂度来讲，是要超过Flex布局的，体现最直观的就是Grid当中包含的属性，数量上远远超过Flex布局。

所以如果你是⼀个新⼈，连Flex都不是很熟练，那么建议你先去研究⼀下Flex布局⽅案。

你可以把Flex理解为⼀维布局，⽽把Grid理解为⼆维布局，如果你对Flex⾮常熟练，将会让你对Grid的学习更加的顺畅。

因为Grid属性较多，你在学习Grid布局之前⼀定要做好⼗⾜的⼼⾥准备。

基本概念Grid布局某种意义上来说，和table是⾮常类似的，⼆者都是在⽹页中构建⼀个表格，然后将内容放进表格中从⽽实现布局的⽬的。

但是作为布局界新⼈的Grid确是远远⽐table更加的强⼤。

⾸先，先来弄清楚在Grid当中⾮常重要的⼀些概念。

容器: 采⽤⽹格布局的区域称之为容器。

项⽬: 容器内部的⼦元素为项⽬。

⾏和列: 既然要在⽹页中构建表格，那么必然存在⾏和列。

单元格: ⾏和列的交叉区域，称为单元格。

⽹格线: 将容器划分成不同区域的线，称之为⽹格线。

如图：开启Grid如何将⼀个容器变成Grid容器呢？可以通过下⾯的属性来设置：display:grid | inline-grid;display:grid可以将容器变为⼀个块级容器，容器内部采⽤⽹格布局，display:inline-grid可以将容器变为⼀个⾏内块容器，容器内部采⽤⽹格布局。

久层（ ｅ ｉｅｃ ） 事务 （ ｒ ｓ ｔｎ 的支持 ； Ｐｒｓ ｎｅ ， ｓｔ Ｔａ ａ ｉ ） ｎ ｃｏ 提供 了 Ｗｅ Ｃ框 架 的 实现 ， 对 于一 些 常 用 的企 业 ｂＭＶ 并 服务 Ａ ＩＡ ｐ ｃｔｎＩｔｆ ｅ 提供 了一致 的模型 Ｐ （ ｐｌａｏ ｅ ａ ） ｉ ｉ ｎ ｒｃ 封装， 是一 个全方 位 的应用 程 序 框架 Ｊ 。这 些 框 架
的出现 ， 一定 程度上 方便 了 Ｊｖ Ｅ的使 用 ， 高 从 ａａＥ 提
是这个原则并不真正地要抛弃配置 ， 约定” 在“ 不能 满足程序需要的情况下 ， 仍然可以使用配置进行有 效 的补 充 。 在 创建 Ｇａｓ ｒｌ框架 的应用 时 ， ｒｉ 会 自动创 建 ｉ Ｇａｓ ｌ
一
了使用 Ｊ ａ Ｅ开发的效率 ， ａ ｖＥ 可是它们使用起来仍 然 比较繁琐， 它们要么需要编写大量的配置文件 ， 要 么需要扩展指定的接 口， 这种使用上 的复杂性有时
业 应用 。平 台 自推 出 以来 ， 就受 到 Ｗｅ 发人 员 ｂ开
视用户 管 理 系统 （ ｕｓｒ ｅ ｎｇｍ ｎ Ｓｓ ｍ， Ｓ ｂｃｂｒＭａａｅ ｅｔ ｙｔ 简 ｉ ｅ 称 Ｓ Ｓ 是数 字 电视 建设 和业 务开 展必 不 可 少 的关 Ｍ） 键 系统 … ， 广 电部 门办理 数 字 电视 业 务 的基 础 和 是
（ 黄河科技学院南区现代教育技 术中心 ， 郑州 ４ ０６ ） ５ ０ ３
摘
要 ：Ｊｖ Ｅ是 目前使 用最 为广泛 的 Ｗｅ 用 开发 平 台，然 而 ，Ｊｖ Ｅ 包含 了一 套 非常 复 ａａＥ ｂ应 ａａＥ
杂 的规 范 ，不容 易学 习掌握且 开发 效率 较低 ，虽然 网络社 区 内不 断 出现 的各 种基 于 Ｊｖ Ｅ的 开 ａａＥ

Grails简介
总体框架图 Grail是一套用于快速Web应用开发的开源框架，它基于Groovy编程语言，并构建于Spring、 Hibernate和其它标准Java框架之上，从而为大家带来一套能实现超高生产力的一站式框架
Grails环境配置
2.1 下载和安装 让Grails运行起来的第一步是安装发行包。请按照如下步骤： 下载 Grails的二进制发行包并解压到你指定的目录下 新增 GRAILS_HOME 环境变量并指向你解压发行包时选择的目录 Unix/Linux系统上通常在你的profile文件中添加 export GRAILS_HOME=/path/to/grails 来设置环境变量 Windows系统上则是在 我的电脑/属性/高级/环境变量 中添加相同的环境变量 现在需要添加 bin 目录到 PATH 环境变量中： Unix/Linux系统上在profile中继续添加 export PATH="$PATH:$GRAILS_HOME/bin" Windows系统上修改 我的电脑/属性/高级/环境变量 中的 Path 环境变量
Grails简介
Grails是构建在现有的像Spring、Hibernate这样的Java技术之上。 Grails是个一栈式开发框架，它尝试通过核心技术和插件技术来解决许多Web开发难题。Grails包含了如下内 容： 由 Hibernate 构成的易于使用的 Object Relational Mapping (ORM)层 称为 Groovy Server Pages (GSP) 的展现层技术 基于 Spring MVC 的控制层 由基于 Groovy 的 Gant 工具构建的命令行脚本环境 一个内嵌的 Jetty 容器被配置用来快速重载应用 Spring容器内建的依赖注入技术 基于 Spring 的 MessageSource 核心概念的国际化 (i18n) 支持 基于 Spring 的抽象事务概念的事务服务层 Grails使用“约定优于配置”原则来配置自己。

【Grails基础】——刘晓涛老师教授——李孟锋（08-10-7字）1.创建项目：create-app BookShop2.切换到项目目录：cd BookShop3.创建领域类：create-domain-class book4. 在BookShop\grails-app\domain 目录下找到 Book.groovy 输入：5.创建控制器：create-controller book ：6. 在BookShop\grails-app\controllers 目录下找到 BookController.groovy 输入： 7、运行run-app8、结果：9、添加：10.静态产生工件：generate-controller：产生控制器generate-views:产生视图generate-all：产生控制器与视图这里使用：generate-all book执行后在views中产生了book目录，book下面产生了create.gsp/edit.gsp/list.gsp/show.gsp文件为什么没有delete.gsp?实际上是因为删除不需要用户输入相应数据，所以不需要提供表单接受输入。

【导Grails项目到Eclipse后的环境配置：】(1)需要到我的电脑--》属性--》高级--》环境变量配置GRAILS_HOME为C:\grails-1.0.2\grails (到安装目录下grails为止)。

(2)在Eclispe中项目属性--》构建路径--》添加变量--》加入GRAILS_HOME变量。

(3)运行时配置参数-Dbase.dir=${project_loc}会报错,去掉它就可以了。

(4)Error starting Sun's native2ascii:把jdk下的tools.jar加到classpath中。

（5）运行出错：重启myeclipse【将Grails控制台添加到Eclipse：】（1）run-->External Tools-->Open External Tools Dialog（2）设置Location: C:\grails-1.0.2\bin\console.bat（3）设置Work Directory: C:\grails-1.0.2\BookShop (换成你的项目路径) （4）这样就可以在Eclipse环境内部执行create-domain-class等命令了！【继续：】1.给领域类加入约束：（可以查看安装目录下C:\grails-1.0.2\grails_1.0_documentation.chm手册）2、重新执行：generate-all book（经常忘记!如果使用脚手架scaffold则不需要重新执行! 执行过程中会出现是否要覆盖，选择【Y】）3、修改BookController.groovy的list闭包把params.max = 10改为params.max = 5，表示每页显示5条记录。

Eclipse下的Grails开发环境搭建详解听说Eclipse对Grails支持不是很好，相反，IntelliJ和NetBeans都比Eclipse要好。

IntelliJ我是没用过，不好发表什么看法，不过经过这两天对Eclipse和NetBeans在开发Grails项目上的试用，发现确实NetBeans使用起来要方便一点。

这是一句比较客观的话，因为本身我自己大部分时间还是一个Eclipse使用者。

那么下面我们就进入正题：1. Grails环境安装不管用NetBeans还是Eclipse，都需要这一步，即首先将Grails下载下来，并安装好。

Grails官网是：/下载链接：/Download这一步很简单，相信大家都不会有什么问题。

只是有一个细节必须得提一下，那就是GRAILS_HOME环境变量的设置问题，它必须与你所设置的PATH变量(添加了%GRAILS_HOME%\bin目录之后的那个PATH)在同一个级别上。

要么都是用户级变量，要么都是系统级变量。

我这里全部设置在用户级变量下，如图：之后，运行cmd，输入grails命令，回车，如果能够显示一条帮助信息，那么表示这一步成功完成。

(我这里使用的版本是Grails 1.0.3)2. Eclipse安装这里也只有一点需要说明：因为Grails开发是需要编辑gsp文件的，它实际上就是一个使用了一些特殊标签的jsp文件，而Classic版本的 Eclipse不带有jsp编辑器，所以建议下载JEE版本的Eclipse。

当然，如果你觉得你对JSP语法太熟悉了，完全可以不用它的JSP 编辑器，而且你机器内存实在太小的话，可以考虑用Classic版本。

下面将以最新的Eclipse 3.4.0 JEE版本为例。

3. 安装Groovy Eclipse插件其官方网址是：/Eclipse+Plugin下载地址是：/groovy/distributions/update/GroovyEclipse.zip像一般的Eclipse插件安装一样，可以选择用Software Update安装或用link的方式进行安装，在我之前的博客中详细介绍过Eclipse插件安装的问题，而且网上资料也很多，这里就不详细讲了。

CSSGrid布局完全指南（图解Grid详细教程）参考:CSS Grid 布局是 CSS 中最强⼤的布局系统。

与 flexbox 的⼀维布局系统不同，CSS Grid 布局是⼀个⼆维布局系统，也就意味着它可以同时处理列和⾏。

通过将 CSS 规则应⽤于⽗元素 (成为 Grid Container ⽹格容器)和其⼦元素（成为 Grid Items ⽹格项），你就可以轻松使⽤Grid(⽹格) 布局。

简介CSS Grid(⽹格) 布局（⼜称为 “Grid(⽹格)” ），是⼀个⼆维的基于⽹格的布局系统，它的⽬标是完全改变我们基于⽹格的⽤户界⾯的布局⽅式。

CSS ⼀直⽤来布局我们的⽹页，但⼀直以来都存在这样或那样的问题。

⼀开始我们⽤表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些⽅法本质上都是只是 hack ⽽已，并且遗漏了很多重要的功能（例如垂直居中）。

Flexbox 的出现很⼤程度上改善了我们的布局⽅式，但它的⽬的是为了解决更简单的⼀维布局，⽽不是复杂的⼆维布局（实际上 Flexbox 和Grid 能协同⼯作，⽽且配合得⾮常好）。

Grid(⽹格) 布局是第⼀个专门为解决布局问题⽽创建的 CSS 模块，只要我们⼀直在制作⽹站，我们就⼀直要讨论这些问题。

有两个主要因素激发了我创建本指南的灵感。

第⼀个是 Rachel Andrew 出⾊的书籍。

这本书对 Grid 布局做了全⾯，清晰的介绍，也是本指南的基础。

我强烈建议你购买并阅读。

另⼀个灵感来⾃ Chris Coyier 的，这也是我学习 flexbox ⾸选的资源。

这篇⽂章是帮助了很多⼈，这点从 Google “flexbox” 排名第⼀就可以看出来。

你会发现那篇⽂章和我的⽂章有很多相似之处，为什么不跟随最好的⽂章呢？本指南的⽬的是介绍存在于最新版本的规范中 Grid(⽹格) 概念。

所以我不会覆盖过时的 IE 语法，⽽且随着规范的逐渐成熟，我会尽我最⼤的努⼒去更新这个指南。

级别： 初级梁 士兴 (liangsx@), 实习生, IBM CSDL黄 璐 (huanglu@), 测试工程师, IBM CSDL2007 年 11 月 30 日2007 年 12 月 26 日 更新本教程介绍 Grails，这是一个搭建在动态语言 Groovy 之上的开源 MVC 快速 Web开发框架。

使用 Grails 可以提高 Web 开发的效率，降低 Web 开发的复杂度。

本文从 Grails 自动生成代码入手，以示例为中心逐步增加深度与难度，对 Grails 开发进行演示。

开始之前关于本教程本教程从剖析 Grails 自动生成的代码入手，把 Web 开发的几个基本要素作为重点，结合 MVC 的基本原理介绍了 Grails 框架。

然后通过一个相对复杂的示例，进一步对 Grails 的一些高级特性加以演示。

目标学习本教程后，读者可以掌握基本的 Grails 开发技术，并能够进一步独立学习 Grails 的高级功能。

先决条件学习本教程读者应该具备的预备知识：z熟练使用常见的 HTML 标签；z有一定的 Web 开发基础（理解表单提交 POST/GET 、理解会话）；z Java 语言或者 Groovy 语言的基础；z Hibernate（非必需）；系统需求需要下载一些工具和软件，下载链接请参见 参考资源：z Grails1.0 rc1；z JDK 1.5 或更高版本；z MySQL 和 MySQL JDBC Driver（非必需）；z Eclipse 3.2 或更高版本 + Eclipse Web Tools + Groovy plugin（非必需）；Grails 简介Grails 是搭建在动态语言 Groovy 之上的一个开源 MVC Web 开发框架，Grails 的一个显著特点在于“快”，这主要得益于 Groovy 脚本语言的动态特性，也得益于其“一栈式”的设计。

与传统的 Java/C# Web 开发框架相比，它可以使用极少的代码和配置实现诸如表单提交、数据库读写等常见的 Web 应用功能，实现了开发效率的成倍提高。

AndroidstudioGridLayout（⽹格布局）1.相关属性总结图2.使⽤实例:计算器布局的实现:运⾏效果图：实现代码:<GridLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:id="@+id/GridLayout1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:columnCount="4"android:orientation="horizontal"android:rowCount="6" ><TextViewandroid:layout_columnSpan="4"android:layout_gravity="fill"android:layout_marginLeft="5dp"android:layout_marginRight="5dp"android:background="#FFCCCC"android:text="0"android:textSize="50sp" /><Buttonandroid:layout_columnSpan="2"android:layout_gravity="fill"android:text="回退" /><Buttonandroid:layout_columnSpan="2"android:layout_gravity="fill"android:text="清空" /><Button android:text="+" /><Button android:text="1" /><Button android:text="2" /><Button android:text="3" /><Button android:text="-" /><Button android:text="4" /><Button android:text="5" /><Button android:text="6" /><Button android:text="*" /><Button android:text="7" /><Button android:text="8" /><Button android:text="9" /><Button android:text="/" /><Buttonandroid:layout_width="wrap_content"android:text="." /><Button android:text="0" /><Button android:text="=" /></GridLayout>代码解析: 代码很简单,只是回退与清楚按钮横跨两列,⽽其他的都是直接添加的,默认每个组件都是占⼀⾏⼀列,另外还有⼀点要注意的: 我们通过:android:layout_rowSpan与android:layout_columnSpan设置了组件横跨多⾏或者多列的话,如果你要让组件填满横越过的⾏或列的话,需要添加下⾯这个属性: android:layout_gravity = "fill"就像这个计算机显⽰数字的部分!3.⽤法归纳:①GridLayout使⽤虚细线将布局划分为⾏,列和单元格,同时也⽀持在⾏,列上进⾏交错排列②使⽤流程:step 1:先定义组件的对其⽅式 android:orientation ⽔平或者竖直,设置多少⾏与多少列step 2:设置组件所在的⾏或者列,记得是从0开始算的,不设置默认每个组件占⼀⾏⼀列step 3:设置组件横跨⼏⾏或者⼏列;设置完毕后,需要在设置⼀个填充:android:layout_gravity = "fill"4.使⽤GridLayout要注意的地⽅:因为GirdLayout是4.0后才推出的,所以minSDK版本要改为14或者以上的版本, 不然写布局代码的时候,这玩意就会莫名其妙地出错,说找不到这个GridLayout, 当然,如果你要低版本兼容的话,就要看下⾯的内容了！5.低版本sdk如何使⽤GridLayout:解决⽅法很简单:只需要导⼊v7包的gridlayout包即可! v7包⼀般在sdk下的:sdk\extras\android\support\v7\gridlayout⽬录下如果你没有的话,也可以到这⾥下载: 但是⽤的时候,标签却是这样写的:<android.support.v7.widget.GridLayout>`。

1、下载安装JDK 1.5或者更高版本，下载安装Grails2、创建.bat 文件，文件：set JA V A_HOME=C:\Java\jdk1.6.0_13set GROOVY_HOME=E:\2G\groovy-1.6.3set path=%JA V A_HOME%/bin;%GROOVY_HOME%/bin;%path%cmd在控制台下输入grails help，如果能看到Grails 的命令列表，Grails 的安装配置就算成功了。

图3. 检验Grails 是否安装成功3、创建一个Grails 应用程序创建Grails 应用程序需要使用grails create-app 命令，在控制台输入：grails create-app ContactGrails 会为我们创建一个名叫“Contact”文件夹，并在其中生成一个应用程序框架，生成的应用程序目录结构如下：表 1. Contact 应用文件目录结构Contact+ grails-app+ conf 存放配置信息，包含数据源、应用程序启动时自动执行的类ApplicationBootStrap.groovy, Url 映射配置+ controller 存放控制器(“MVC”的“C”)+ domain 存放域类(“MVC”的“M“)+ i18n 存放国际化资源文件+ services 存放service 类+ taglib 存放标签库类+ views 存放视图模版(“MVC”的V，每个控制器对应一个文件夹并存放在Views 中，每个文件夹中会有多个GSP 页面)+ layouts 存放布局模板+ grails-tests 存放测试代码+ hibernate 存放可选的其它Hibernate 配置文件+ lib 存放其它Jar 包（如JDBC 驱动等）+ spring 存放可选的Spring 配置文件+ src+ java 存放Java 源程序+ groovy 存放Groovy 源程序+ web-app+ css 存放CSS 样式表+ images 存放图片文件+ js 存放JavaScript 文件+ WEB-INF 存放部署相关的文件+ index.gsp 应用程序的首页从上述目录结构可以看出Grails 的“约定优于配置”设计理念，它约定了不同层次代码存放的位置以及项目的组织方式，这既提供了一种最佳实践，同时也节省了开发人员配置项目的精力。