如何使用 ChangeNotifier 收听 flutter 中的多个源？

Question

我有一个小部件，其文本需要根据在两个文本字段中输入的内容进行更新。在这种情况下（一般情况下）收听两个来源的正确方法是什么？

我刚写了两个classes:

class MyTextField extends StatelessWidget {
  const MyTextField({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (newData) => context.read<Data>().changeString(newData),
    );
  }
}

和MyTextField2一样。

HomePage 小部件：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('build HomePage');
    return Scaffold(
      appBar: AppBar(
        title: Container(child: Text(context.watch<Data>().getData),),
      ),
      body: Center(
        child: Column(
          children: [
            MyTextField(),
            MyTextField2(),
            Text(context.watch<Data>().getData),
          ],
        ),
      )
    );
  }
}

数据class：

class Data with ChangeNotifier
{
  String _data = 'some text';
  String get getData => _data;

  void changeString(String newString)
  {
    _data = newString;
    notifyListeners();
  }
}

HomePage 小部件正在监听两个来源，我说得对吗？ TextField同时修改会不会冲突？

Answer 1

您可以使用 MultiProvider(providers: [//your providers])

将 MaterialApp 包装在 main.dart 文件中

Answer 2

我测试了你的代码，它运行良好。这是主文件：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'Data.dart';
import 'MyTextField.dart';
import 'MyTextField2.dart';

void main() {
runApp(
  ChangeNotifierProvider<Data>(
    create: (_) => Data(),
    child: MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
 title: 'Flutter Demo',
 theme: ThemeData(
  primarySwatch: Colors.blue,
 ),
home: HomePage(),
  );
 }
}

class HomePage extends StatelessWidget {
@override
return Scaffold(
    appBar: AppBar(
      title: Container(child: Text(context.watch<Data>().getData),),
    ),
    body: Center(
      child: Column(
        children: [
          MyTextField(),
          MyTextField2(),
          Text(context.watch<Data>().getData),
        ],
      ),
    )
);
 }
}

这是结果：

如果您想合并这两个 TextField，您可以将数据 class 更改为：

import 'package:flutter/material.dart';

class Data with ChangeNotifier{
String _data1 = "";
String _data2 = "";
String get getData => _data1+_data2;

void changeString1(String newString){
    _data1 =newString;
    notifyListeners();
 }
void changeString2(String newString){
   _data2 =newString;
   notifyListeners();
 }
}

这是结果：

如何使用 ChangeNotifier 收听 flutter 中的多个源？

How to listen to multiple sources in flutter using a ChangeNotifier?

provider

flutter

changenotifier