如何使用Flutter实现三选项选择UI及选中后下方容器联动效果

不需要找特殊第三方Widget，用Flutter自带的基础组件组合就能完全实现你要的交互：

• 首先维护选中状态：在对应页面的State类中定义整型变量记录当前选中项，比如int selectedIndex = 0;，默认选中第一个选项即可。
• 顶部三选一单选栏实现：
  快速实现可以直接用官方自带的SegmentedButton组件，天生支持互斥单选逻辑，支持自定义圆角、选中填充色、文字样式，能匹配绝大多数分段选择的UI需求，核心代码：

  SegmentedButton<int>(
    // 配置三个选项，可根据需求替换成带图标、自定义排版的内容
    segments: const [
      ButtonSegment(value: 0, label: Text("选项1")),
      ButtonSegment(value: 1, label: Text("选项2")),
      ButtonSegment(value: 2, label: Text("选项3")),
    ],
    selected: {selectedIndex},
    onSelectionChanged: (Set<int> newSelected) {
      setState(() {
        selectedIndex = newSelected.first;
      });
    },
    // 这里可以自定义样式，比如圆角、选中背景色、边框等
    style: ButtonStyle(
      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
    ),
  )
  

  如果需要更自由的样式定制（比如自定义选中态边框、图标位置、文字大小），直接用Row排布三个可点击组件（GestureDetector/TextButton/Container+点击事件都可以），点击时更新selectedIndex为对应选项的下标，自己判断下标渲染选中/未选中的UI样式即可，灵活度最高。
• 下方动态内容区域实现：
  最省心的实现方式是用官方自带的IndexedStack组件，把三个选项对应的内容容器按顺序放到children里，直接把selectedIndex传给IndexedStack的index参数，组件会自动根据选中下标展示对应内容，核心代码：

  IndexedStack(
    index: selectedIndex,
    children: const [
      // 三个组件顺序和顶部选项顺序一一对应即可
      FirstOptionContentContainer(),
      SecondOptionContentContainer(),
      ThirdOptionContentContainer(),
    ],
  )
  

用IndexedStack的优势是切换选项时不会销毁已渲染过的内容容器，用户在对应容器里输入的内容、滚动的位置都会被保留，不会出现切回来内容重置的问题。如果不需要保留状态，也可以直接用switch判断selectedIndex返回对应的内容组件，性能开销更低。

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