UI Tutor

Hello, I'm Kiramei, the ui collaborator of this project.
In this part, I'll show you how the ui works and give you some tips of the ui developments.

The Whole Process

We define our entry of the gui in window.py. Configuration check is here to run. We define the window structureas components and views, where views are homeview, switchview and settingview and components are defined as widgets to support the features. The file will bring many ui to the frontend for user to use. Here, I again thanks the original ui framework developer @zhiyiYo, who developed the framework PyQt-Fluent-Widgets.

GUI Structure Definition

1. gui/assets : The folder is for the images and stylesheets which will be used in the ui work.
2. gui/fragments : The folder is for the different settings which for example contains homeview and the other views.
3. gui/util : Probably DEPRECATED in the following versions, which was used as config or log features.
4. gui/components : Most components are defined here. Some template-like components have been defined for developers to use.
5. gui/components/expand : Our ui uses lots of expand settings for user to set. The expand views are defined here.

Expand Setting Card Development Tutor

1. Expand Template: In your customized view , you'd follow the template as below:

from qfluentwidgets import LineEdit, InfoBar, InfoBarIcon, InfoBarPosition
from gui.util.config_set import ConfigSet


class Layout(QWidget, ConfigSet):
    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.hBoxLayout = QVBoxLayout(self)
        # ...
        

    def slot_1_method(self, changed_text=None):
        # ...

    def slot_2_method(self, changed_text=None):
        # ...

    # ...

2. Template Layout : You can easily inherit TemplateLayout in gui/components/expand/expandTemplate.py. Here is an example of the usage:

from .expandTemplate import TemplateLayout


def fhx():
    # Function Operation ...


class Layout(TemplateLayout):
    def __init__(self, parent=None):
        configItems = [
            {
                'label': '一键反和谐',
                'type': 'button',
                'selection': fhx,
                'key': None
            },
            {
                'label': '显示首页头图（下次启动时生效）',
                'type': 'switch',
                'key': 'bannerVisibility'
            },
            {
                'label': '选择器',
                'type': 'combo',
                'selection': [1, 2],
                'key': 'comboConfigKey'
            },
            {
                'label': '文本框设置',
                'type': 'text',
                'key': 'textConfigKey'
            }
        ]

        super().__init__(parent=parent, configItems=configItems)

What should be mentioned is that currently, type can only be chosen from ['combo', 'text', 'switch', 'button']. key should be defined in config/config.json which would be created from core/default_config.py. Importantly, you should make the selection option sensible for the type, or the module will crash. label is the text description for the config item.

Above All, I've given you some simple tips of the ui development. If you're interested, please make some contribution and take part in our development after contacting us. Thank you~