收尾工作（Finishing Touch）

这个应用程序还没有真正的完成。我们想要显示旗帜，并允许用户通过从数据模型中移除城市来修改文档。

这些旗帜被存放在main.qml文件夹下的flags文件夹中。为了在表格列中显示它们，我们需要定义一个渲染旗帜图片的代理。

  1. TableViewColumn {
  2.     delegate: Item {
  3.         Image {
  4.             anchors.centerIn: parent
  5.             source: 'flags/' + styleData.value
  6.         }
  7.     }
  8.     role: 'flag'
  9.     title: "Flag"
  10.     width: 40
  11. }

它将JS数据模型中暴露的flag属性作为styleData.value交给代理。代理调整图片路径，并在路径前面加上'flags/'并显示它。

对于移除，我们使用相似的技巧来显示一个移除按钮。

  1. TableViewColumn {
  2.     delegate: Button {
  3.         iconSource: "remove.png"
  4.         onClicked: {
  5.             var data = view.model
  6.             data.splice(styleData.row, 1)
  7.             view.model = data
  8.         }
  9.     }
  10.     width: 40
  11. }

数据移除操作，我们坚持从视图模型上获取数据，然后使用JS的splice函数移除一个条目。这个方法提供给我们的模型来自一个JS数组。splice方法通过移除已有元素，添加新的元素来改变数组内容。

一个JS数组不如一个Qt模型智能，例如QAbstractItemModel，它无法通知视图行更新或者数据更新。由于视图无法接收到任何更新的通知，它无法更新数据显示。只有在我们将数据重新设置回视图时，视图才会知道有新的数据需要刷新视图内容。使用view.model = data再次设置数据模型可以让视图知道有数据更新。

收尾工作（Finishing Touch） - 图1