TinUI较复杂面板布局演示3-纯文本日记软件

引言

纯文本日记软件的基础就是一个编辑器如这篇文章中的例子，但是，在此基础之上，需要分为若干个视图：

• 今日日记
• 过往日记修改
• 设置页面
• ……

结合TinUI-6.11版本中的两大更新：

1. 面板布局支持背景色以及边框圆角设置
2. 新增navigation 边栏

构建一个纯文本日记框架。

示例代码库：KuaiDiary-GitHub。

整体布局

整体布局非常简单，是边栏导航栏与主体视图的标准布局，由如下代码确定：

classMainWindow(Tk):def__init__(self,theme=TinUILight):#...definit_ui(self):self.ui_=BasicTinUI(self)self.ui_.pack(fill="both",expand=True)self.ui=self.theme(self.ui_)self.root=ExpandPanel(self.ui_,padding=(5,5,5,5))hp1=HorizonPanel(self.ui_)self.root.set_child(hp1)self.nav=self.ui.add_navigation((0,0),maxwidth=100,content=(('\uE929','今日'),('\uE787','往昔'),('\uE713','设置')),command=self.change_view)hp1.add_child(self.nav[-1])ep=ExpandPanel(self.ui_)self.child=self.ui_.add_ui((0,0),content=False)ep.set_child(self.child[-1])hp1.add_child(ep,weight=1)self.ui_.bind("<Configure>",self.on_resize)self.now_view=self.today_view=TodayView(self.child[0],self.theme)self.dates_view=DatesView(self.child[0],self.theme)self.setting_view=SettingView(self.child[0],self.theme)self.now_view.pack(fill="both",expand=True)

主体视图由self.child实现，这是为了方便视图管理以及切换，剩下的三个页面分别由三个独立的BasicTinUI承接。另外，由于TinUI的导航边栏默认可折叠与展开，因此，在水平布局面板添加边栏控件时，建议不指定宽度，同时，self.change_view应当触发尺寸修改重新布局：

#...defchange_view(self,tag):ifisinstance(tag,bool):self.ui_.event_generate("<Configure>",x=0,y=0,width=self.winfo_width(),height=self.winfo_height())returnifnotself.now_view:return# UI初始化时会触发，但界面还没初始化iftag=='今日':self.now_view.pack_forget()self.now_view=self.today_vieweliftag=='往昔':self.now_view.pack_forget()self.now_view=self.dates_vieweliftag=='设置':self.now_view.pack_forget()self.now_view=self.setting_view self.now_view.pack(fill="both",expand=True)#...

子页面

今日日记

面板布局（水平工具栏以及编辑框主体）：

classTodayView(BasicTinUI):def__init__(self,master=None,theme=TinUILight):#...definit_ui(self):self.root=ExpandPanel(self,padding=(4,4,4,4),bg='#F9F9F9',bd=17)vp=VerticalPanel(self,spacing=10)self.root.set_child(vp)hp=HorizonPanel(self,spacing=5)vp.add_child(hp,30)hp.add_child(self.ui.add_title((0,0),text=datetime.date.today().strftime('%Y-%m-%d'),anchor='w'),weight=1)ep=ExpandPanel(self)vp.add_child(ep,weight=1)textbox=self.ui.add_textbox((0,0),scrollbar=True)ep.set_child(textbox[-1])#...

过往日记

面板布局（树状选择视图+日记编辑视图）：

classDatesView(BasicTinUI):def__init__(self,master=None,theme=TinUILight):super().__init__(master)self.diary:str=Noneself.ui=theme(self)self.init_data()self.init_ui()definit_data(self):# 获取以往日记信息#...definit_ui(self):self.root=ExpandPanel(self)hp=HorizonPanel(self,spacing=5)self.root.set_child(hp)ep=ExpandPanel(self)hp.add_child(ep,120)treev=self.ui.add_treeview((0,0),content=self.data,command=self.on_select)ep.set_child(treev[-1])#...vp=VerticalPanel(self,spacing=10,bg='#F9F9F9',bd=17,padding=(4,4,4,4))hp.add_child(vp,weight=1)hp2=HorizonPanel(self,spacing=5)vp.add_child(hp2,30)self.title=self.ui.add_title((0,0),text='过往日记修改',anchor='w')hp2.add_child(self.title,weight=1)ep2=ExpandPanel(self)vp.add_child(ep2,weight=1)textbox=self.ui.add_textbox((0,0),scrollbar=True)ep2.set_child(textbox[-1])#...

设置页面

由于设置页面的交互元素不涉及到尺寸变换，因此使用TinUIXml：

<tinui><linepady='15'><liney='50'padx='20'anchor='w'><imageimgfile='./assets/logo-small.png'></image><titletext='快日记 | KuaiDiary'></title><paragraphtext='%VERSION%'></paragraph></line><linepadx='20'><linktext='GitHub'command='self.funcs["open_github"]'></link><linktext='Gitee'command='self.funcs["open_gitee"]'></link></line><!--...--></line></tinui>

整体展示