使用Kivy實作資料夾同步工具 --- 3. 設計UI 界面

Kivy的UI界面可以利用kv language來實作

kv language的副檔名為.kv

這是目前我想到的UI界面

folder_syncer.kv

	#:import os os
	#:import getuser getpass.getuser
	#:import resource_find kivy.resources.resource_find
	[FileListEntry@FloatLayout+TreeViewNode]:
	locked: False
	entries: []
	path: ctx.path
	is_selected: self.path in ctx.controller().selection
	orientation: 'horizontal'
	size_hint_y: None
	height: '48dp' if dp(1) > 1 else '24dp'
	is_leaf: not ctx.isdir or ctx.name.endswith('..' + ctx.sep) or self.locked
	on_touch_down: self.collide_point(*args[1].pos) and ctx.controller().entry_touched(self, args[1])
	on_touch_up: self.collide_point(*args[1].pos) and ctx.controller().entry_released(self, args[1])
	BoxLayout:
	pos: root.pos
	size_hint_x: None
	width: root.width - dp(10)
	Label:
	id: filename
	text_size: self.width, None
	halign: 'left'
	shorten: True
	text: ctx.name
	font_name: resource_find("ukai.ttc")
	Label:
	text_size: self.width, None
	size_hint_x: None
	halign: 'right'
	text: '{}'.format(ctx.get_nice_size())
	font_name: resource_find("ukai.ttc")
	<SrcChooser>:
	size_hint: (0.47, 1)
	FileChooserListView:
	id: src_chr
	size_hint: (1, 0.95)
	pos_hint: {'top': 0.95}
	path: os.path.join("/home", getuser())
	Label:
	text: src_chr.path
	size_hint: (1, 0.05)
	pos_hint: {'top': 1}
	font_size: 16
	font_name: resource_find("ukai.ttc")
	<DstChooser>:
	size_hint: (0.47, 1)
	FileChooserListView:
	id: fc_dst
	size_hint: (1, 0.95)
	pos_hint: {'top': 0.95}
	path: os.getcwd()
	Label:
	text: fc_dst.path
	size_hint: (1, 0.05)
	pos_hint: {'top': 1}
	font_size: 16
	font_name: resource_find("ukai.ttc")
	<Folder_Syncer>
	StackLayout:
	size: root.size
	Label:
	size_hint: (0.5, 0.05)
	font_size: 30
	text: '[color=#4286f4]Source[/color]'
	markup: True
	Label:
	size_hint: (0.5, 0.05)
	font_size: 30
	text: '[color=#4286f4]Destination[/color]'
	markup: True
	SrcChooser
	BoxLayout:
	pos_hint: {'x': 0.47, 'top': 0.95}
	size_hint: (0.06, 0.5)
	orientation: "vertical"
	Button:
	id: sync_btn
	size_hint: (1, 0.1)
	text: "Sync"
	Button:
	id: add_btn
	size_hint: (1, 0.1)
	text: "Add >>"
	DstChooser:

view raw folder_syncer.kv hosted with ❤ by GitHub

app.py

	from kivy.app import App
	from kivy.uix.widget import Widget
	from kivy.uix.floatlayout import FloatLayout
	from kivy.uix.relativelayout import RelativeLayout
	from kivy.uix.button import Button
	from kivy.properties import ObjectProperty
	from kivy.uix.filechooser import FileChooserListView
	class SrcChooser(RelativeLayout):
	pass
	class DstChooser(RelativeLayout):
	pass
	class Folder_Syncer(Widget):
	fc_src = ObjectProperty(None)
	fc_dst = ObjectProperty(None)
	sync_btn = ObjectProperty(None)
	add_btn = ObjectProperty(None)
	class Folder_SyncerApp(App):
	def build(self):
	app = Folder_Syncer()
	return app
	if __name__ == '__main__':
	Folder_SyncerApp().run()

view raw app.py hosted with ❤ by GitHub