【Flutter】ValueChanged用法

ValueChanged是Flutter自带的回调Function方法，源码如下:

typedef ValueChanged<T> = void Function(T value);

ValueChanged用法：在子widget写ValueChanged，把数据回调给父widget的使用处。详细代码如下：

main.dart代码

import 'package:flutter/material.dart';
import 'package:value_changed/value_changed_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ValueChanged',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String content = "flutter 学习";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('ValueChanged'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              content,
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            ValueChangedWidget(onChanged: _onChanged)
          ],
        ),
      ),
    );
  }

  void _onChanged(String text) {
    setState(() {
      content = text;
    });
  }
}

value_changed_widget.dart 代码

import 'package:flutter/material.dart';
import 'package:value_changed/padding_extension.dart';

///ValueChangedWidget
class ValueChangedWidget extends StatelessWidget {
  final ValueChanged<String> onChanged;

  const ValueChangedWidget({super.key, required this.onChanged});

  get _listView => ListView.builder(
      padding: const EdgeInsets.only(left: 15, right: 15),
      itemCount: 20,
      itemBuilder: (_, index) => _itemWidget(index));

  _itemWidget(int index) {
    return InkWell(
      onTap: () => onChanged("item $index"),
      child: Column(
        children: [
          5.paddingHeight,
          Text(
            "item $index",
            style: const TextStyle(fontSize: 16),
          ),
          5.paddingHeight,
          const Divider(height: 0.5)
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(child: _listView);
  }
}

源码