Flutter中ValueSetter与ValueGetter是什么？求示例详解

ValueGetter：取值回调 #

ValueGetter<T> 是Flutter定义的函数类型别名，本质是无参数、返回值为T类型的函数。它的作用是封装一段取值逻辑，让你可以通过调用这个函数获取指定类型的值。

基础示例 #

// 定义一个获取当前时间的ValueGetter<DateTime>
ValueGetter<DateTime> getCurrentTime = () => DateTime.now();

void main() {
  DateTime now = getCurrentTime();
  print("当前时间: $now");
}

Flutter组件场景示例 #

在组件中传递取值逻辑，动态获取数据：

class DynamicText extends StatelessWidget {
  final ValueGetter<String> textGetter;

  const DynamicText({super.key, required this.textGetter});

  @override
  Widget build(BuildContext context) {
    return Text(textGetter()); // 调用getter获取最新文本
  }
}

// 使用时传入动态取值逻辑
DynamicText(
  textGetter: () => DateTime.now().toString(),
)

ValueSetter：设值回调 #

ValueSetter<T> 是接收单个T类型参数、无返回值的函数类型别名。它的核心作用是接收一个值并处理，常用于子组件向父组件传递数据、触发状态更新。

基础示例 #

// 定义一个接收整数并打印的ValueSetter<int>
ValueSetter<int> printNumber = (int num) {
  print("收到数字: $num");
};

void main() {
  printNumber(100); // 输出: 收到数字: 100
}

Flutter组件场景示例 #

子组件通过ValueSetter通知父组件更新状态：

class CounterButton extends StatelessWidget {
  final ValueSetter<int> onCountChanged;

  const CounterButton({super.key, required this.onCountChanged});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        onCountChanged(1); // 点击时传递增量给父组件
      },
      child: const Text("+1"),
    );
  }
}

// 父组件接收并更新状态
class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("计数: $_count"),
        const SizedBox(height: 16),
        CounterButton(
          onCountChanged: (increment) {
            setState(() {
              _count += increment; // 更新父组件计数
            });
          },
        ),
      ],
    );
  }
}

核心区别 #

• ValueGetter<T>：负责获取值 → 无参数，返回T类型结果
• ValueSetter<T>：负责接收并处理值 → 接收T类型参数，无返回值

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