Question

我是Flutter的新手，我在关注以下有关文本字段的官方示例：https://flutter.dev/docs/cookbook/forms/text-field-changes

在文本字段小部件的控制器中有一个监听示例的示例。请注意这段代码_MyCustomFormState

final myController = TextEditingController();

@override
void initState() {
  super.initState();
  myController.addListener(_printLatestValue);
}

_printLatestValue() {
  print("Second text field: ${myController.text}");
}

如果我有两个字段和两个控制器，我想只有一个监听器，并根据称为该方法的控制器显示一些消息。我想做这样的事情：

final myController1 = TextEditingController();
final myController2 = TextEditingController();

@override
void initState() {
  super.initState();
  myController1.addListener(_printLatestValue('message1'));
  myController1.addListener(_printLatestValue('message2'));
}

_printLatestValue(message) {
  print("Second text field: ${myController.text + message}");
}

这是不可能的，因为方法addListener()使用了一些称为VoidCallback的方法，其中没有参数。至少这是我从Flutter文档中了解的。

那么，如果可能的话，我该如何实现自己的目标？

Answer 1

您几乎是正确的，但并非完全正确。您可以随意将任何参数传递给侦听器。但是，这些参数需要来自其他地方-TextEditingController不提供任何参数，也不希望有任何返回值。换句话说，签名应类似于：() => listener(...)。

因此，为回答您的问题，您可以随意执行以下操作来区分控制器：

  void initState() {
    super.initState();
    firstController.addListener(() => _printLatestValue('first'));
    secondController.addListener(() => _printLatestValue('second'));
  }

完整的示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text controllers',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final firstController = TextEditingController();
  final secondController = TextEditingController();


  void initState() {
    super.initState();
    firstController.addListener(() => _printLatestValue('first'));
    secondController.addListener(() => _printLatestValue('second'));
  }

  @override
  void dispose() {
    firstController.dispose();
    secondController.dispose();
    super.dispose();
  }

  _printLatestValue(message) {
    if (message == 'first') {
      print('Received form first controller: ${firstController.text}');
    } else {
      print('Received from second controller: ${secondController.text}');
    }
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Controllers', style: TextStyle(fontSize: 18)),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              TextField(controller: firstController,),
              TextField(controller: secondController,)
            ],
          ),
        ),
    );
  }
}

请注意，在这种情况下，侦听器将仅打印已更改的TextField中的文本。

如何在Flutter中将参数传递给侦听器？

1 个答案: