tkinter-TinUI用xml编写界面-超详细

已于 2024-02-10 16:19:30 修改
阅读量3.1k 收藏 3
点赞数
分类专栏： TinUI 文章标签： xml Python tkinter TinUI GUI
于 2022-01-29 11:20:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinga_kilin/article/details/122740802
版权

tkinter-TinUI用xml编写界面-超详细

一、背景

可拓展标记语言的流行

现在，很多界面库，比如wpf、winui都在使用xml（xaml）作为一种界面载入的重要实现方式。使用XML作为界面编写语言，有很多优点：

  1. 逻辑代码和界面设计分离
  2. 与语言无关
  3. 显示内容更改后可以不需要考虑重新布局
  4. 层次直观
  5. 动态渲染，也可静态

在tkinter的诸多拓展中，也有一些使用xml作为布局依据的，但我忘了其名称。但是，这些tkinter的xml载入功能都是从逻辑方面封装了tkinter的原生布局模式：pack, grid, place，所以，这些很难借鉴到TinUI中。当然这很好，只不过相比较而言tkinter使用Python代码编写布局就够了，无论是手动设计界面还是使用可视化设计器，生成的Python布局代码完全可以直接使用。

TinUI的布局方式单一

接着上面所说，以往的TinUI，因为基于tkinter画布，所以只能够通过编写者输入坐标参数来确定组件绘制的原点。这种布局方式相当于tkinter原生中的place，可是place布局可以使用百分制（相对）坐标作为参数，可是因为画布范围的不确定性，只能够使用确定的坐标。

在TinUI中使用确定坐标布局，就会带来一些麻烦：

  • 需要一遍遍调试到满意的坐标位置
  • 一旦更改某一个显示内容，就可能需要重新调试

别看只有这两条，看看TinUI源码中的示例：

b=TinUI(a,bg='white')
b.pack(fill='both',expand=True)
m=b.add_title((600,0),'TinUI is a test project for futher tin using')
m1=b.add_title((0,680),'test TinUI scrolled',size=2,angle=24)
b.add_paragraph((20,290),'''     TinUI是基于tkinter画布开发的界面UI布局方案，作为tkinter拓展和TinEngine的拓展而存在。目前，TinUI已可应用于项目。''',
angle=-18)
b.add_paragraph((20,100),'下面的段落是测试画布的非平行字体显示效果，也是TinUI的简单介绍')
b.add_button((250,450),'测试按钮',activefg='white',activebg='red',command=test,anchor='center')
b.add_checkbutton((80,430),'允许TinUI测试',command=test1)
b.add_label((10,220),'这是由画布TinUI绘制的Label组件')
b.add_entry((250,330),350,'这里用来输入')
b.add_separate((20,200),600)
b.add_radiobutton((50,480),300,'sky is blue, water is blue, too. So, what is your heart',('red','blue','black'),command=test1)
b.add_link((400,500),'TinGroup知识库','http://tinhome.baklib-free.com/')
_,ok1,_=b.add_waitbar1((500,220),bg='#CCCCCC')
b.add_button((500,270),'停止等待动画',activefg='cyan',activebg='black',command=test2)
bu1=b.add_button((700,200),'停止点状滚动条',activefg='white',activebg='black',command=test3)[1]
bu2=b.add_button((700,250),'nothing button 2')[1]
bu3=b.add_button((700,300),'nothing button 3')[1]
b.add_labelframe((bu1,bu2,bu3),'box buttons')
_,_,ok2,_=b.add_waitbar2((600,400))
b.add_combobox((600,550),text='你有多大可能去珠穆朗玛峰',content=('20%','40%','60%','80%','100%','1000%'))
b.add_button((600,480),text='测试进度条（无事件版本）',command=test4)
_,_,_,progressgoto,_,_=b.add_progressbar((600,510))
b.add_table((180,630),data=(('a','space fans over the\nworld','c'),('you\ncan','2','3'),('I','II','have a dream, then try your best to get it!')))
b.add_paragraph((300,850),text='上面是一个表格')
b.add_onoff((600,100))
b.add_spinbox((680,100))
b.add_scalebar((680,50),command=test5)
scale_text,_=b.add_label((890,50),text='当前选值：2')
b.add_info((680,140),info_text='this is info widget in TinUI')
mtb=b.add_paragraph((0,720),'测试菜单（右键单击）')
b.add_menubar(mtb,cont=(('command',print),('menu',test1),'-',('TinUI文本移动',test)))

一旦改起来，十分之难受。

TinUI的绝对坐标比较难用

作为TinUI的主要开发者，我自己在写示例的时候（也就是\test中的文件），都需要从以前写好的布局代码中copy过来，再进行删改。可想而知，我自己是由多么难受。

综上，TinUI迫切需要能够使用XML进行布局的方式。

二、TinUI能否使用xml布局

原理层面

这必然是可以的，在TinUI-2.6.0-版本中，我加入了TinUIXml类，允许使用xml进行布局。但是写到这一千多字了，关于TinUIXml的开发之后再说，本文只讲述使用xml编写TinUI界面的具体方式。

我不知道其它库实现的原理如何，TinUI的原理很好解释，这不是重点，放到以后再说。

TinUIXml类

使用类：

x=TinUIXml(ui:Union[BasicTinUI,TinUI])
'''
ui::TinUI类 或 BasicTinUI类
'''

编写这篇文章时可用的函数：

TinUIXml.loadxml(xml:str)#载入xml字符串，渲染界面
TinUIXml.clean()#清空界面

看上去很简单是吧，但是还大可讲解，不妨请接着往下看。

使用xml编写界面后的感受

相比于使用TinUI自带的绝对坐标布局，xml给人带来的感觉是更加简便、易维护，并且还可以使一个程序的界面设计和逻辑代码进行一个分离。即使是像我这种又要写Python后端又要完成UI显示的学生，使用TinUIXml来进行设计也让我“神清气爽”。

很多人感觉使用xml脱离了一种语言的特性，但是有些感受确实是要切身体会。

三、TinUI使用xml的简单示例

不用多么复杂，就用下图，很简单的窗口：

在这里插入图片描述

使用TinUI绝对布局

首先我们看到了这是一个全按钮的界面，其中三个按钮在第一行，显示“two2”的按钮在第二行。

请先允许我这么分析，使用xml编写TinUI界面时不能如此分析。两个“two”按钮实际上是一个整体布局，但是绝对布局可以忽略这些。

以下代码中，u为TinUI。

第一次尝试

随便按照脑中所想，输入绝对坐标：

u.add_button((5,5),text='one')
u.add_button((85,5),text='two1')
u.add_button((85,40),text='two2')
u.add_button((170,5),text='three')

在这里插入图片描述

额，无论上下间隔，都隔得有点开。

第二次尝试

缩小间距：

u.add_button((5,5),text='one')
u.add_button((45,5),text='two1')
u.add_button((45,30),text='two2')
u.add_button((90,5),text='three')

在这里插入图片描述

好像，有点挤……

第三次尝试

综合考虑，应该是这样：

u.add_button((5,5),text='one')
u.add_button((55,5),text='two1')
u.add_button((55,40),text='two2')
u.add_button((110,5),text='three')

在这里插入图片描述

终于，有模有样了。

但是，使用TinUIXml布局的我此刻不屑地呲了一下。

使用xml布局

首先分析一下：这个界面实际上只有一行，只不过第二块纵行有两个按钮。

关于我为什么这么分析，还要看下一个小节。

编写xml：

<tinui>
	<line>
		<button text='one'></button>
		<line>
			<button text='two1'></button>
		</line>
		<line>
			<button text='two2'></button>
        </line>
		<button text='three'></button>
	</line>
</tinui>

在这里插入图片描述
搞定。

不服？

问：使用绝对布局就进行了三次尝试，有什么大不了的吗？

答：确实，这样的一个简单界面试几次就可以了，但不说特别复杂，就如下这个界面。

在这里插入图片描述

答：你试试？

问：……

答：我只需要一个ui.xml：

<tinui>
    <line x='512'>
        <label text='输入一个成语开始游戏：' font='宋体 48' outline='#f0f0f0' anchor='n'>tlabel</label>
    </line>
    <line x='10'>
        <entry width='940' fg='blue' activebg='powderblue' font='微软雅黑 64'>entry</entry>
    </line>
    <line x='512'>
        <button text='确认成语' font='宋体 32' fg='cyan' command='self.funcs["findword"]' anchor='n'></button>
    </line>
    <line x='512'>
        <button text='失败退出' font='宋体 32' fg='red' command='self.funcs["closewindow"]' anchor='n'></button>
    </line>
    <line x='70'>
        <button text='关于编写' font='宋体 18' command='self.funcs["gybx"]'></button>
        <button text='版本说明' font='宋体 18' command='self.funcs["bbsm"]'></button>
        <button text='词库信息' font='宋体 18' command='self.funcs["ckxx"]'></button>
        <button text='词库输入' font='宋体 18' command='self.funcs["cksr"]'>cy-input</button>
        <button text='成语查询' font='宋体 18' command='self.funcs["check_web"]'>cy-web</button>
        <button text='检测帮助' font='宋体 18' command='self.funcs["find_chengyu"]'>cy-help</button>
        <button text='添加词库' font='宋体 18' command='self.funcs["find_newciku"]'></button>
        <button text='开源项目' font='宋体 18' command='self.funcs["find_kaiyuan"]'></button>
    </line>
</tinui>

答：so easy~

问：Oh, I see!

篇中小结

看了那么多使用感受，是不是已经迫不及待使用xml来给TinUI编写界面呢？使用起来确实是一个字：爽，但是无规矩不成方圆。

接下来讲讲使用xml给TinUI写界面的规矩。

四、使用xml编写TinUI的规则

不支持的组件

因为TinUI中一些组件绘制的特殊性，以下组件不支持使用xml布局：

  • info - 提示框
  • menubar - 菜单
  • labelframe - 标题边框
  • tooltip - 提示窗口

具体不可使用xml的组件见TinUI源码中TinUIXml.noload的值。

TinUIXml的基础属性

self.funcs={}用于存放xml中涉及到的函数，通常使用在command参数中。

xml中可以使用写法：command='self.funcs["func_name"]'表示。

在Python中用：x.funcs["func_name"]=your_function定义。

注意xml中使用self，Python中使用变量名。

这个性质可以使界面设计不受逻辑代码更改影响。

self.datas={}用于存放xml中涉及到的数据等结构类型，比如宽度、尺寸、列表内容集合、选值区域或选值内容等。

在xml和Python中的使用同【funcs】。

self.tags={}存放内部组件tag集合，用于有目标文本的xml-TinUI组件元素的回调。

如xml中<button text='test'>bu</button>，

Python中可以使用button1=x.tags['bu']获取原组件返回值。

基本规定

使用TinUIXml中的xml布局，要满足如下规定：

  1. 根元素必须是<tinui>

  2. 行元素必须是<line>

  3. 根元素的直接子集不能有除了行元素的其它元素

  4. 行元素可以嵌套。这个内容稍后会详细讲解

  5. 所有xml使用的函数，需要表述为self.funcs[...]，注意是self

  6. 若需要，如【5】中类似地使用self.datas[...]

  7. 若需要使用整数定义宽度参数等，也如同width='200'使用

  8. 字体使用如font="微软雅黑 12"的写法

基本语法

看下面的图示和解析：

在这里插入图片描述

根元素

使用<tinui>作为直接根元素，否则TinUIXml是不会进行解析的。

直接子元素

直接子元素是直属于<tinui>下的第一节点，只能够由若干个<line>元素组成，表示最终渲染中TinUI界面的每一行。

行元素

使用<line>作为行元素，表示该区域内容的一行内容。

注意，是该区域，不是整个界面。

完整写法：<line x='?' y='?'>。表示该行的起始位置，默认为自动接至上一个渲染组件的位置。比如上几张图中成语接龙的输入框等组件的使用。

一般只需要写<line>即可。

行元素的含义请看下一个小节。

组件元素

TinUIXml允许使用xml绘制的所有组件。

使用<widget_name **kw></widget_name>表示组件元素，其中，widget_name为TinUI所有add_xxx函数中的xxx，表示组件名称。

组件元素的含义请看下一个小节。

组件返回值-键值

为了给逻辑代码提供组件控制接口，TinUIXml设计了self.tags作为存放这些值的专用字典，这些字典可被Python直接调用。

组件元素的文本内容表示了该组件被创造时所有的返回值对应的键值，该键值也就包含了各组件的所有返回值。

比如<button text='two1'>two1</button>中，键值“two1”包括了组成按钮的所有画布对象、可用函数列表以及组件uid。在Python中，使用bt1=x.tags['two1']即可获取所有返回值。

嵌套行元素

在一个行元素中嵌入了一个或若干个新<line>元素，这些行元素代表着父行元素下一个纵行的一行渲染范围。

行元素是可以继续嵌套的。

嵌套行元素的含义请看下一个小节。

以上是在单个行元素中的分析，在根目录下任意行元素都如此。

界面与逻辑代码分离设计

为了实现真正的前后端分离，可以参考以下内容来设计程序编写区域或模块。

我们以成语接龙界面作为例子。

使用xml之前-接口输入

在使用xml之前，需要定义一系列的funcs、datas，也就是从逻辑代码中获取界面展示所需要的所有信息。

这一步，我称之为接口输入。

xui.funcs['findword']=findword
xui.funcs['closewindow']=closewindow
xui.funcs['gybx']=gybx
xui.funcs['bbsm']=bbsm
xui.funcs['ckxx']=ckxx
xui.funcs['cksr']=cksr
xui.funcs['check_web']=check_web
xui.funcs['find_chengyu']=find_chengyu
xui.funcs['find_newciku']=find_newciku
xui.funcs['find_kaiyuan']=find_kaiyuan

可能有人认为，如果写一个复杂界面，那么这一部分的代码实在是太多了。

确实如此，但是，如果使用一个统一的导入方法，则会遇到以下问题：

  1. 标识命名必须要遵循python命名规范
  2. 指代不清晰
  3. 更改时可能只会更改源码文件，忘记更改ui.xml

最有直接影响的就是第三点，按照上面的代码，只需要更改源码文件。

但是尽管如此，我还是提供了方法🧐。在2022-8-23更新中，我给TinUIXml添加了environment方法。

xui.environment(globals())

一键导入。

不过还是那句话，这样写复杂了可能会出事。可以但不是非常建议使用。

而且，就算是复杂界面，使用TinUIXml编辑器（下面第五个项目）也能自动生成IDO部分代码。

使用xml-载入UI

在完成所有前期准备时，开始载入界面。

我称之为载入UI。

xui.loadxml(xml)
x1,y1,x2,y2=mainu.bbox('all')
mainu['width']=x2-x1+50
mainu['height']=y2-y1

使用xml后-输出接口

此刻，我们已经完成界面渲染了，需要为逻辑代码转出变量。

我称之为输出接口。

MyEntry=xui.tags['entry'][0]
vlabel=xui.tags['tlabel'][0]
cy_input=xui.tags['cy-input'][2]
cy_web=xui.tags['cy-web'][2]
cy_help=xui.tags['cy-help'][2]

篇中小结

至此，我们已经熟悉了TinUIXml的使用规则，可以自行设计界面了！！！

但是，如果你还想深入了解TinUIXml中的各种概念，已经摸清行元素和纵块直接到底有何种关系，请耐住性子接着看。

首次提到了“纵块”概念，请听我慢慢道来。

五、TinUIXml的相关概念

首先引入下面这张示意图：

在这里插入图片描述

我们将用这张图来介绍TinUIXml的相关概念。

行元素与纵块

这两个基础概念贯穿了TinUIXml的xml写法。

行元素

行元素是TinUIXml中的具体元素，其代表了在该区域的某一行内容。

行元素横向方向对同级和父子级渲染坐标有影响。

比如，第一行<line>，就是在整个TinUI界面下的第一行；第二行<line>亦如此。第二级第一行，是属于第一行范围内的第一行；第二级第二行亦如此。

纵块

纵块是TinUIXml中的抽象元素，其代表了一行中的一个元素整体。

纵块横向方向对父子级渲染坐标无影响。

比如第一行<line>中，button和entry分别是第一、第二纵块，而其中的第一个和第二个子行元素<line>为第三纵块。

TinUIXml为纵向布局，所以不考虑纵向坐标

相连子行元素

很多人看到右侧的渲染图不解，为什么右上角的四个组件统称为第三纵块，而不是分为第三和第四纵块呢？这就和上面提到纵块的定义有关了。

纵块在TinUIXml中是抽象元素，其横向方向只会影响到同行的组件元素，与下方另一行的组件坐标没有任何关系。也就是说，一个<line>或若干个<line>相连，只代表一个纵块，因为在这些行里面，每一行的子纵块与另一行的纵块没有半毛钱关系。

接着，再根据字行元素的顺序，确定该纵块属于第几行。这一纵块的横向坐标终点为该纵块中所有子行元素最大的横向坐标。

但是，当我们想让两个相连的行元素为不同的纵块时该怎么办呢？没关系，使用TinUI自带的back组件，此时忽略uids参数即可，如下写法：

...
<line>
    ...
</line>
<back></back>
<line>
    ...
</line>
...

一些无效起始坐标

TinUIXml忽略的起始坐标有两种：

  1. TinUI组件自身忽略的起始坐标
  2. 因为渲染必要考虑，TinUIXml主动忽略的起始坐标设置

这里主要说明第二种：在子行元素中，起始坐标可能会被忽略。

编写者可以通过使用多次loadxml(xml)来完成组件绘制。

多线程载入组件

在TinUIXml类中，全局根坐标使用属性self.xendx等定义，因此无法在一个TinUIXml类中使用多线程在TinUI载入组件，这会到这布局混乱。

但是，TinUI是可以使用多线程的。TinUIXml的初始化与TinUI无关，因此编写者可以为一个TinUI绑定多个TinUIXml，在每一个线程中为TinUI绘制所需组件。

六、特殊组件的渲染规则

在TinUI所有组件中，部分组件在xml中的写法有着特殊的规定。

back

在TinUI中，back组件属于一种辅助组件，其有以下两种用途。

  1. 当背景框
  2. 作为TinUIXml相连行元素的分割组件，该作用上面已经讲解

在back的参数中，有必选项pos:tuple和定义项uids:tuple=()。虽然pos是必选项，但是当参数中存在uids时，TinUI会忽略pos参数，转而使用已经被规定的画布对象元组。这里特别强调在TinUIXml下的uids参数。

虽然在Python代码中，需要使用x.tags['name']来导出组件返回值，而且在xml文件中需要使用类似语法使用接口输入后的函数和特殊类型数据，但是TinUIXml为back组件做了特殊化处理。也就是说，在xml文件中，uids参数里不需要使用导出语法。

比如：

...
<button>b1</button>
<button>b2</button>
<back uids='("b1","b2")'></back>
...

其中uids的参数仍然为元组形式，但是只需要写明包含组件返回值在self.tags中的键名就可以了。总结有以下注意要点：

  • <back>需要写在包含组件的后面
  • 包含的组件必须指定名称，也就是self.tags中的键名
  • uids参数为元组形式的字符串，并且名称需要用引号包裹

labelframe

使用同<back>，其中的widgets参数使用逻辑与<back>的uids一样。
在增加对该组件xml解析渲染的更新中，为该组件添加了pos参数，但是这个是无用标识参数，只是为了能够让TinUIXml渲染格式更加统一。

结语

感谢观看到此，开始使用xml为TinUI布局吧。

以下是一些实战小项目：

github项目

TinUI的github项目地址

pip下载

pip install tinui

🔆tkinter创新🔆

Smart-Space
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python库 | tinui-2.4.0-py3-none-any.whl
04-04
资源分类：Python库 所属语言：Python 资源全名：tinui-2.4.0-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
TinUI v5预发布记录
tinga_kilin的博客
02-06 193
TinUI5预发布记录
tkinter绘制组件（1）——起步
tinga_kilin的博客
03-20 1350
创建tkinter绘制组件（1）：起步
tkinter-TinUI-xml实战（10）展示画廊
最新发布
tinga_kilin的博客
02-10 1730
tkinter-TinUI-xml实战（10）展示画廊
tkinter使用TinUI风格菜单
tinga_kilin的博客
05-14 769
tkinter使用TinUI风格菜单
TinUI和customtkinter的区别
tinga_kilin的博客
05-03 1629
TinUI和customtkinter的区别 · 笔记
tkinter绘制组件（26）——横向翻页视图
tinga_kilin的博客
04-03 1553
tkinter绘制组件（26）——横向翻页视图
TinUI发展历程
tinga_kilin的博客
07-25 698
TinUI发展笔记
TinUI配色样式
tinga_kilin的博客
02-19 744
TinUI配色样式——明亮与黑暗
Android开发基础 - 使用XML布局文件控制UI界面（桌面台球游戏界面）
nuist_NJUPT的博客
03-12 5623
Android开发基础 - 使用XML布局文件控制UI界面 第一步，打开android studio，点击File->new ->new module.进入如下界面，选择第一个手机和平板应用，点击next。 第二步，进入入下界面，将第一栏改写成“桌面台球”，第二栏改写成“xmllayout”,点击Edit,删除第三栏中的最后一个点，然后点击next。注：其中第一栏是应用名称，第二栏是...
tkinter-tabview:tkinter-tabview
05-02
但其功能过于简单，无法支持双击创建选项卡，删除选项卡等功能，于是自定义了tabview，有需要的朋友，可以参考在tkinter中自定义view的方法，自定义自己的view使用方法import tkinter as tkfrom tkinter import ...
tkinter-2.7.5-90.el7.x86_64.rpm
12-24
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
tkinter-文件粉碎器.rar
02-19
tkinter-文件粉碎器
python27-tkinter-2.7.18-3.el7.x86_64.rpm
01-02
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
开始使用Tkinter编写Python图形界面
02-24
州的先生也经常使用PyQt5来为Python程序写上图形界面，以方便程序的使用。同时还写了一个简短的PyQt5入门教程：《州的先生PyQt5入门教程》，对PyQt5感兴趣的小伙伴可以前往阅读。而今天，我们要介绍的是Python内置的...
tkinter绘制组件（12）——表格
tinga_kilin的博客
08-14 7930
tkinter绘制组件（12）表格
tkinter绘制组件（21）——滚动条
tinga_kilin的博客
02-10 6165
tkinter绘制组件（21）滚动条
tkinter绘制组件（32）——圆角按钮
tinga_kilin的博客
08-10 4408
tkinter绘制组件（32）圆角按钮
tkinter-after
09-02
Tkinter中的after方法是一种定时器机制，它可以在指定的时间后执行指定的函数。使用after方法可以实现持续监听输入内容的功能。在给定的时间间隔内，可以通过after方法重复调用函数来监听输入内容并做出相应的处理。同时，可以使用after_cancel方法取消定时器，以停止监听输入内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Python Tkinter - 在初始声明后更改画布大小(Python Tkinter - change the canvas size after inital ...](https://blog.csdn.net/weixin_39637700/article/details/110908235)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [tkinter2 -after和thread实现TK窗体的条件更新](https://blog.csdn.net/charie411/article/details/106672810)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值