flutter - 如何在 Flutter 中实现搜索过滤器内联？

Question

答：我的主屏幕上调用了这个类别小部件。我使用 Provider 在点击时创建了一个导航，它将类别 ID 和名称传递给新屏幕。我想要的是新的屏幕应该只显示与传递的类别 ID 或名称相对应的过滤列表。

class CategoryWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Categories _data = Provider.of<Categories>(context);

    return Container(
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return GestureDetector(
            child: CategoryCard(
              icon: Icon(Icons.ac_unit_outlined),
              name: _data.categories[index].categoryName,
              image: _data.categories[index].categoryImage,
            ),
            onTap: () {
              Navigator.pushNamed(context, FilteredCategoryView.routeName,
                  arguments: _data.categories[index].categoryId);
            },
          );
        },
        itemCount: _data.categories.length,
      ),      
    );
  }
}

---

B. My Category 模型类

class Category with ChangeNotifier {
  String categoryId;
  String categoryName;
  Image categoryImage;

  Category(
      {@required this.categoryId,
      @required this.categoryName,
      @required this.categoryImage});
}

class Categories with ChangeNotifier {
  List<Category> _categories = [
    Category(
      categoryId: '01',
      categoryName: 'Veggies',
      categoryImage: Image.asset('assets/images/apples.png'),
    ),
    Category(
      categoryId: '02',
      categoryName: 'Fruits',
      categoryImage: Image.asset('assets/images/leo.png'),
    ),
    Category(
      categoryId: '03',
      categoryName: 'Grains',
      categoryImage: Image.asset('assets/images/leo.png'),
    ),
    Category(
      categoryId: '04',
      categoryName: 'Meat',
      categoryImage: Image.asset('assets/images/leo.png'),
    ),
    Category(
      categoryId: '05',
      categoryName: 'Lentils',
      categoryImage: Image.asset('assets/images/leo.png'),
    ),
    Category(
      categoryId: '06',
      categoryName: 'Veggies',
      categoryImage: Image.asset('assets/images/leo.png'),
    ),
    Category(
      categoryId: '07',
      categoryName: 'Others',
      categoryImage: Image.asset('assets/images/leo.png'),
    ),
  ];

  // Since _category List is private we need a getter method to access this list
  List<Category> get categories {
    return [..._categories];

  }

  //
  Category findById(String id) {
    return _categories.firstWhere((product) => product.categoryId == id);
  }
}

---

标签： flutterdart