我正在尝试创建一个应用程序来显示搜索结果。我有以下极其简单的 StatefulWidget。它有一个状态变量 data，在构造函数中传递。

class Entry extends StatefulWidget {
  Entry({Key key, @required this.data}) : super(key: key);

  final String data;

  @override
  _EntryState createState() => _EntryState(data);
}

class _EntryState extends State<Entry> {
  _EntryState(this.data) : super();
  final String data;

  @override
  Widget build(BuildContext context) {
    return Text(data);
  }
}

为了生成随机长度(0-9 之间)的数据集，我使用了以下辅助函数，它基本上跟踪 DateTime 和传递给它的字符串:

List<String> render(String searchTerm) {
  final Random rng = new Random();
  final String date = DateTime.now().toString();
  return List<String>.generate(
    rng.nextInt(10),
    (int i) => '$searchTerm $i $date',
  );
}

最后，我的主要小部件就是这样。它使用状态变量 _items 来跟踪 Entry 的列表。人们可以通过搜索栏进行新的查询，这可能会返回一个随机长度的数据集。然后通过 ListView 显示列表。

class MyWidget extends StatefulWidget {
  MyWidget({Key key}) : super(key: key);

  final String title = "Demo";

  @override
  _State createState() => _State();
}

class _State extends State<MyWidget> {
  List<String> _items = [];

  Future<Null> getData(String searchTerm) async {
    final entriesToAdd = render(searchTerm);
    setState(() {
      _items = entriesToAdd;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: TextField(
            onSubmitted: getData,
            decoration:
                InputDecoration(hintText: 'Search', icon: Icon(Icons.search)),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                  child: ListView.builder(
                      itemCount: _items.length,
                      itemBuilder: (context, index) {
                        return Container(
                            padding: EdgeInsets.all(8.0), child: Entry(data: _items[index]));
                      })),
            ],
          ),
        ));
  }
}

所以我的问题是，当我通过按钮进行搜索时(即调用 getData)，显示的列表将用新查询的结果更新，完全覆盖旧的那些。这不是发生的事情。显示的列表是正确的长度，但项目通常是各种以前/当前搜索的混合，如下面的屏幕截图，它显示了 2 个搜索的混合。但是，当在 ListView 的 itemBuilder 函数中执行打印语句时，_item 变量似乎正在正确更新，无论如何都不应该实际上是 2 个不同搜索结果的混合。是什么导致了这种行为？

完整代码如下:

import 'dart:async';
import 'dart:math';

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

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

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => MyWidget(),
      },
    );
  }
}

class MyWidget extends StatefulWidget {
  MyWidget({Key key}) : super(key: key);

  final String title = "Demo";

  @override
  _State createState() => _State();
}

class _State extends State<MyWidget> {
  List<String> _items = [];

  Future<Null> getData(String searchTerm) async {
    final entriesToAdd = render(searchTerm);
    setState(() {
      _items = entriesToAdd;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: TextField(
            onSubmitted: getData,
            decoration:
                InputDecoration(hintText: 'Search', icon: Icon(Icons.search)),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                  child: ListView.builder(
                      itemCount: _items.length,
                      itemBuilder: (context, index) {
                        return Container(
                            padding: EdgeInsets.all(8.0), child: Entry(data: _items[index]));
                      })),
            ],
          ),
        ));
  }
}

class Entry extends StatefulWidget {
  Entry({Key key, @required this.data}) : super(key: key);

  final String data;

  @override
  _EntryState createState() => _EntryState(data);
}

class _EntryState extends State<Entry> {
  _EntryState(this.data) : super();
  final String data;

  @override
  Widget build(BuildContext context) {
    return Text(data);
  }
}


List<String> render(String searchTerm) {
  final Random rng = new Random();
  final String date = DateTime.now().toString();
  return List<String>.generate(
    rng.nextInt(10),
    (int i) => '$searchTerm $i $date',
  );
}

最佳答案

不要缓存小部件!您应该在每次调用 build 时重新构建它们。 (如果您担心这样做效率低下，请不要担心。这就是 Flutter 的设计和优化方式以支持这一点。)只需保留字符串列表并每次都重新构建文本。

避免只有静态函数的类。这些可以替换为顶级函数。

试试这个:

import 'dart:math';

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => const MyWidget(),
      },
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key key}) : super(key: key);

  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  List<String> _items = <String>[];

  void getData(String searchTerm) {
    final List<String> newEntries = helper(searchTerm);
    setState(() {
      _items = newEntries;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(
          onSubmitted: getData,
          decoration: const InputDecoration(
            hintText: 'Search',
            icon: Icon(Icons.search),
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (BuildContext context, int index) => Container(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(_items[index]),
                    ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

List<String> helper(String searchTerm) {
  final Random rng = new Random();
  final String date = DateTime.now().toString();
  return List<String>.generate(
    rng.nextInt(10),
    (int i) => '$searchTerm $i $date',
  );
}

这是一个说明使用 StatefulWidget 的版本:

class MyWidget extends StatefulWidget {
  const MyWidget({Key key}) : super(key: key);

  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  List<String> _items = <String>[];

  void getData(String searchTerm) {
    final List<String> newEntries = helper(searchTerm);
    setState(() {
      _items = newEntries;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(
          onSubmitted: getData,
          decoration: const InputDecoration(
            hintText: 'Search',
            icon: Icon(Icons.search),
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (BuildContext context, int index) => Container(
                      padding: const EdgeInsets.all(8.0),
                      child: Entry(data: _items[index]),
                    ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Entry extends StatefulWidget {
  const Entry({Key key, @required this.data}) : super(key: key);

  final String data;

  @override
  _EntryState createState() => _EntryState();
}

class _EntryState extends State<Entry> {
  bool bold = true;

  @override
  Widget build(BuildContext context) => GestureDetector(
        onTap: () {
          setState(() {
            bold = !bold;
          });
        },
        child: Text(
          widget.data,
          style: TextStyle(
            fontWeight: bold ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      );
}

关于dart - 为什么更新 ListView 中使用的 List<StatefulWidget> 无法更新显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52847022/