最近嘗試了python的nicegui庫，雖然可能也有一些不足，但個人感覺對于想要開發(fā)不過對ui設(shè)計感到很麻煩的人來說是很友好的了，畢竟nicegui可以利用TailwindCSS和Quasar進行ui開發(fā)，并且也支持定制自己的css樣式。

這里記錄一下自己利用nicegui實現(xiàn)的一個登錄的ui界面（并未實現(xiàn)具體功能）

from nicegui import ui

def on_log():
    # print(label1.text())
    value1 = input1.value
    value2 = input2.value
    print(value1,value2)

#log ui
img = ui.image('img\991138.jpg').props("absolute-top text-center").tailwind('h-screen')
# with ui.image("img\991138.jpg").props("center no-repeat"):
with ui.label('').classes("absolute top-1/4 inset-x-1/3 w-1/3 rounded bg-slate-300 shadow-2xl bg-white opacity-80"):
    #使用網(wǎng)格布局才能使text-center生效
    with ui.grid():
        label1 = ui.label('歡迎訪問！').tailwind("text-center text-2xl text-dark my-2")
        #發(fā)現(xiàn)一個問題，使用tailwind時無法獲得控件的值,也就是說tailwind本身作為一個類僅僅起到修改控件
        #樣式的作用，而且使用后就覆蓋了原本的類的自身函數(shù),可以利用.element解決此問題
        # input1 = ui.input('賬號/郵箱').tailwind('text-blue-700','px-10').element
        input1 = ui.input('賬號/郵箱').props("outlined").style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')
        input2 = ui.input('密碼',password=True).props("outlined").style('padding-left: 2.5rem;padding-right: 2.5rem;')
        #'gap:10em'是CSS中的一種屬性值，用于設(shè)置元素之間的間距。它表示間距的大小為10個字符的寬度。
        # 這個屬性通常用于布局調(diào)整，可以在水平或垂直方向上增加或減少元素之間的間距。
        with ui.row().style('gap:12em'):
            link1 = ui.link('忘記密碼').tailwind('ml-10 w-1/3 text-left')
            link2 = ui.link('注冊賬號').tailwind('ml-9 text-right')
            #單個空間用mx
        button1 = ui.button('登錄',on_click=on_log).tailwind('mx-10 my-3')
# label2 = ui.label('label ').style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')

ui.run()

效果：

CSS樣式改變

這里主要介紹一下對于每個控件如何改變樣式，主要有四種方式：classes,style,tailwind，props

?1.classes方法

功能：應(yīng)用、刪除或替換 HTML 類，這個可以利用?Tailwind?or?Quasar給出的參數(shù)修改樣式

2.style方法

功能：應(yīng)用、刪除或替換 CSS 定義。這個使用需要注意的是里面添加的就是CSS樣式。

input1 = ui.input('賬號/郵箱').props("outlined").style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')

3.props方法

功能：添加或刪除道具。

這允許使用?Quasar?的相關(guān)參數(shù)修改元素的外觀或其布局。 由于 props 只是作為 HTML 屬性應(yīng)用，因此它們可以與任何 HTML 元素一起使用。

如果未指定任何值，則假定布爾屬性為?True。

4.tailwind方法

功能：基于Tailwind實現(xiàn)的修改控件CSS樣式。使用這個方法時有個問題需要注意，就是會導(dǎo)致原本控件無法使用原有的內(nèi)置函數(shù)和屬性，可以利用.element屬性恢復(fù)控件。

from nicegui import Tailwind, ui

ui.label('Label A').tailwind.font_weight('extrabold').text_color('blue-600').background_color('orange-200')
ui.label('Label B').tailwind('drop-shadow', 'font-bold', 'text-green-600')

red_style = Tailwind().text_color('red-600').font_weight('bold')
label_c = ui.label('Label C')
red_style.apply(label_c)
ui.label('Label D').tailwind(red_style)

ui.run()

總之，利用nicegui我們無需在過多關(guān)注于ui的樣式設(shè)計，能夠快速利用現(xiàn)有的樣式開發(fā)出自己的網(wǎng)頁app。

參考網(wǎng)站：

NiceGUI

Height - TailwindCSS中文文檔 | TailwindCSS中文網(wǎng)輸入 | Quasar Framework 中文網(wǎng) (quasarchs.com)文章來源地址http://www.zghlxwxcb.cn/news/detail-629148.html

到了這里，關(guān)于python GUI nicegui初識一（登錄界面創(chuàng)建）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！