Flutter - 来自 SQLite 的 TextField 自动完成建议 [英] Flutter - TextField auto complete suggestions from SQLite

问题描述

我正在尝试创建一个自动完成TextField.当我使用下面的硬编码 List 时，这个正在工作.

I am trying to create an autocomplete TextField. This one is working when I used the below hardcoded List.

List<String> suggestions = [
    "Apple", 
    "Actual",
    "Actuary",
    "America",
    "Argentina",
  ];

但是当我过去从 SQLite 获取数据并过滤时，它不是过滤.不工作.SQLite 列表也获得与上述相同的格式.但它没有调用 itemFilter 部分.请帮忙.我是 Flutter 的新手.

But when I used to get data from SQLite and filter it's not filtering. Not working. The SQLite list also getting the same format as the above one. But it's not calling to itemFilter part. Please help. I am new to flutter.

static Future<List<String>> selectItems() async {
var db = await _openDB();
final usersData = await db.query("albums");
return usersData.map((Map<String, dynamic> row) {
  return row["albumname"] as String;
}).toList();}


  List<String> itemsList;

  void selectItems() async {
    itemsList =  await DBManager.selectItems();
  }

这是文本文件代码

  Container(
              width: _width * 2,
              height: 50,
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: AutoCompleteTextField(
                controller: txtAlbumSuggest,
                suggestions: itemsList,
                clearOnSubmit: false,
                style: TextStyle(color: Colors.black,fontSize: 15),
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20.5)
                    )
                ),
               itemFilter: (item,query){
               return item.toLowerCase().startsWith(query.toLowerCase());
               },
                itemSorter: (a,b){
                  return a.compareTo(b);
                },
                itemSubmitted: (item){
                  txtAlbumSuggest.text=item;
                },
                itemBuilder: (context,item){
                  return Container(
                      padding: EdgeInsets.all(20.0),
                    child: Row(
                      children: <Widget>[
                        Text(
                          item,
                          style: TextStyle(color: Colors.black),
                        )
                      ],
                    ),

                  );

                },
              ), 
            ),

推荐答案

假设这段代码在你的 DBManager 类中:

Assuming that this code is within your DBManager class:

static Future<List<String>> selectItems() async {
 var db = await _openDB();
 final usersData = await db.query("albums");
 return usersData.map((Map<String, dynamic> row) {
   return row["albumname"] as String;
 }).toList();
}

你应该使用 setState() 来更新你的 Widget 类的状态:

You should use setState() to update the state of your Widget class:

  List<String> _itemsList;

  void _loadItems() async {
    setState(() => _itemsList =  await DBManager.selectItems());
  }

否则，您的 Container 将不会收到数据异步更新的通知.

Otherwise, your Container won't get notified of the asynchronous update of the data.

此外，在加载布局后立即在 Widget 类中调用 _loadItems() 很重要，以确保获取数据:

Also, it's important to call _loadItems(), in the Widget class, immediately after the layout has been loaded, to make sure that the data is fetched:

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _loadItems(context));
  }

遵循完整的示例代码:

void main() {
  runApp(MaterialApp(home: HomeScreen(), title: 'Flutter Example'));
}

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

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

class _HomeScreenState extends State<HomeScreen> {
  List<String> _itemsList;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _loadItems(context));
  }

  void _loadItems() async {
    setState(() => _itemsList = await DBManager.selectItems());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: _width * 2,
          height: 50,
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child: AutoCompleteTextField(
            controller: txtAlbumSuggest,
            suggestions: _itemsList,
            clearOnSubmit: false,
            style: TextStyle(color: Colors.black, fontSize: 15),
            decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20.5))),
            itemFilter: (item, query) {
              return item.toLowerCase().startsWith(query.toLowerCase());
            },
            itemSorter: (a, b) {
              return a.compareTo(b);
            },
            itemSubmitted: (item) {
              txtAlbumSuggest.text = item;
            },
            itemBuilder: (context, item) {
              return Container(
                padding: EdgeInsets.all(20.0),
                child: Row(
                  children: <Widget>[
                    Text(
                      item,
                      style: TextStyle(color: Colors.black),
                    )
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

这篇关于Flutter - 来自 SQLite 的 TextField 自动完成建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！