Flet框架AppBar不显示问题：深红色AppBar未正常渲染

我使用Flet框架开发了一款名为MedSound的程序，希望显示一个深红色的AppBar，但运行程序后仅出现浅灰色页面。此前在此处创建Container组件可以正常工作，但改为AppBar后UI不符合预期。以下是我的代码：

import flet
from flet import *

myred = '#C3003D'
mydarkred = '#6C0022'
mygreen = '#05DF9D'
mywhite = '#FFFFFF'

class MedSoundApp(flet.UserControl):
    def __init__(self, page:Page):
        super().__init__()
        self.page = page
    def build(self):
        self.page.appbar = flet.AppBar(
            toolbar_height= 100,
            bgcolor=mydarkred
        )
        return self.page.appbar
        
def main(page:flet.Page):
    page.title ='MedSound'
    page.bgcolor = myred
    page.padding = 0
    page.spacing = 0
    page.fonts = {
    "Futura Book": "/fonts/Futura Book font.ttf",
    "Futura Bold": "/fonts/Futura Bold font.ttf",
    "Futura Medium": "/fonts/futura medium bt.ttf",
    "Futura Heavy": "/fonts/Futura Heavy font.ttf",
    }   
    page.theme = flet.Theme(font_family="Futura Book")
    page.add(
        MedSoundApp(page)
        )
flet.app(target=main, assets_dir="assets")

问题根源在于你同时将AppBar赋值给page.appbar属性，又把它作为UserControl的返回值通过page.add()添加到页面，导致组件渲染冲突。Flet的AppBar是页面的专属顶部导航组件，不需要通过page.add()添加，只需直接设置page.appbar即可。

修改方式一：调整UserControl的build方法 #

只在build方法中设置page.appbar，返回页面的其他内容（比如填充页面的容器）：

import flet
from flet import *

myred = '#C3003D'
mydarkred = '#6C0022'
mygreen = '#05DF9D'
mywhite = '#FFFFFF'

class MedSoundApp(flet.UserControl):
    def __init__(self, page:Page):
        super().__init__()
        self.page = page
    def build(self):
        self.page.appbar = flet.AppBar(
            toolbar_height= 100,
            bgcolor=mydarkred
        )
        # 返回填充页面的容器，确保页面背景色正常显示
        return Container(bgcolor=myred, expand=True)
        
def main(page:flet.Page):
    page.title ='MedSound'
    page.bgcolor = myred
    page.padding = 0
    page.spacing = 0
    page.fonts = {
    "Futura Book": "/fonts/Futura Book font.ttf",
    "Futura Bold": "/fonts/Futura Bold font.ttf",
    "Futura Medium": "/fonts/futura medium bt.ttf",
    "Futura Heavy": "/fonts/Futura Heavy font.ttf",
    }   
    page.theme = flet.Theme(font_family="Futura Book")
    page.add(
        MedSoundApp(page)
        )
flet.app(target=main, assets_dir="assets")

修改方式二：直接在main函数中设置AppBar #

将AppBar的设置逻辑移到main函数里，UserControl仅负责页面的其他内容：

import flet
from flet import *

myred = '#C3003D'
mydarkred = '#6C0022'
mygreen = '#05DF9D'
mywhite = '#FFFFFF'

class MedSoundApp(flet.UserControl):
    def __init__(self, page:Page):
        super().__init__()
        self.page = page
    def build(self):
        # 返回页面的主要内容
        return Container(bgcolor=myred, expand=True)
        
def main(page:flet.Page):
    page.title ='MedSound'
    page.bgcolor = myred
    page.padding = 0
    page.spacing = 0
    # 直接在main中设置AppBar
    page.appbar = flet.AppBar(
        toolbar_height= 100,
        bgcolor=mydarkred
    )
    page.fonts = {
    "Futura Book": "/fonts/Futura Book font.ttf",
    "Futura Bold": "/fonts/Futura Bold font.ttf",
    "Futura Medium": "/fonts/futura medium bt.ttf",
    "Futura Heavy": "/fonts/Futura Heavy font.ttf",
    }   
    page.theme = flet.Theme(font_family="Futura Book")
    page.add(
        MedSoundApp(page)
        )
flet.app(target=main, assets_dir="assets")

内容的提问来源于stack exchange，提问作者Azka El