---
# System prepended metadata

title: python頁面設計

---




# python頁面設計
前提:
我們的介面需要對電台的頻道進行分類，需要設計出有頻道分類、大小聲控制、調整頻道的功能。

## 介面設計:
1. icon設計
2. slider設計
3. 版面設計

## PyQt5元件介紹：
### 樣式設定

| 樣式 | 說明 | 參考 |
| -------- | -------- | -------- |
| **setstylesheet**    | 在setstylesheet()中撰寫樣式，就可以修改原本元件的樣式。像是文字大小顏色粗細，元件寬度間格等等。     | [QSS樣式設定](https://ithelp.ithome.com.tw/articles/10306436)     |
|**QLabel**   | 用來建立文字或圖片的標籤元件，像是font-size(設置字型大小)、color(設置文字顏色)、background-color(設置背景顏色)、border(設置邊框樣式)、padding(設置內邊距)、border-radius(圆角半径)。       | [QLabel 標籤](https://ithelp.ithome.com.tw/m/articles/10290845)     |
| **QSlider::groove:horizontal**    | 水平滑快軌道樣式設定     |    |
| **QSlider::handle:horizontal**    | 水平滑快拉霸樣式設定     |     |
| **border**    | 邊框，有三個值分別是 ( 粗細、樣式、顏色 )     |     |

![](https://hackmd.io/_uploads/ByLJTZsIh.png)
參考網站:https://www.jywglady.org/webcamp/zh-TW/Lessons/more-css.html

### Icon設置
| **setIcon** | setIcon()方法用來給按鈕設置圖標 |
| -------- | -------- |

### 排版

| 樣式 | 說明 |
| -------- | -------- |
| **Qt.QVBoxLayout、Qt.QHBoxLayout**    | 垂直布局，水平布局     |
| **addWidget**    | 用於在布局中入控鍵     |
| **addLayout**    | 用於在布局中插入子布局     |
範例: [Qt 排版系統](https://ithelp.ithome.com.tw/articles/10234047)

## 我們的想法:
### 介面一
(頻率為實驗用，不為真實頻率)
一開始我們只有將頻率分類好頻道的種類:音樂，談話，銷售。
```python=
self.freqs_music = [4000000,5000000,6000000,]
self.freqs_talking = [10000000,11000000,12000000]
self.freqs_sell = [13000000,14000000,15000000]
```
然後我們對這些頻道種類加以定義:
```python=
    def sell(self):
        self.idx = (self.idx+1)  % len(self.freqs_sell)
        self.my_lcd.display(f'{self.freqs_sell[self.idx]/1e6:.2f}')
        self.set_freq(self.freqs_sell[self.idx])
    

    def music(self):
        self.idx = (self.idx+1)  % len(self.freqs_music)
        self.my_lcd.display(f'{self.freqs_music[self.idx]/1e6:.2f}')
        self.set_freq(self.freqs_music[self.idx])
        
        

    def talking(self):
        self.idx = (self.idx+1)  % len(self.freqs_talking)
        self.my_lcd.display(f'{self.freqs_talking[self.idx]/1e6:.2f}')
        self.set_freq(self.freqs_talking[self.idx])
```
執行程式碼就可以得到下圖:
![](https://hackmd.io/_uploads/SJMEtGf8n.png)


然後切換頻道的方式很簡單，按同一個按鈕，頻道就可以更改。
(如下圖，一直按music，頻道就會一直往上加)
![](https://hackmd.io/_uploads/HJAuYMMU3.png)


這其實聽起來很完善了，但......如果今天頻道有很多很多個，需要上一個頻道跟下一頻道，那豈不是要一直按一直按才能找到嗎?
為了解決這個問題:
於是，我們設計了一個新的方法:
**按進頻道種類之後，可以選擇前一個頻道與下一個頻道(介面二)**

### 介面二
跟介面一相同，先將頻道的頻率分類好，可以選擇一個想聽的頻道種類，比如說音樂頻道。差別就是我們增設了Next跟Prev的Buttom。可以方便使用者更快速的找到想要的頻道。
(**使用者介面示意圖**)
![](https://hackmd.io/_uploads/BJMeukGLh.png)

### 重要程式碼
#### 定義按鈕功能
 ```pyqt=
    def next(self):
        self.idx = (self.idx + 1) % len(self.freqs)
        self.my_lcd.display(f'{self.freqs[self.idx]/1e6:.2f}')
        self.set_freq(self.freqs[self.idx])

    def prev(self):
        self.idx = (self.idx - 1) % len(self.freqs)
        self.my_lcd.display(f'{self.freqs[self.idx]/1e6:.2f}')
        self.set_freq(self.freqs[self.idx])

    def music(self):
        self.freqs =self.music_freqs = [-1690000,-1100000]
        self.my_lcd.display(f'{self.freqs[0]/1e6:.2f}')

    def Talking(self):
        self.freqs = self.Talking_freqs = [2100000,2555000]
        self.my_lcd.display(f'{self.freqs[0]/1e6:.2f}')

    def sale(self):
        self.freqs = self.Talking_freqs = [-300000,660000,1250000,3290000]
        self.my_lcd.display(f'{self.freqs[0]/1e6:.2f}')
```
在寫Next跟Prev的功能鍵時，我們遇到了很多問題:
1. 不知道要怎麼寫才能把Next跟Prev的增加或減少的範圍限定在該頻道種類中。
2. 定義兩個功能鍵時不知道兩個功能鍵要設定的頻率範圍是多少
3. 本來是想在函式裡面多加一個freq的變數，將得到的頻率進行運算。但是從music出去的型態是list，到next裡面的freqs卻變成boolean的型態。
![](https://hackmd.io/_uploads/SkQyktYU2.png)

#### 佈局
設定按鈕以及顯示器:
```pyqt=
        self.freqs = []
        self.idx = 0
        self.my_lcd = QLCDNumber(10)
        self.my_next = QPushButton('Next')
        self.my_prev = QPushButton('Prev')
        self.my_music = QPushButton('MUSIC')
        self.my_Talking = QPushButton('Talking')
        self.my_sale = QPushButton('Sale')
```
設定佈局(垂直or水平):
```pyqt=
        self.my_layout = Qt.QVBoxLayout()
        self.v_layout = Qt.QVBoxLayout()
        self.a_layout = Qt.QHBoxLayout()
```
將button and LCD 加進佈局中:
```pyqt=
        self.a_layout.addWidget(self.my_lcd)
        self.v_layout.addWidget(self.my_prev)
        self.v_layout.addWidget(self.my_next)
        self.my_layout.addWidget(self.my_music)
        self.my_layout.addWidget(self.my_Talking)
        self.my_layout.addWidget(self.my_sale)
```
將button連結到我們之後定義的函示:
```pyqt=
        self.my_next.clicked.connect(self.next)
        self.my_prev.clicked.connect(self.prev)
        self.my_music.clicked.connect(self.music)
        self.my_Talking.clicked.connect(self.Talking)
        self.my_sale.clicked.connect(self.sale)
```
將佈局進行合併:
```pyqt=
        self.h_layout = Qt.QHBoxLayout()
        self.h_layout.addLayout(self.a_layout)
        self.h_layout.addLayout(self.my_layout)
        self.h_layout.addLayout(self.v_layout)
        self.top_layout.addLayout(self.h_layout)
        self.my_layout.setSpacing(10)
```
**說明圖**
![](https://hackmd.io/_uploads/rkH3pFFIh.png)


#### QSS( Qt Style Sheet )樣式
```
from PyQt5.QtWidgets import QLCDNumber, QPushButton
from PyQt5.QtGui import QIcon
```
``` python 
        #gain
        self._gain_win.setStyleSheet(
            """
            QSlider::groove:horizontal { 
                background-color: #F5DEB3;
                border-radius: 8px;
            }

            QSlider::handle:horizontal {
                background-color: #A16B47;
                width: 20px;
                margin: -8px 0;
                border-radius: 10px;
                border: 1px solid black;
            }
            QLabel {
                font-size: 18px;
                font-weight: bold;
                max-height: 36px;
                color: black;
                border: 1px solid #A16B47;
                background-color: #F0B594;
                padding: 5px;
                border-radius: 10px;
            }
            """
        )
        # next
        self.my_next.setStyleSheet(
            """
            padding: 20px;
            """
            )
        # previous
        self.my_prev.setStyleSheet(
            """
            padding: 20px;
            """
            )
        # music
        self.my_music.setIcon(QIcon('music.png'))
        self.my_music.setStyleSheet(
            """
            background-color: #FFF8DC; 
            color: black;
            padding: 10px;
            """
            )
        # Talking
        self.my_Talking.setIcon(QIcon('Talking.png'))
        self.my_Talking.setStyleSheet(
            """
            background-color: #FFF8DC; 
            color: black;
            padding: 10px;
            """
            )
        # sale
        self.my_sale.setIcon(QIcon('sale.png'))
        self.my_sale.setStyleSheet(
            """
            background-color: #FFF8DC; 
            color: black;
            padding: 10px;
            """
            )
        
```