ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Flet RadioTheme 主题类详解:用 Python 统一定义 Radio 单选按钮的外观与交互状态

Flet RadioTheme 主题类详解:用 Python 统一定义 Radio 单选按钮的外观与交互状态 前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载本指南围绕 Flet 主题系统中的一个专项配置类RadioTheme讲解如何为页面内所有Radio单选按钮统一定义默认的填充色、遮罩色、水波纹半径、视觉密度与鼠标光标样式。读完本文你将掌握RadioTheme全部 5 个属性的用法、与ControlState状态化取值ControlStateValue的组合技巧以及它从 Python 端定义到 Flutter 端RadioThemeData的底层转换链路从而在ft.app()构建的 Web / 桌面 / 移动应用中实现全局一致的单选按钮主题。RadioTheme 是什么RadioTheme是 Flet 主题体系Theme中的一个数据类位于 Python 端主题定义源码 theme.py其类 docstring 用一句话概括了它的全部职责Defines default property values for descendantRadiocontrols.即为所有后代Radio控件定义默认属性值。它本身不是一个可以被放进页面布局的控件而是一个纯粹的配置载体——你把它挂到全局Theme.radio_theme上凡是该主题作用域内的Radio控件即使没有显式设置对应属性都会自动继承这些默认值。与 Theme 的挂载关系在 theme.py 中Theme类声明了radio_theme属性radio_theme: Optional[RadioTheme] None Customizes the appearance of descendant Radio controls. 也就是说RadioTheme是Theme的 30 多个专项子主题之一与checkbox_theme、switch_theme、progress_indicator_theme、bottom_app_bar_theme等并列。这种全局主题 专项控件主题的设计让开发者无需在每一个Radio上重复写样式一处定义、处处生效。成员一览RadioTheme共提供 5 个属性全部为可选Optional[...]默认None表示不覆盖对应默认值属性类型作用对象Radio 同名属性fill_colorOptional[ControlStateValue[ColorValue]]单选按钮的填充颜色overlay_colorOptional[ControlStateValue[ColorValue]]点击/悬停时的遮罩ink overlay颜色splash_radiusOptional[Number]圆形 Material 水波纹响应半径visual_densityOptional[VisualDensity]控件的视觉密度布局紧凑程度mouse_cursorOptional[ControlStateValue[MouseCursor]]鼠标悬停进入时的光标样式下文逐项展开。属性详解与代码示例fill_color填充颜色fill_color: Optional[ControlStateValue[ColorValue]] None覆盖所有后代Radio控件的fill_color默认值。它的类型是ControlStateValue[ColorValue]既可以直接传一个颜色对所有状态生效也可以传一个{ControlState: Color}字典按状态分别指定。在 radio.py 中Radio控件自身的fill_color被描述为The color that fills the radio, in all or specific ControlState states——RadioTheme提供的正是该属性的默认版本。overlay_color交互遮罩颜色overlay_color: Optional[ControlStateValue[ColorValue]] None覆盖所有后代Radio控件的overlay_color默认值。overlay 是 Material 设计中控件被按下、悬停或聚焦时覆盖在表面上的半透明涟漪层常与fill_color搭配使用用于强化可点击的反馈感。splash_radius水波纹半径splash_radius: Optional[Number] None覆盖所有后代Radio控件的splash_radius默认值对应 radio.py 中的 The splash radius of the circular Material ink response。数值越大点击时扩散的圆形水波纹越大设置为0可以完全关闭涟漪效果。visual_density视觉密度visual_density: Optional[VisualDensity] None覆盖所有后代Radio控件的visual_density默认值。VisualDensity枚举定义在 types.py 中目前包含VisualDensity.STANDARD标准密度对应两个轴上的密度值为 0是默认配置VisualDensity.COMPACT紧凑布局对应两个轴上的密度值为-2控件占用空间更小VisualDensity.COMFORTABLE宽松布局密度大于STANDARD。在表单密集如设置页、筛选面板的场景中设置visual_densityft.VisualDensity.COMPACT可显著压缩单选按钮的纵向间距。mouse_cursor鼠标光标mouse_cursor: Optional[ControlStateValue[MouseCursor]] None覆盖所有后代Radio控件的mouse_cursor默认值。MouseCursor枚举同样定义在 types.py 中提供了CLICK、BASIC、HAND、TEXT等几十种光标类型。同样是状态化取值例如可以让单选按钮在hovered状态显示手型光标。状态化取值ControlStateValue 与 ControlStatefill_color、overlay_color、mouse_cursor三个属性的类型都是ControlStateValue[T]其定义位于 control_state.pyControlStateValue Union[T, dict[ControlState, T]]它表示两种写法任选其一单一值#1E88E5、0等——对所有支持的状态统一生效状态字典{ft.ControlState.HOVERED: red, ft.ControlState.SELECTED: blue}——按状态分别取值。ControlState枚举control_state.py覆盖了 Material 3 定义的交互状态对单选按钮最常用的是ControlState.HOVERED鼠标悬停在控件上时ControlState.FOCUSED键盘导航聚焦时ControlState.PRESSED正在按下时ControlState.SELECTED该项被选中时适用于 radio、tabs、chips 等可选中控件ControlState.DISABLED控件禁用时ControlState.ERROR控件处于无效状态时ControlState.DEFAULT未显式声明的状态的兜底值。例如让选中态显示品牌蓝、悬停态显示淡蓝、禁用态显示灰色import flet as ft ft.RadioTheme( fill_color{ ft.ControlState.SELECTED: ft.Colors.BLUE_600, ft.ControlState.HOVERED: ft.Colors.BLUE_50, ft.ControlState.DISABLED: ft.Colors.GREY_300, }, mouse_cursor{ ft.ControlState.HOVERED: ft.MouseCursor.CLICK, }, )在 Theme 中应用 RadioThemeRadioTheme通过ft.Theme(radio_theme...)注入全局主题。一个完整的示例import flet as ft def main(page: ft.Page): page.title RadioTheme 示例 page.theme ft.Theme( color_scheme_seedft.Colors.INDIGO, radio_themeft.RadioTheme( fill_color{ ft.ControlState.SELECTED: ft.Colors.INDIGO, ft.ControlState.HOVERED: ft.Colors.INDIGO_50, ft.ControlState.DISABLED: ft.Colors.GREY_400, }, overlay_colorft.Colors.INDIGO_100, splash_radius24, visual_densityft.VisualDensity.COMPACT, mouse_cursor{ft.ControlState.HOVERED: ft.MouseCursor.CLICK}, ), ) def on_change(e): print(已选择:, e.control.value) page.add( ft.RadioGroup( contentft.Column([ ft.Radio(valuepython, labelPython), ft.Radio(valueflet, labelFlet), ft.Radio(valueflutter, labelFlutter, disabledTrue), ]), on_changeon_change, ) ) ft.app(main)上述代码中三个Radio都未单独设置任何样式属性但会统一继承radio_theme中定义的填充色、遮罩色、水波纹半径、视觉密度与光标样式被disabledTrue禁用的Flutter项则自动落到DISABLED状态的颜色上。这正体现了全局主题 专项默认值的设计意图样式只写一次作用域内所有单选按钮同时生效。底层原理Python 属性如何变成 Flutter 的 RadioThemeDataRadioTheme并非 Flet 凭空发明的一套独立配置——它最终映射为 Flutter 框架的RadioThemeData。这条转换链可以帮助你理解每个属性在渲染层的真实作用。传递链路Python 端RadioTheme实例随Theme一起被序列化为 JSON 字典键为radio_theme子键为fill_color、overlay_color、splash_radius、visual_density、mouse_cursorFlutter 端在构建ThemeData时调用解析函数parseRadioTheme解析结果传入 Flutter 原生的Radiowidget最终由 Material 引擎完成绘制。parseRadioTheme 解析实现关键解析逻辑位于 Flutter 端主题工具 theme.dartRadioThemeData? parseRadioTheme(Mapdynamic, dynamic? value, ThemeData theme, [RadioThemeData? defaultValue]) { if (value null) return defaultValue; return theme.radioTheme.copyWith( fillColor: parseWidgetStateColor(value[fill_color], theme), splashRadius: parseDouble(value[splash_radius]), overlayColor: parseWidgetStateColor(value[overlay_color], theme), visualDensity: parseVisualDensity(value[visual_density]), mouseCursor: parseWidgetStateMouseCursor(value[mouse_cursor]), ); }值得注意的实现细节该函数以theme.radioTheme.copyWith(...)为基底即只覆盖本次传入的键未传入的属性沿用 Flutter 当前主题的既有值。这与 Python 端所有属性默认为None不设置即不覆盖的语义完全一致fill_color、overlay_color使用parseWidgetStateColor解析——它们同时支持普通颜色和按ControlState区分的状态字典这正是 Python 端ControlStateValue[ColorValue]类型的对应物mouse_cursor使用parseWidgetStateMouseCursor解析对应ControlStateValue[MouseCursor]splash_radius使用parseDouble解析对应Number类型visual_density使用parseVisualDensity解析映射到 Flutter 的VisualDensity。Radio 控件如何消费主题渲染单例控件时Flutter 端 radio.dart 将控件级属性与主题合并后构造原生Radiowidgetvar radio RadioString( enabled: !widget.control.disabled, autofocus: widget.control.getBool(autofocus, false)!, focusNode: _focusNode, mouseCursor: widget.control.getMouseCursor(mouse_cursor), value: value, activeColor: widget.control.getColor(active_color, context), focusColor: widget.control.getColor(focus_color, context), hoverColor: widget.control.getColor(hover_color, context), splashRadius: widget.control.getDouble(splash_radius), toggleable: widget.control.getBool(toggleable, false)!, fillColor: widget.control.getWidgetStateColor(fill_color, Theme.of(context)), overlayColor: widget.control .getWidgetStateColor(overlay_color, Theme.of(context)), visualDensity: widget.control.getVisualDensity(visual_density), );从这段实现可以推断出两条重要结论Radio控件级的fill_color、overlay_color、splash_radius、visual_density、mouse_cursor与RadioTheme中的 5 个属性一一对应——这正是RadioTheme每个属性 docstring 中Overrides the default value ofRadio.xxxin all descendant Radio controls的含义优先级上控件显式设置的值会直接覆盖主题默认值。当你对某个单选按钮单独设置了fill_color时它不再受radio_theme约束而其他未设置的单选按钮仍然继承主题。RadioTheme 与 Theme 其他能力的关系整体主题radio_theme只是Theme的一个字段主题还包含color_scheme_seed、font_family、text_theme、checkbox_theme等众多配置详见 theme.md。合理搭配可以让单选按钮与复选框、开关等表单控件视觉统一控件文档Radio控件的完整属性含label、value、label_position、toggleable、on_focus、on_blur等参见 radio.mdRadio必须包裹在RadioGroup中才能实现单选联动见 radiogroup.md状态常量ControlState的完整状态列表与ControlStateValue类型别名见 controlstate.md。小结RadioTheme是 Flet 全局主题体系中面向单选按钮的专项默认值类提供fill_color、overlay_color、splash_radius、visual_density、mouse_cursor5 个可选属性。它通过Theme.radio_theme注入借助ControlStateValue支持按ControlState状态分别定制并在 Flutter 端由 parseRadioTheme 解析为RadioThemeData与原生Radiowidget 合并渲染。对于需要统一表单风格、实现紧凑布局或精细交互反馈的 Flet 应用RadioTheme是一处定义、全页生效的标准做法。赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐Flet FloatingActionButtonTheme 详解用 Python 全局定制悬浮按钮FAB外观主题Flet FloatingActionButtonTheme 详解用 Python 全局定制悬浮按钮FAB外观主题 FloatingActionButto前端跨平台桌面应用移动开发Flet BottomSheetTheme 主题详解用 Python 统一定制底部弹层外观Flet BottomSheetTheme 主题详解用 Python 统一定制底部弹层外观 BottomSheetTheme 是 Flet 主题系统 fle前端跨平台桌面应用移动开发Flet NavigationDrawerTheme 详解统一自定义 NavigationDrawer 外观的全局主题Flet NavigationDrawerTheme 详解统一自定义 NavigationDrawer 外观的全局主题 导读 NavigationDrawer前端跨平台桌面应用移动开发上一篇TranslucentTB 任务栏透明化5 分钟让灰条融入壁纸下一篇WorkshopDL Steam创意工坊模组下载指南无需Steam客户端3步完成创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表