前言

ui.TableView是ui模块中使用难度最大，但又使用频率很高的一个组件。要在窗口中创建一个列表视图可能会用到TableView、TableViewCell、ListDataSource还有Delegate四种对象。本教程分别采用直接使用ListDataSource实现和重载函数实现两种方法为大家简单演示如何创建一个列表视图。更多详情请参阅中文文档。

正文

使用ListDataSource实现

Pythonista的作者实现了ListDataSource类来帮助我们快速构建一个简单的列表视图。首先在创建ListDataSource的时候你要传一个字典列表给它，列表中的每一个字典代表列表中的每一项，通过设置字典中的title、image、accessory_type三个键值来设置该单元格的属性。然后设置ListDataSource的action来绑定单元格被点击时触发的函数。接下来将TableView的data_source和delegate分别设置为ListDataSource对象即可。
这样我们就简单快速的实现了一个列表视图，除了示例中展示的属性意外还可以设置ListDataSource的更多属性来对列表的行为进行控制。但总的来说直接使用ListDataSource只适合相对简单的使用场景，无法实现对更多细节的操控。

import ui
import console

# 点击列表触发事件所调用的函数
def menu_item_tapped(sender):
	opt_name = sender.items[sender.selected_row]['title']
	console.hud_alert(opt_name,'success')

tableView=ui.TableView() # 创建TableView
tableView.frame=(0,0,400,600) # 设置大小尺寸

# ListDataSource对象，使用一个字典的列表来初始化，字典的键值用于设置每一项的属性，具体键值可选内容参考文档
dataSource=ui.ListDataSource([
	{'title':'1','accessory_type':'none'},
	{'title':'2','accessory_type':'checkmark'},
	{'title':'3','accessory_type':'detail_button'},
	{'title':'4','accessory_type':'detail_disclosure_button'},
	{'title':'5','accessory_type':'disclosure_indicator'},
	{'title':'6','image':'iob:chatbox_working_256','accessory_type':'detail_button'},
	])
dataSource.action=menu_item_tapped # 设置列表被点击时调用的函数

tableView.data_source=dataSource # 为TableView添加数据

# 为TableView添加事件代理，
# 这里直接设为dataSource，这样被点击时会调用之前设置的action
tableView.delegate=dataSource 

tableView.present('sheet') # 显示TableView

重载函数实现

通过重载的方法实现一个我们自己的TableView，可以获得更大更灵活的操纵空间。按照官方文档的说法，我们需要分别重载实现我们自己的ListDataSource和Delegate然后在进行绑定，但是分别再另外实现两个类会显得很麻烦，只要实现他们接口就行了，所以我们这里全部写到一个类中，然后再把自己绑定上去就行了。由于在所有ui组件中仅有View允许继承，所以我们单独再创建一个TableView成员变量，然后将两者frame设置为相同大小，并添加到subview中就OK了。本示例为了达到和示例1相同的效果，仅重载了部分方法，更多接口方法的使用请根据自己实际情况的需要参阅文档进行选择。

在利用重载实现的方法中，创建cell是一个核心步骤，我们除了可以设置cell本身的属性以外，还可以加入一些其他组件进行改造。cell本身就是一个View，但是他还有一个content_view的属性。一般来说这两个尺寸是一样的，但官方文档建议不要直接吧子视图加到cell，而是加到他的content_view下，因为当单元格进入编辑模式时，content_view会自动调整大小。

import ui
import console

# 创建类并继承ui.View
class MyTableView(ui.View):
	
	def __init__(self):
		self.name='MyTabelView' # 设置名称
		self.frame=(0,0,400,600) # 设置大小
		
		self.tabelView=ui.TableView() # 创建一个TableView
		self.tabelView.frame=self.frame # 将大小设置和父级一样
		self.tabelView.data_source=self # 将数据源设置为父级窗口
		self.tabelView.delegate=self # 将代理设置为父级窗口
		
		# 要显示的数据内容，这里为了和上一个示例一样，实际使用可灵活处理
		self.data=[
			{'title':'1','accessory_type':'none'},
			{'title':'2','accessory_type':'checkmark'},
			{'title':'3','accessory_type':'detail_button'},
			{'title':'4','accessory_type':'detail_disclosure_button'},
			{'title':'5','accessory_type':'disclosure_indicator'},
			{'title':'6','image':'iob:chatbox_working_256','accessory_type':'detail_button'},
			]
		
		self.add_subview(self.tabelView) # 将TableView添加到自己的子视图中
		
	# 重载tableview_number_of_rows()方法，设置TableView的行数与data数据个数相同
	def tableview_number_of_rows(self,tableview,section):
		return len(self.data)
		
	# 重载tableview_cell_for_row()函数，逐一生成每一单元格，将在该行即将出现在可视范围内的时候被调用渲染
	def tableview_cell_for_row(self,tableview,section,row):
		cell=ui.TableViewCell() # 创建一个单元格对象
		cell.text_label.text=self.data[row]['title'] # 根据当先到行数、区域等参数设置相应的标题
		cell.accessory_type=self.data[row]['accessory_type'] # 设置样式
		if('image' in self.data[row]): # 判断是否需要添加图片
			cell.image_view.image=ui.Image.named(self.data[row]['image']) # 为单元格添加图片
		
		return cell # 返回创建好的单元格以便系统渲染
		
	# 重载tableview_did_select()函数，在列表试图被点击时调用
	def tableview_did_select(self,tableview,section,row):
		console.hud_alert(self.data[row]['title'],'success')
		
		
if __name__ == '__main__':
	v=MyTableView()
	v.present('sheet') # 显示窗口