Flutter - 按名称查找卡片

Question

我是 Flutter 的新手，我有一个显示多张卡片的程序，我有一个关于如何制作卡片查找器的问题，我正在使用以下代码：

  _card(
    String phrase,
  ) {
    return SliverToBoxAdapter(
      child: Card(
        margin: EdgeInsets.only(right: 50, left: 50, top: 20),
        child: InkWell(
          onTap: () {},
          child: Column(children: <Widget>[
            SizedBox(height: 15.0),
            Padding(
              padding: EdgeInsets.only(left: 15, right: 15),
              child: Text(
                phrase,
                style: TextStyle(
                    fontFamily: 'Circular',
                    fontSize: 17.0,
                    color: Colors.grey[800]),
              ),
            ),
            SizedBox(height: 15.0),
          ]),
        ),
      ),
    );
  }

我用它来制作各种卡片：

return Scaffold(
      body: Stack(children: [
        CustomScrollView(physics: BouncingScrollPhysics(), slivers: <Widget>[
          _card('Abrir'),
          _card('Alzar'),
          _card('Aprender'),
          _card('Caer'),
          _card('Cerrar'),
          _card('Cocinar'),
          _card('Correr'),
          _card('Cortar'),
          _card('Enseñar'),
          _card('Estar'),
          _card('Hay'),
          _card('Levantarse'),
          _card('Mirar'),
          _card('Oler'),
          _card('Saltar'),
          _card('Sentar'),
          _card('Ser'),
          _card('Tocar'),
          _card('Tomar'),
          _card('Tropezar'),
        
        ]),
      
      ]),
    );

非常感谢任何帮助，谢谢

Answer 1

这是一个解决方案：

• hooks_riverpod 状态管理
• fuzzy 用于模糊搜索

完整的源代码，方便复制粘贴

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:fuzzy/fuzzy.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home: HomePage(),
      ),
    ),
  );
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final phrases = useProvider(filteredPhrasesProvider);
    return Scaffold(
      body: ListView(
        physics: BouncingScrollPhysics(),
        children: [
          TextField(
            autofocus: true,
            textAlignVertical: TextAlignVertical.center,
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.search),
              hintText: 'Search',
            ),
            onChanged: (value) =>
                context.read(searchTermsProvider).state = value,
          ),
          ...phrases.map((phrase) => _Card(phrase: phrase)).toList(),
        ],
      ),
    );
  }
}

class _Card extends StatelessWidget {
  final String phrase;

  const _Card({
    Key key,
    this.phrase,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10.0),
      child: InkWell(
        onTap: () {},
        child: Padding(
          padding: EdgeInsets.all(15.0),
          child: Text(
            phrase,
            style: TextStyle(
              fontFamily: 'Circular',
              fontSize: 17.0,
              color: Colors.grey[800],
            ),
          ),
        ),
      ),
    );
  }
}

final searchTermsProvider = StateProvider<String>((ref) => '');

final phrasesProvider = Provider<List<String>>(
  (ref) => [
    'Abrir',
    'Alzar',
    'Aprender',
    'Caer',
    'Cerrar',
    'Cocinar',
    'Correr',
    'Cortar',
    'Enseñar',
    'Estar',
    'Hay',
    'Levantarse',
    'Mirar',
    'Oler',
    'Saltar',
    'Sentar',
    'Ser',
    'Tocar',
    'Tomar',
    'Tropezar',
  ],
);

final filteredPhrasesProvider = Provider<List<String>>((ref) {
  final phrases = ref.watch(phrasesProvider);
  final searchTerms = ref.watch(searchTermsProvider).state;
  return searchTerms.isEmpty
      ? phrases
      : Fuzzy<String>(phrases, options: FuzzyOptions(threshold: .4))
          .search(searchTerms)
          .map((result) => result.item)
          .toList();
});

Answer 2

首先你必须改变你的代码逻辑，创建一个列表，然后创建卡片，这样搜索引擎才能使用列表

创建列表：

final List<String> actions = ["Abrir", "Alzar", "Enseñar", "Sentar", "Mirar"];

接下来，使用 List.generate 或 List.builder 在条子中创建卡片

return Scaffold(
  body: Stack(children: [
    CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: List.generate(actions.length, (i) => _cards(actions[i])
    ),
  ]),
);

最后在你的seacher中，使用这个逻辑，“contains”是可选的，你可以改变if中的逻辑

void search(String data) {
    for(int i = 0; i < actions.length; i++) {
      if(actions[i].contains(data)) {
         print(actions[i]);
         // In your case show card or add in another list to show after
      }
    }
}