创建表格 QTableWidget 是基于数据项（Item-based）的表格视图类。它提供了一种标准的表格数据显示模型（QTableWidgetItem），如果要自定义一种非标准的模型就要考虑使用 QTableView 了。 可以灵活地选择在构造表格的时候指定行数和列数，或者在构造以后再动态地调整他...
Qt 图形视图框架（Graphics View Framework）
简介 Qt 的图形视图提供了支持大量自定义的 2D 图形项（QGraphicsItem）交互的管理器（QGraphicsScene），以及一个支持缩放和旋转操作的视图部件（QGraphicsView）用于显示这些图形。框架还包含了支持对图形项精确交互的事件传播架构。图形视图使用 BSP（ Binary Space Partitioning ，二叉空间分割） 树提供对图形项的快速查找，正因如此，即使是包含数以百万计对象的超大场景，也能够实时地显示。图形视图提供了基于图形项的 model-view 编程模式，这有点类似 QTableView、QTreeView 和 QListView。同一个场景可以由多个视图来显示，一个场景中则可包含多种不同形状的图形项。 演员、道具 Ready QGraphicsItem（图形项） 是 QGraphicsScene 场景中的基础图形类，好比是电影场景中的演员、道具。 Qt 视图体系提供了一些派生于 QGraphicsItem 的标准图形项：矩形（QGraphicsRectItem）、椭圆（QGraphicsEllipseItem）、文本（QGraphicsTextItem）等。QGraphicsItem 支持如下功能： 鼠标的按下、移动、释放、双击事件，此外还有鼠标的悬浮、滚轮和上下文菜单事件； 键盘的输入焦点和按键事件； 拖放； 通过父子关系或使用 QGraphicsItemGroup 的组合； 碰撞检测。 如果要实现自定义的图形，需要继承 QGraphicsItem 并重写两个纯虚公共函数 boundingRect() 和 paint()，boundingRect() 用于返回图形的大致轮廓（矩形），paint() 则用于绘制图形的实际内容。图形的轮廓用于定于绘制的范围、碰撞检测、判断是否处于事件（鼠标按下、经过等）的接收范围内等。如果要精确定义图形的轮廓则还需要重写虚函数 shape() 。当存在 shape() 定义的轮廓时，碰撞检测、事件相应范围等检测将取决于 shape() 的返回值。 Action QGraphicsScene（图形场景）可以理解为电影的场景，场景也就是场面，一般是指在一个特定的空间内发生的故事的画面。比如《林冲夜宿山神庙》是一个故事，林冲、山神庙、纷飞的大雪等人物以及所发生的故事就是一个场景了。 QGraphicsScene 是 QGraphicsItems 2D 图形的容器，提供图形的操作接口、传递事件和管理各个图形的的状态，它有如下职责： 提供一个快速的接口用来管理大量的图形项； 向每个图形项传递事件； 管理图形的状态，如选中状态、焦点的处理； 提供无变形的展示功能，主要为了打印。 Cut! 收工了 QGraphicsView（图形视图）是一个可视部件，好比是电影荧幕，是一个面向观众的视口（viewport），有了它我们才能看到 QGraphicsScene 场景中所演出的内容。与电影荧幕的痛的是，QGraphicsView 还提供了观众与电影中的演员、道具的交互的方法，或许用舞台剧代替电影来比喻更贴切些。 QGraphicsView 实现了 QGraphicsItem 的可视化，还提供了缩放和旋转得支持。 那谁，盒饭钱总该给报销掉吧~ 图形视图坐标系 图形视图基于笛卡尔坐标系，在场景中，图形项的位置和形状使用 x 轴坐标与 y 轴坐标来表示。当使用未经变形的视图来观察场景时，场景中的一个单位等于屏幕上的一个像素。在图形视图系统中有三种坐标系：图形项坐标系、场景坐标系与视图坐标系。为了便于使用，提供了用于坐标系映射的转换函数。 框架中的类 下面这些类提供了创建交互式应用程序的框架： 类名 说明 QAbstractGraphicsShapeItem Common base for all path items QGraphicsAnchor Represents an anchor between two items in a QGraphicsAnchorLayout QGraphicsAnchorLayout Layout where one can anchor widgets together in Graphics View QGraphicsEffect The base class for all graphics effects QGraphicsEllipseItem Ellipse item that you can add to a QGraphicsScene QGraphicsGridLayout Grid layout for managing widgets in Graphics View QGraphicsItem The base class for all graphical items in a QGraphicsScene QGraphicsItemGroup Container that treats a group of items as a single item QGraphicsLayout The base class for all layouts in Graphics View QGraphicsLayoutItem Can be inherited to allow your custom items to be managed by layouts QGraphicsLineItem Line item that you can add to a QGraphicsScene QGraphicsLinearLayout Horizontal or vertical layout for managing widgets in Graphics View QGraphicsObject Base class for all graphics items that require signals, slots and properties QGraphicsPathItem Path item that you can add to a QGraphicsScene QGraphicsPixmapItem Pixmap item that you can add to a QGraphicsScene QGraphicsPolygonItem Polygon item that you can add to a QGraphicsScene QGraphicsProxyWidget Proxy layer for embedding a QWidget in a QGraphicsScene QGraphicsRectItem Rectangle item that you can add to a QGraphicsScene QGraphicsScene Surface for managing a large number of 2D graphical items QGraphicsSceneContextMenuEvent Context menu events in the graphics view framework QGraphicsSceneDragDropEvent Events for drag and drop in the graphics view framework QGraphicsSceneEvent Base class for all graphics view related events QGraphicsSceneHelpEvent Events when a tooltip is requested QGraphicsSceneHoverEvent Hover events in the graphics view framework QGraphicsSceneMouseEvent Mouse events in the graphics view framework QGraphicsSceneMoveEvent Events for widget moving in the graphics view framework QGraphicsSceneResizeEvent Events for widget resizing in the graphics view framework QGraphicsSceneWheelEvent Wheel events in the graphics view framework QGraphicsSimpleTextItem Simple text path item that you can add to a QGraphicsScene QGraphicsTextItem Text item that you can add to a QGraphicsScene to display formatted text QGraphicsTransform Abstract base class for building advanced transformations on QGraphicsItems QGraphicsView Widget for displaying the contents of a QGraphicsScene QGraphicsWidget The base class for all widget items in a QGraphicsScene QStyleOptionGraphicsItem Used to describe the parameters needed to draw a QGraphicsItem ...
Web 前端框架 Bootstrap
简介 Bootstrap 是由 Twitter 设计师 Mark Otto 和 Jacob Thornton 合作开发的 Web 前端开发框架。它提供了很多前端开发中常用的 CSS 和 Javascript 功能。这使得在前端开发中不需要再那么在意 div 等 HTML 元素的宽度、高度等细节，使得开发过程变更加轻而易举。Bootstrap 的响应式栅格系统和 Mobile First 的设计思想，使得页面可以很好地适应于各种流行的屏幕尺寸。 文件结构 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 css 文件夹： bootstrap*.css 是 Bootstrap 的核心 CSS 文件； bootstrap-theme*.css 是一个可选的Bootstrap主题文件，可以根据需要来引用。 Javascript 插件依赖于 jQuery 库，所以使用的时候注意要引用相应的 jQuery 文件。 Bootstrap 使用了 glyphicons.com 提供的矢量 Web 字体替代了传统的图片格式图标，可以像使用文字一样灵活地使用图标。 基本模板 使用 Bootstrap 时可以仿照下面的模板来创建一个页面： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> 参考资料 Bootstrap 起步：http://v3.bootcss.com/getting-starte...