# 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://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])
```
執行程式碼就可以得到下圖:
然後切換頻道的方式很簡單，按同一個按鈕，頻道就可以更改。
(如下圖，一直按music，頻道就會一直往上加)
這其實聽起來很完善了，但......如果今天頻道有很多很多個，需要上一個頻道跟下一頻道，那豈不是要一直按一直按才能找到嗎?
為了解決這個問題:
於是，我們設計了一個新的方法:
**按進頻道種類之後，可以選擇前一個頻道與下一個頻道(介面二)**
### 介面二
跟介面一相同，先將頻道的頻率分類好，可以選擇一個想聽的頻道種類，比如說音樂頻道。差別就是我們增設了Next跟Prev的Buttom。可以方便使用者更快速的找到想要的頻道。
(**使用者介面示意圖**)
### 重要程式碼
#### 定義按鈕功能
```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的型態。
#### 佈局
設定按鈕以及顯示器:
```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)
```
**說明圖**
#### 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;
"""
)
```
Sign in with Wallet
Connect another wallet