flutter - 无法在颤动的平面按钮中使用 Provider 将数据添加到列表

Question

我在这个颤振代码中使用了提供程序 4.3.2，这是一个简单的颤动应用程序，它有一个文本字段、平面按钮和一个包含文本小部件的列表视图构建器。我创建了一个 ListData 类，它具有列表并使用提供程序显示在列表视图构建器中。这就是问题所在，我在 ListData 类中创建了一个 addData 方法。我使用此方法在平面按钮的 onPressed 方法中使用提供程序将数据添加到列表添加它是抛出错误，无法找到。这个问题的解决方案。这也是我的主要应用程序的简短形式

import 'dart:collection';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String data;
    return ChangeNotifierProvider(
      create: (context) => ListData(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("list"),
          ),
          body: Column(
            children: [
              TextField(
                onChanged: (value) => data = value,
              ),
              FlatButton(
                child: Text("Add"),
                color: Colors.blue,
                onPressed: () {
                  Provider.of<ListData>(context).addData(data);
                },
              ),
              Expanded(
                child: MyListView(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Text(Provider.of<ListData>(context).listData[index]);
      },
      itemCount: Provider.of<ListData>(context).listCount,
    );
  }
}

class ListData extends ChangeNotifier {
  List _listData = [
    'Hello',
    "hi",
  ];

  UnmodifiableListView get listData {
    return UnmodifiableListView(_listData);
  }

  int get listCount {
    return _listData.length;
  }

  void addData(String data) {
    _listData.add(data);
    notifyListeners();
  }
}

标签： flutterflutter-provider

Answer 1

您可以在下面复制粘贴运行完整代码
您需要Builder和listen: false
代码片段

Builder(builder: (BuildContext context) {
        return FlatButton(
          child: Text("Add"),
          color: Colors.blue,
          onPressed: () {
            Provider.of<ListData>(context, listen: false).addData(data);
          },
        );
      }),

工作演示

完整代码

import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String data;
    return ChangeNotifierProvider(
      create: (context) => ListData(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("list"),
          ),
          body: Column(
            children: [
              TextField(
                onChanged: (value) => data = value,
              ),
              Builder(builder: (BuildContext context) {
                return FlatButton(
                  child: Text("Add"),
                  color: Colors.blue,
                  onPressed: () {
                    Provider.of<ListData>(context, listen: false).addData(data);
                  },
                );
              }),
              Expanded(
                child: MyListView(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Text(Provider.of<ListData>(context).listData[index]);
      },
      itemCount: Provider.of<ListData>(context).listCount,
    );
  }
}

class ListData extends ChangeNotifier {
  List _listData = [
    'Hello',
    "hi",
  ];

  UnmodifiableListView get listData {
    return UnmodifiableListView(_listData);
  }

  int get listCount {
    return _listData.length;
  }

  void addData(String data) {
    _listData.add(data);
    notifyListeners();
  }
}