[](https://res.cloudinary.com/practicaldev/image/fetch/s--u3WNGBDP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/kovn5eifd7oscqzvv75i.gif)

这是我尝试过的一个简单的 Flet 应用程序开发示例。尝试更改应用程序的页面。因为该文件没有明确的指导方针。我可以 pop() 一个一个地删除容器。这可能不是最好的方法。但希望将来会有更好的方法。

应用索引页面

def main(page: Page):
    page.title = 'App wk18k'

    page.theme = theme.Theme(color_scheme_seed="indigo")

    page.theme_mode = "dark"

    page.horizontal_alignment = 'center'

    AppMain(page)
    SwithMode(page)
    page.update()

flet.app(target=main,port=25648,)
brownser://localhost:25648/

进入全屏模式 退出全屏模式

切换暗模式和亮模式。

class SwithMode:
    def __init__(self,page):
        self.page = page
        self.page.floating_action_button = FloatingActionButton("+",icon="add",content=Icon(icons.DARK_MODE))
        self.page.floating_action_button.on_click = self.switch_mode
    def switch_mode(self,e):
        self.page.theme_mode="light" if self.page.theme_mode=="dark" else "dark"
        self.page.floating_action_button.content = Icon(icons.LIGHT_MODE) if self.page.theme_mode=="dark" == "dark" else Icon(icons.DARK_MODE)
        self.page.update()

进入全屏模式 退出全屏模式

主应用页面

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zHcRyAmu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/dhe9y3sw6b9yznxnledy.png)

class AppMain:
    def __init__(self,page):
        self.page = page
        self.page.horizontal_alignment = 'center'
        self.page.vertical_alignment = 'center'
        self.TextHeaderWelcome = Text('Hello all members, this is wk-18k's test app.',style="headlineLarge",text_align='center')
        self.BtnToRes = FilledButton('Press To Register',height=50,width=200)
        self.BtnToRes.on_click = self.to_res
        self.Container1 = Container(content=self.TextHeaderWelcome,margin=5,padding=padding.only(left=30,right=30))
        self.Container2 = Container(content=self.BtnToRes,margin=5,padding=padding.only(left=30,right=30))
        self.img = Image(src=f"/icons/icon-512.png",width=100,height=100,fit="contain",)
        self.WidgetList = [self.img,self.Container1,self.Container2]
        for i in self.WidgetList:
            self.page.add(i)
        self.page.update()


    def to_res(self,event):
        for i in self.WidgetList:
            self.page.controls.pop()
        AppRegister(self.page)
        self.page.update()

进入全屏模式 退出全屏模式

应用注册页面

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1B8fdl_s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/bdbng2fkaulw7e643z1j.png)

class AppRegister:
    def __init__(self,page):
        self.page = page
        self.page.horizontal_alignment = 'center'
        self.page.vertical_alignment = 'start'
        self.NameInput = TextField(label='First',hint_text='First Name',width=300)
        self.SurnameInput = TextField(label='Last',hint_text='Last Name',width=300)
        self.AgeInput = TextField(label='Age',hint_text='อายุ',width=300,keyboard_type='number',value = 0)
        self.TextHeader = Text('Subscribe',style="displaySmall")
        self.Submit = FilledButton('Register',height=50,width=200)
        self.Submit.on_click = self.submit
        self.BackMain = FilledButton('Back',height=50,width=200)
        self.BackMain.on_click = self.back_main
        self.Container1 = Container(content=self.TextHeader,margin=10,)
        self.Container2 = Container(content=self.NameInput,margin=5,padding=padding.only(left=30,right=30))
        self.Container3 = Container(content=self.SurnameInput,margin=5,padding=padding.only(left=30,right=30))
        self.Container4 = Container(content=self.AgeInput,margin=5,padding=padding.only(left=30,right=30))
        self.Container5 = Container(content=self.Submit,margin=5,padding=padding.only(left=30,right=30))
        self.Container6 = Container(content=self.BackMain,margin=5,padding=padding.only(left=30,right=30))
        self.InputList = [self.Container1,self.Container2,self.Container3,self.Container4,self.Container5,self.Container6]
        for i in self.InputList:
            self.page.add(i)
        self.page.update()
    def back_main(self,event):
        for i in self.InputList:
            self.page.controls.pop()
        AppMain(self.page)

    def submit(self,event):
        import json
        data = {
            "id":self.page.session_id,
            "first":self.NameInput.value,
            "last":self.SurnameInput.value,
            "age":self.AgeInput.value
        }
        with open('data.json','r') as f:
            data_json = json.load(f)
        data_json.append(data)
        with open('data.json','w') as f:
            json.dump(data_json,f)

        # print(self.page.session_id)
        # print(self.NameInput.value)

        # print(self.SurnameInput.value)
        # print(self.AgeInput.value)

进入全屏模式 退出全屏模式

试试看

• https://replit.com/@PT07/Simple-App-from-Flet?vu003d1

回购

• https://github.com/watchakorn-18k/Simple-App-from-Flet

感谢阅读