Shiny包搭建UI - 2

通过Hello Shiny中的例子，我们用shiny包创建了一个简单的应用。下面我们会针对创建UI的结构进行拆解，在最简单的固定的结构中，可以逐渐加入文字、图片等网页元素丰富应用。

上文提到shiny app 由两部分组成：用户交互脚本（ui.R） 和 服务器脚本（server.R）。下面的代码是构成一个shiny app的最小结构。一个空的App，展现的结果是一个空的UI。

---

一、布局

在ui.R中，我们用了fluidPage生成了能根据浏览器的尺寸自动调整的展示界面，可以在fluidPage中添加元素布局应用。

下面的代码通过fluidPage创建了一个标题栏和一个工具栏，工具栏包含了侧边栏和主面板。

titlePanel和sidebarLayout是fluidPage中两个最主要的元素，分别是标题栏和工具栏。sidebarLayout通常由以下两部分组成：sidebarPanel和mainPanel。

sidebarPanel默认在左侧，可以通过position = "right"把它放在右侧。

titlePanel和sidebarLayout搭建了shiny app的基本布局，也可以创建更多进阶的布局。例如navbarPage可以创建有导航栏的多个插页的UI，fluidRow和column可以搭建带网格的布局，更多内容可以参考官方教学Shiny Application Layout Guide。

---

二、HTML内容

常用的Shiny HTML 标签函数：

三、页眉

我们来看下h1-h6文字居中的代码和效果：

---

四、格式化文本

让我们通过一个小例子，充分理解和运用第二部分的HTML标签函数。效果中图片的链接为bigorb.png，图片放在www的文件夹中，文件夹存储在ui.R和server.R的同一级目录下。

UI与脚本如下，可以对照下ui.R在处理HTML标签函数上的写法和最终展示效果。

在这一章中，主要是用HTML标签函数，对文字和图片的UI展示进行了处理。官方教学链接戳这里：Build a user-interface