前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载SegmentedButton分段按钮是 Flet 中用于在一组互斥或可多选的选项中快速切换的 Material 控件适合筛选器、视图切换、选项分组等场景。本文以 SegmentedButton 官方文档 为核心骨架结合 Python SDK 源码与 Flutter 端实现完整讲解Segment/SegmentedButton的全部参数、单选多选行为、事件回调与主题定制让你能直接照抄示例并理解其底层工作原理。一、SegmentedButton 是什么flet.SegmentedButton是 Material Design 的 SegmentedButton 组件在 Flet 中的封装它把一组「段Segment」横向或纵向排列在一个胶囊形或圆角矩形按钮容器中。每一段都带有图标 文本标签用户可以点选其中一段或多段当前选中状态通过高亮背景与选中图标直观呈现。在 Flet 中它常用于单选项组如排序方式时间/热度/价格多选项组如多条件筛选Wi-Fi / 蓝牙 / 流量视图切换列表 / 网格 / 看板表单中的枚举字段选择。类定义位于 segmented_button.py包含两个公开类Segment组成按钮的单个段与SegmentedButton容器控件。二、核心 APISegment 与 SegmentedButton2.1 Segment —— 单个分段Segment继承自Control代表按钮中的一段声明于 segmented_button.py 第 21-64 行属性类型必填说明valuestr是用于唯一标识该段也是SegmentedButton.selected列表中的取值iconIconData \| Control与label二选一段内展示的图标通常是ft.Iconlabelstr \| Control与icon二选一段内展示的文本通常是ft.Texttooltipstr否悬停提示继承自Control的通用属性disabledbool否禁用该段继承自Control禁用后不可点击、不显示 tooltip校验规则源码通过__validation_rules__强制要求——icon与label至少有一个被设置且可见否则抛出ValueError提示at least icon or label must be set and visible。也就是说一个空白的Segment是无法创建的。2.2 SegmentedButton —— 分段按钮容器SegmentedButton继承自LayoutControl位于 segmented_button.py 第 67-190 行全部属性如下属性类型默认值说明segmentslist[Segment]—必填按钮包含的段列表必须至少包含 1 个可见段selectedlist[str][]当前选中段的value列表用户点击时会自动更新allow_empty_selectionboolFalse是否允许没有任何段被选中allow_multiple_selectionboolFalse是否允许多选同时选中多段selected_iconIconData \| ControlNone选中段的指示图标默认使用CHECK对勾图标show_selected_iconboolTrue是否在选中段上显示selected_iconstyleButtonStyleNone自定义按钮外观颜色、圆角、内边距、阴影等directionAxisAxis.HORIZONTAL段的排列方向横向 / 纵向paddingPaddingValueNone按钮尺寸与内边距设置后按钮扩展填充父容器空间on_change事件处理器None选中状态变化时触发事件data为选中段的 value 列表segments与selected之间有三条硬性校验在 Python 端和 Flutter 端双重生效selected为空时allow_empty_selection必须为Trueselected超过 1 项时allow_multiple_selection必须为Truesegments中必须至少有一个可见段。违反任何一条都会在 Python 端抛出ValueError同时在 Flutter 端渲染为错误占位控件见下文「底层实现」。三、完整示例单选择与多选择官方示例原文官方文档 SegmentedButton 示例页 引用的示例位于 single_multiple_selection/main.py一次演示了「多选 允许空选」和「单选」两种模式完整代码如下可直接运行import flet as ft def main(page: ft.Page): def handle_selection_change(e: ft.Event[ft.SegmentedButton]): print(e) page.add( ft.SafeArea( contentft.Column( controls[ # —— 模式一允许多选、允许清空 —— ft.SegmentedButton( on_changehandle_selection_change, selected_iconft.Icon(ft.Icons.CHECK_SHARP), selected[1, 4], allow_empty_selectionTrue, allow_multiple_selectionTrue, segments[ ft.Segment( value1, labelft.Text(One), iconft.Icon(ft.Icons.LOOKS_ONE), ), ft.Segment( value2, labelft.Text(Two), iconft.Icon(ft.Icons.LOOKS_TWO), ), ft.Segment( value3, labelft.Text(Three), iconft.Icon(ft.Icons.LOOKS_3), ), ft.Segment( value4, labelft.Text(Four), iconft.Icon(ft.Icons.LOOKS_4), ), ], ), # —— 模式二仅单选 —— ft.SegmentedButton( on_changehandle_selection_change, selected_iconft.Icon(ft.Icons.CHECK_SHARP), selected[2], allow_multiple_selectionFalse, segments[ ft.Segment( value1, labelft.Text(One), iconft.Icon(ft.Icons.LOOKS_ONE), ), ft.Segment( value2, labelft.Text(Two), iconft.Icon(ft.Icons.LOOKS_TWO), ), ft.Segment( value3, labelft.Text(Three), iconft.Icon(ft.Icons.LOOKS_3), ), ft.Segment( value4, labelft.Text(Four), iconft.Icon(ft.Icons.LOOKS_4), ), ], ), ] ) ) ) if __name__ __main__: ft.run(main)运行后页面上会出现两个 SegmentedButton第一个初始选中1与4两段支持继续点选/取消任意段、也可全部取消第二个初始选中2点击其他段会替换当前选中且无法取消唯一选中的段。每次点击都会触发handle_selection_change并把事件打印到控制台。示例工程还带有 pyproject.toml可以直接用flet run运行该示例目录。四、单选与多选行为深度解读allow_multiple_selection与allow_empty_selection两个布尔值组合出四种典型行为语义在源码 docstring 中定义得非常明确allow_multiple_selectionallow_empty_selection行为False默认False默认严格单选始终有且只有一段被选中点击唯一选中段不会取消它也不会触发on_changeFalseTrue单选但允许全部取消选中为空后不触发报错TrueFalse多选但至少保留一段被选中TrueTrue多选且允许全空示例代码中的模式一多选细节对应 segmented_button.py 第 105-119 行多选开启后新选中一段不会取消其他已选段而是叠加选中再次点击已选中的段会将其取消选中toggle 行为。空选细节对应 segmented_button.py 第 89-103 行默认Falseselected不能为空若构造时传入空列表会触发校验错误True允许无选中状态selected可以为空列表。需要特别注意的是selected是与用户交互实时同步的当用户在界面上点选时Flet 客户端会把最新的选中列表回写为SegmentedButton.selected因此你可以在任意时刻读取该属性获取当前选中值也可以在程序中直接修改selected属性来编程式地改变选中状态。五、选中指示selected_icon 与 show_selected_icon为了直观标出当前选中段Flet 在选中段的最左侧横向排列时渲染一个指示图标show_selected_iconTrue默认时显示选中图标selected_icon未指定时默认使用CHECK对勾图标指定了selected_icon时会替代该段的icon显示在label之前。官方示例将其设为ft.Icon(ft.Icons.CHECK_SHARP)与默认对勾风格接近但更锐利。你也可以传入任意IconData或Control例如ft.Icons.RADIO_BUTTON_CHECKED、ft.Icons.STAR等用于表达不同的「已选中」语义若希望完全不显示选中图标把show_selected_icon设为False即可。六、外观与布局定制6.1 style —— ButtonStyle 外观定制SegmentedButton.style接受flet.ButtonStyle可控制选中/悬停/按下等状态的颜色、内边距、形状、阴影与边框。Flutter 端在解析样式时使用了一组默认值见 segmented_button.dart 第 36-47 行前景色foreground主题colorScheme.primary背景色colorScheme.surface覆盖色overlay主色 8% 透明阴影色 / 表面着色colorScheme.shadow/colorScheme.surfaceTint默认elevation1、水平内边距8形状Material 3 下为StadiumBorder胶囊形Material 2 下为圆角 4 的RoundedRectangleBorder。这意味着不传style时SegmentedButton 会自动贴合当前主题的 Material 版本与配色方案。6.2 direction —— 排列方向direction取值为flet.Axis.HORIZONTAL默认或flet.Axis.VERTICAL。纵向排列适合侧边栏选项列表、移动端筛选抽屉等空间较窄的场景。6.3 padding —— 撑满父容器padding为None默认时按钮采用内容自适应尺寸一旦指定PaddingValue如ft.padding.all(8)按钮会扩展填充父容器的剩余空间并在此尺寸内按内边距排布各段。该参数对应 Flutter 端的expandedInsets非常适合需要按钮铺满一行的布局需求。七、事件处理on_changeon_change在用户切换选中状态时触发事件参数e的类型为ft.Event[ft.SegmentedButton]其中e.control触发事件的SegmentedButton实例e.data当前选中段的 value 字符串列表如[1, 4]可直接用于业务逻辑。典型的筛选器写法如下def on_filter_change(e: ft.Event[ft.SegmentedButton]): selected_values e.data # 例如 [wifi, bluetooth] # 更新列表、重新请求数据等 page.run_task(refresh_list, selected_values)注意当处于严格单选模式allow_multiple_selectionFalse, allow_empty_selectionFalse时点击唯一已选中的段不会取消它因而不会触发on_change——这是源码中明确规定的行为避免无意义的空回调。八、底层实现从 Python 属性到 Flutter 控件8.1 事件回传链路Flutter 端在 segmented_button.dart 第 25-30 行 的onChange回调中完成两件事void onChange(SetString selection) { var s selection.toList(); widget.control.updateProperties({selected: s}, notify: true); widget.control.triggerEvent(change, s); }即先把新的选中集合回写为控件的selected属性保持 Python 端与 UI 状态一致再通过triggerEvent(change, s)把事件与选中列表派发回 Python 侧触发on_change。这正是 Flet「Python 属性即状态源」架构的体现——你读到的selected永远是客户端的最新真实状态。8.2 四道防线校验逻辑的 Flutter 侧实现Python 端的__validation_rules__只是静态校验Flutter 端在构建时还会做运行时兜底segmented_button.dart 第 59-79 行四道防线分别为segments为空 → 渲染错误控件SegmentedButton.segments must be contain at least one visible segmentselected为空且allow_empty_selectionFalse→ 渲染错误控件非多选模式且selected数量不等于 1且不允许空选→ 渲染错误控件多选模式下selected数量超过可见段数量 → 渲染错误控件。这些与 Python 端校验一一对应确保任何非法组合都会被拦截而不是产生不可预期的 UI。8.3 控件映射SegmentedButtonControl最终把 Python 端的数据结构映射为 Flutter 的 Material 控件segmented_button.dart 第 81-101 行SegmentedButton→ FlutterSegmentedButtonString每个Segment→ FlutterButtonSegment其中icon通过buildIconOrWidget(icon)解析、label通过buildTextOrWidget(label)解析direction通过getAxis(direction, Axis.horizontal)解析padding通过getPadding(padding)映射到expandedInsets控件被禁用disabledTrue时onSelectionChanged置空整组不可交互。九、全局主题SegmentedButtonTheme若希望应用内所有 SegmentedButton 统一风格可在ft.Theme中设置segmented_button_theme定义于 theme.py 第 3129-3143 行它支持两个覆盖项字段说明selected_icon覆盖所有 SegmentedButton 默认的selected_iconstyle覆盖所有 SegmentedButton 默认的style用法示例import flet as ft ft.run( ft.app( main, themeft.Theme( segmented_button_themeft.SegmentedButtonTheme( selected_iconft.Icons.CHECK_CIRCLE, styleft.ButtonStyle(shapeft.StadiumBorder()), ) ), ) )控件实例上显式设置的style/selected_icon优先级高于主题默认值。十、实践建议与注意事项value 要全局唯一selected依赖Segment.value字符串进行匹配重复 value 会导致选中状态歧义icon 与 label 至少其一空段会直接触发 ValueError如需纯图标段请保证icon可见初始选中务必符合模式约束单选模式传多值、非空选模式传空列表都会在校验阶段报错示例中模式一初始selected[1, 4]正是因为开启了多选响应式布局在ft.Row中配合expand或设置padding可让分段按钮铺满容器宽度在移动端窄屏上效果更佳与 Cupertino 风格对照Flet 还提供 iOS 风格的 cupertino_sliding_segmented_button.py 与 cupertino_segmented_button.py跨平台统一外观时可按平台选用。SegmentedButton 是 Flet 中「零前端经验也能用」的典型控件所有状态都由 Python 属性驱动事件自动回传底层则完整复用 Flutter 成熟的 Material 组件与校验逻辑。结合本文的示例与源码解析你可以直接把它应用到筛选器、设置项和视图切换等界面中。赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐Flet RadioGroup 单选组控件完全指南API 详解、事件处理与底层实现Flet RadioGroup 单选组控件完全指南API 详解、事件处理与底层实现 RadioGroup 是 Flet 中用于实现从多个选项中单选一个的容前端跨平台桌面应用移动开发Flet Segment 控件详解使用 Segment 构建 SegmentedButton 分段按钮Flet Segment 控件详解使用 Segment 构建 SegmentedButton 分段按钮 flet.Segment 是 Flet 中分段按钮 S前端跨平台桌面应用移动开发Flet Radio 单选按钮控件指南分组、事件处理与样式定制Flet Radio 单选按钮控件指南分组、事件处理与样式定制 Radio 单选按钮是 Flet 中用于从多个互斥选项中选取一个的核心 Material前端跨平台桌面应用移动开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Flet SegmentedButton 控件完全指南：单选/多选分段按钮的配置、事件与底层实现
前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载SegmentedButton分段按钮是 Flet 中用于在一组互斥或可多选的选项中快速切换的 Material 控件适合筛选器、视图切换、选项分组等场景。本文以 SegmentedButton 官方文档 为核心骨架结合 Python SDK 源码与 Flutter 端实现完整讲解Segment/SegmentedButton的全部参数、单选多选行为、事件回调与主题定制让你能直接照抄示例并理解其底层工作原理。一、SegmentedButton 是什么flet.SegmentedButton是 Material Design 的 SegmentedButton 组件在 Flet 中的封装它把一组「段Segment」横向或纵向排列在一个胶囊形或圆角矩形按钮容器中。每一段都带有图标 文本标签用户可以点选其中一段或多段当前选中状态通过高亮背景与选中图标直观呈现。在 Flet 中它常用于单选项组如排序方式时间/热度/价格多选项组如多条件筛选Wi-Fi / 蓝牙 / 流量视图切换列表 / 网格 / 看板表单中的枚举字段选择。类定义位于 segmented_button.py包含两个公开类Segment组成按钮的单个段与SegmentedButton容器控件。二、核心 APISegment 与 SegmentedButton2.1 Segment —— 单个分段Segment继承自Control代表按钮中的一段声明于 segmented_button.py 第 21-64 行属性类型必填说明valuestr是用于唯一标识该段也是SegmentedButton.selected列表中的取值iconIconData \| Control与label二选一段内展示的图标通常是ft.Iconlabelstr \| Control与icon二选一段内展示的文本通常是ft.Texttooltipstr否悬停提示继承自Control的通用属性disabledbool否禁用该段继承自Control禁用后不可点击、不显示 tooltip校验规则源码通过__validation_rules__强制要求——icon与label至少有一个被设置且可见否则抛出ValueError提示at least icon or label must be set and visible。也就是说一个空白的Segment是无法创建的。2.2 SegmentedButton —— 分段按钮容器SegmentedButton继承自LayoutControl位于 segmented_button.py 第 67-190 行全部属性如下属性类型默认值说明segmentslist[Segment]—必填按钮包含的段列表必须至少包含 1 个可见段selectedlist[str][]当前选中段的value列表用户点击时会自动更新allow_empty_selectionboolFalse是否允许没有任何段被选中allow_multiple_selectionboolFalse是否允许多选同时选中多段selected_iconIconData \| ControlNone选中段的指示图标默认使用CHECK对勾图标show_selected_iconboolTrue是否在选中段上显示selected_iconstyleButtonStyleNone自定义按钮外观颜色、圆角、内边距、阴影等directionAxisAxis.HORIZONTAL段的排列方向横向 / 纵向paddingPaddingValueNone按钮尺寸与内边距设置后按钮扩展填充父容器空间on_change事件处理器None选中状态变化时触发事件data为选中段的 value 列表segments与selected之间有三条硬性校验在 Python 端和 Flutter 端双重生效selected为空时allow_empty_selection必须为Trueselected超过 1 项时allow_multiple_selection必须为Truesegments中必须至少有一个可见段。违反任何一条都会在 Python 端抛出ValueError同时在 Flutter 端渲染为错误占位控件见下文「底层实现」。三、完整示例单选择与多选择官方示例原文官方文档 SegmentedButton 示例页 引用的示例位于 single_multiple_selection/main.py一次演示了「多选 允许空选」和「单选」两种模式完整代码如下可直接运行import flet as ft def main(page: ft.Page): def handle_selection_change(e: ft.Event[ft.SegmentedButton]): print(e) page.add( ft.SafeArea( contentft.Column( controls[ # —— 模式一允许多选、允许清空 —— ft.SegmentedButton( on_changehandle_selection_change, selected_iconft.Icon(ft.Icons.CHECK_SHARP), selected[1, 4], allow_empty_selectionTrue, allow_multiple_selectionTrue, segments[ ft.Segment( value1, labelft.Text(One), iconft.Icon(ft.Icons.LOOKS_ONE), ), ft.Segment( value2, labelft.Text(Two), iconft.Icon(ft.Icons.LOOKS_TWO), ), ft.Segment( value3, labelft.Text(Three), iconft.Icon(ft.Icons.LOOKS_3), ), ft.Segment( value4, labelft.Text(Four), iconft.Icon(ft.Icons.LOOKS_4), ), ], ), # —— 模式二仅单选 —— ft.SegmentedButton( on_changehandle_selection_change, selected_iconft.Icon(ft.Icons.CHECK_SHARP), selected[2], allow_multiple_selectionFalse, segments[ ft.Segment( value1, labelft.Text(One), iconft.Icon(ft.Icons.LOOKS_ONE), ), ft.Segment( value2, labelft.Text(Two), iconft.Icon(ft.Icons.LOOKS_TWO), ), ft.Segment( value3, labelft.Text(Three), iconft.Icon(ft.Icons.LOOKS_3), ), ft.Segment( value4, labelft.Text(Four), iconft.Icon(ft.Icons.LOOKS_4), ), ], ), ] ) ) ) if __name__ __main__: ft.run(main)运行后页面上会出现两个 SegmentedButton第一个初始选中1与4两段支持继续点选/取消任意段、也可全部取消第二个初始选中2点击其他段会替换当前选中且无法取消唯一选中的段。每次点击都会触发handle_selection_change并把事件打印到控制台。示例工程还带有 pyproject.toml可以直接用flet run运行该示例目录。四、单选与多选行为深度解读allow_multiple_selection与allow_empty_selection两个布尔值组合出四种典型行为语义在源码 docstring 中定义得非常明确allow_multiple_selectionallow_empty_selection行为False默认False默认严格单选始终有且只有一段被选中点击唯一选中段不会取消它也不会触发on_changeFalseTrue单选但允许全部取消选中为空后不触发报错TrueFalse多选但至少保留一段被选中TrueTrue多选且允许全空示例代码中的模式一多选细节对应 segmented_button.py 第 105-119 行多选开启后新选中一段不会取消其他已选段而是叠加选中再次点击已选中的段会将其取消选中toggle 行为。空选细节对应 segmented_button.py 第 89-103 行默认Falseselected不能为空若构造时传入空列表会触发校验错误True允许无选中状态selected可以为空列表。需要特别注意的是selected是与用户交互实时同步的当用户在界面上点选时Flet 客户端会把最新的选中列表回写为SegmentedButton.selected因此你可以在任意时刻读取该属性获取当前选中值也可以在程序中直接修改selected属性来编程式地改变选中状态。五、选中指示selected_icon 与 show_selected_icon为了直观标出当前选中段Flet 在选中段的最左侧横向排列时渲染一个指示图标show_selected_iconTrue默认时显示选中图标selected_icon未指定时默认使用CHECK对勾图标指定了selected_icon时会替代该段的icon显示在label之前。官方示例将其设为ft.Icon(ft.Icons.CHECK_SHARP)与默认对勾风格接近但更锐利。你也可以传入任意IconData或Control例如ft.Icons.RADIO_BUTTON_CHECKED、ft.Icons.STAR等用于表达不同的「已选中」语义若希望完全不显示选中图标把show_selected_icon设为False即可。六、外观与布局定制6.1 style —— ButtonStyle 外观定制SegmentedButton.style接受flet.ButtonStyle可控制选中/悬停/按下等状态的颜色、内边距、形状、阴影与边框。Flutter 端在解析样式时使用了一组默认值见 segmented_button.dart 第 36-47 行前景色foreground主题colorScheme.primary背景色colorScheme.surface覆盖色overlay主色 8% 透明阴影色 / 表面着色colorScheme.shadow/colorScheme.surfaceTint默认elevation1、水平内边距8形状Material 3 下为StadiumBorder胶囊形Material 2 下为圆角 4 的RoundedRectangleBorder。这意味着不传style时SegmentedButton 会自动贴合当前主题的 Material 版本与配色方案。6.2 direction —— 排列方向direction取值为flet.Axis.HORIZONTAL默认或flet.Axis.VERTICAL。纵向排列适合侧边栏选项列表、移动端筛选抽屉等空间较窄的场景。6.3 padding —— 撑满父容器padding为None默认时按钮采用内容自适应尺寸一旦指定PaddingValue如ft.padding.all(8)按钮会扩展填充父容器的剩余空间并在此尺寸内按内边距排布各段。该参数对应 Flutter 端的expandedInsets非常适合需要按钮铺满一行的布局需求。七、事件处理on_changeon_change在用户切换选中状态时触发事件参数e的类型为ft.Event[ft.SegmentedButton]其中e.control触发事件的SegmentedButton实例e.data当前选中段的 value 字符串列表如[1, 4]可直接用于业务逻辑。典型的筛选器写法如下def on_filter_change(e: ft.Event[ft.SegmentedButton]): selected_values e.data # 例如 [wifi, bluetooth] # 更新列表、重新请求数据等 page.run_task(refresh_list, selected_values)注意当处于严格单选模式allow_multiple_selectionFalse, allow_empty_selectionFalse时点击唯一已选中的段不会取消它因而不会触发on_change——这是源码中明确规定的行为避免无意义的空回调。八、底层实现从 Python 属性到 Flutter 控件8.1 事件回传链路Flutter 端在 segmented_button.dart 第 25-30 行 的onChange回调中完成两件事void onChange(SetString selection) { var s selection.toList(); widget.control.updateProperties({selected: s}, notify: true); widget.control.triggerEvent(change, s); }即先把新的选中集合回写为控件的selected属性保持 Python 端与 UI 状态一致再通过triggerEvent(change, s)把事件与选中列表派发回 Python 侧触发on_change。这正是 Flet「Python 属性即状态源」架构的体现——你读到的selected永远是客户端的最新真实状态。8.2 四道防线校验逻辑的 Flutter 侧实现Python 端的__validation_rules__只是静态校验Flutter 端在构建时还会做运行时兜底segmented_button.dart 第 59-79 行四道防线分别为segments为空 → 渲染错误控件SegmentedButton.segments must be contain at least one visible segmentselected为空且allow_empty_selectionFalse→ 渲染错误控件非多选模式且selected数量不等于 1且不允许空选→ 渲染错误控件多选模式下selected数量超过可见段数量 → 渲染错误控件。这些与 Python 端校验一一对应确保任何非法组合都会被拦截而不是产生不可预期的 UI。8.3 控件映射SegmentedButtonControl最终把 Python 端的数据结构映射为 Flutter 的 Material 控件segmented_button.dart 第 81-101 行SegmentedButton→ FlutterSegmentedButtonString每个Segment→ FlutterButtonSegment其中icon通过buildIconOrWidget(icon)解析、label通过buildTextOrWidget(label)解析direction通过getAxis(direction, Axis.horizontal)解析padding通过getPadding(padding)映射到expandedInsets控件被禁用disabledTrue时onSelectionChanged置空整组不可交互。九、全局主题SegmentedButtonTheme若希望应用内所有 SegmentedButton 统一风格可在ft.Theme中设置segmented_button_theme定义于 theme.py 第 3129-3143 行它支持两个覆盖项字段说明selected_icon覆盖所有 SegmentedButton 默认的selected_iconstyle覆盖所有 SegmentedButton 默认的style用法示例import flet as ft ft.run( ft.app( main, themeft.Theme( segmented_button_themeft.SegmentedButtonTheme( selected_iconft.Icons.CHECK_CIRCLE, styleft.ButtonStyle(shapeft.StadiumBorder()), ) ), ) )控件实例上显式设置的style/selected_icon优先级高于主题默认值。十、实践建议与注意事项value 要全局唯一selected依赖Segment.value字符串进行匹配重复 value 会导致选中状态歧义icon 与 label 至少其一空段会直接触发 ValueError如需纯图标段请保证icon可见初始选中务必符合模式约束单选模式传多值、非空选模式传空列表都会在校验阶段报错示例中模式一初始selected[1, 4]正是因为开启了多选响应式布局在ft.Row中配合expand或设置padding可让分段按钮铺满容器宽度在移动端窄屏上效果更佳与 Cupertino 风格对照Flet 还提供 iOS 风格的 cupertino_sliding_segmented_button.py 与 cupertino_segmented_button.py跨平台统一外观时可按平台选用。SegmentedButton 是 Flet 中「零前端经验也能用」的典型控件所有状态都由 Python 属性驱动事件自动回传底层则完整复用 Flutter 成熟的 Material 组件与校验逻辑。结合本文的示例与源码解析你可以直接把它应用到筛选器、设置项和视图切换等界面中。赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐Flet RadioGroup 单选组控件完全指南API 详解、事件处理与底层实现Flet RadioGroup 单选组控件完全指南API 详解、事件处理与底层实现 RadioGroup 是 Flet 中用于实现从多个选项中单选一个的容前端跨平台桌面应用移动开发Flet Segment 控件详解使用 Segment 构建 SegmentedButton 分段按钮Flet Segment 控件详解使用 Segment 构建 SegmentedButton 分段按钮 flet.Segment 是 Flet 中分段按钮 S前端跨平台桌面应用移动开发Flet Radio 单选按钮控件指南分组、事件处理与样式定制Flet Radio 单选按钮控件指南分组、事件处理与样式定制 Radio 单选按钮是 Flet 中用于从多个互斥选项中选取一个的核心 Material前端跨平台桌面应用移动开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考