Flutter中如何从自定义FilterPanel组件获取选中值？

步骤1：将FilterScreen改为StatefulWidget #

由于需要维护并更新选中状态来刷新UI，原StatelessWidget无法满足需求，需改为StatefulWidget：

class FilterScreen extends StatefulWidget {
  const FilterScreen({Key? key}) : super(key: key);

  @override
  State<FilterScreen> createState() => _FilterScreenState();
}

class _FilterScreenState extends State<FilterScreen> {
  List<String> games = ['Football', 'Cricket', 'Chess'];
  String selectedGame = 'Football';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Favourite Game : $selectedGame'),
          FilterPanel(
            list: games,
            // 接收子组件返回的选中值并更新状态
            onSelected: (String game) {
              setState(() {
                selectedGame = game;
              });
            },
            // 传递初始选中值，保证组件初始化状态一致
            initialSelected: selectedGame,
          )
        ],
      ),
    );
  }
}

步骤2：修改FilterPanel，添加回调机制 #

给FilterPanel新增回调参数，用于选中项变化时通知父组件，同时支持接收初始选中值来初始化内部状态：

import 'package:flutter/material.dart';

import 'customchip.dart';

class FilterPanel extends StatefulWidget {
  final List<String> list;
  // 定义回调函数，用于向父组件传递选中的字符串
  final ValueChanged<String> onSelected;
  // 可选参数：初始选中值
  final String? initialSelected;

  FilterPanel({
    Key? key,
    required this.list,
    required this.onSelected,
    this.initialSelected,
  }) : super(key: key);

  @override
  State<FilterPanel> createState() => _FilterPanelState();
}

class _FilterPanelState extends State<FilterPanel> {
  late int selectedIndex;

  @override
  void initState() {
    super.initState();
    // 根据初始选中值设置初始索引，无初始值则默认选中第一个
    selectedIndex = widget.initialSelected != null
        ? widget.list.indexOf(widget.initialSelected!)
        : 0;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.grey, borderRadius: BorderRadius.circular(9)),
      height: 30,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List<Widget>.generate(
          widget.list.length,
          (index) => GestureDetector(
            onTap: () {
              setState(() {
                selectedIndex = index;
              });
              // 触发回调，将选中的字符串传递给父组件
              widget.onSelected(widget.list[index]);
            },
            child: CustomChip(
              title: widget.list[index],
              isSelected: index == selectedIndex,
            ),
          ),
        ),
      ),
    );
  }
}

核心说明 #

• 采用子组件回调的方式实现父子组件通信，这是Flutter中无弹窗场景下组件数据传递的常用方案，无需依赖全局状态管理。
• 父组件通过setState更新选中状态，触发UI刷新，实现Text内容与FilterPanel选中项同步。
• 新增initialSelected参数确保FilterPanel初始化时的选中状态与父组件一致，避免状态不一致问题。

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