Python Flet(v0.21.2) DropDown选中选项不可见问题求助

在不修改现有主题和配色方案的前提下，你可以通过给Dropdown组件显式设置文本样式来解决选中值不可见的问题。

问题原因 #

当设置color_scheme_seed=ft.colors.BLUE的主题后，Dropdown选中状态的文本颜色与背景色对比度极低，导致视觉上无法分辨选中内容。

解决方案 #

在Dropdown的参数中添加text_style和selected_text_style，指定高对比度的文本颜色（比如黑色）：

修改后的Dropdown代码片段：

ft.Dropdown(
    border_color=ft.colors.BLUE_500,
    width=150,
    height=40,
    label="Data Type",
    tooltip="Data type of the column",
    # 添加文本样式设置
    text_style=ft.TextStyle(color=ft.colors.BLACK),
    selected_text_style=ft.TextStyle(color=ft.colors.BLACK),
    options=[
        ft.dropdown.Option("Option_1"),
        ft.dropdown.Option("Option_2"),
        ft.dropdown.Option("Option_3"),
        ft.dropdown.Option("Option_4"),
        ft.dropdown.Option("Option_5"),
    ],
),

完整修改后的代码 #

import flet as ft

def main(page: ft.Page):    
    def show_dd_on_click(e):
        page_content.controls.append(
            ft.Row(
                    [
                        ft.TextField(label="Field Name", expand=True, height=40,border_color = ft.colors.BLUE_500, tooltip="Name of the column"),
                        ft.Dropdown(
                            border_color = ft.colors.BLUE_500,
                            width= 150,
                            height=40,
                            label="Data Type",
                            tooltip="Data type of the column",
                            text_style=ft.TextStyle(color=ft.colors.BLACK),
                            selected_text_style=ft.TextStyle(color=ft.colors.BLACK),
                            options=[
                                ft.dropdown.Option("Option_1"),
                                ft.dropdown.Option("Option_2"),
                                ft.dropdown.Option("Option_3"),
                                ft.dropdown.Option("Option_4"),
                                ft.dropdown.Option("Option_5"),
                            ],
                        ),
                    ],
                ),
        )
        page.update()


    page.theme = ft.Theme(color_scheme_seed=ft.colors.BLUE)
    page.theme_mode = ft.ThemeMode.LIGHT
    page_content= ft.Column([], horizontal_alignment=ft.CrossAxisAlignment.CENTER)
    page.add(
        ft.Column(
            [
                ft.ElevatedButton("Show DD", on_click=show_dd_on_click),
                page_content,
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        )        
    )

ft.app(target=main, assets_dir="\assets")

这样修改后，既保留了原有的蓝色主题配色，又能让Dropdown的选中值清晰可见。

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