Flutter 条码扫描结果未列出

Question

我的应用程序是搜索书籍列表。搜索时可以使用两个不同的变量（书名或条形码）。按名称搜索时没有问题。但使用条码扫描搜索时，没有列出任何结果。当我手动输入条形码时，应用程序仍然可以正常工作。

你能帮帮我吗？

手动输入条码：https://i.stack.imgur.com/njtLA.png

条码扫描结果：https://i.stack.imgur.com/ZsGot.png

我的代码在这里..

import 'package:fff/book_tile.dart';
import 'package:flutter/material.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:fff/book_model.dart';

class HomePage extends StatefulWidget {

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

class _HomePageState extends State<HomePage> {
  TextEditingController _controller = new TextEditingController();
  List<Book> _booksForDisplay = [];
  List<Book> _books = [];


  @override
  void initState() {
    super.initState();
    fetchBooks().then((value) {
      setState(() {
        _books.addAll(value);
        _booksForDisplay = _books;
        print(_booksForDisplay.length);
      });
    });
  }


  Future _scan(BuildContext context) async {
    String barcode = await FlutterBarcodeScanner.scanBarcode(
        '#ff0000',
        'İptal',
        true,
        ScanMode.BARCODE
    );
    _controller.text = barcode;
  }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            toolbarHeight: 80,
            title: Padding(
              padding: EdgeInsets.all(8),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(40)
                ),
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                  child: TextFormField(
                    textAlignVertical: TextAlignVertical.center,
                    controller: _controller,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        icon: Icon(Icons.search),
                        suffixIcon: IconButton(
                          icon: Icon(FontAwesomeIcons.barcode),
                          onPressed: (){
                            _scan(context);
                          },
                        )
                    ),
                    onChanged: (string){
                      string = string.toLowerCase();
                      setState(() {
                        _booksForDisplay = _books.where((b){
                          var bName = b.name!.toLowerCase();
                          var bBarcode = b.barcode!.toLowerCase();
                          return bName.startsWith(string) || bBarcode.startsWith(string);
                        }).toList();
                      });
                    },
                  ),
                ),
              ),
            ),
          ),
          body: SafeArea(
            child: Container(
                child: _controller.text.isNotEmpty ? new ListView.builder(
                  itemCount: _booksForDisplay.length,
                  itemBuilder: (context, index){
                    return BookTile(book: this._booksForDisplay[index]);
                  },
                )
                    :
                Center(
                  child: Text('Searching..'),
                )
            ),
          )
      );
    }
  }

Answer 1

我认为你的 TextEditingController 只需要一个监听器。你应该在那个监听器中编写你的 onChanged 方法。

  @override
  void initState() {
    super.initState();

    fetchBooks().then((value) {
      setState(() {
        _books.addAll(value);
        _booksForDisplay = _books;
        print(_booksForDisplay.length);
      });
    });

    _controller.addListener(() {
       print(_controller.text);

       var string = _controller.text.toLowerCase();
       setState(() {
            _booksForDisplay = _books.where((b){
                var bName = b.name!.toLowerCase();
                var bBarcode = b.barcode!.toLowerCase();
                return bName.startsWith(string) || 
                       bBarcode.startsWith(string);
                }).toList();
          });                   
    });
  }