如何根据另一个小部件的点击方法刷新小部件

如何解决如何根据另一个小部件的点击方法刷新小部件

在我的 Flutter UI 中，我想在用户选择特定类别时刷新项目列表。我还想让所选类别成为活动类别。这是我的用户界面的样子：

这是我显示类别的代码：

@override
  Widget build(BuildContext context) {
     var categoriesData =   Provider.of<Categories>(context);
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,children: categoriesData.items
          .map(
            (catData) => CategoryItemNew(
                  id:catData.id,title:catData.title,isActive:categoriesData.items.indexOf(catData)==0?true:false
                ),)
          .toList(),),);
  }

这是每个类别项目的代码：

class CategoryItemNew extends StatefulWidget {
  final String title;
  final String id;
  bool isActive;
  final Function press;
  CategoryItemNew({
    @required this.id,@required this.title,this.isActive
  });

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

class _CategoryItemNewState extends State<CategoryItemNew> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => selectCategory(context),child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 15),child: Column(
          children: <Widget>[
            Text(
              widget.title,style: widget.isActive
                  ? TextStyle(
                      color: kTextColor,fontWeight: FontWeight.bold,)
                  : TextStyle(fontSize: 12),if (widget.isActive)
              Container(
                margin: EdgeInsets.symmetric(vertical: 5),height: 3,width: 22,decoration: Boxdecoration(
                  color: kPrimaryColor,borderRadius: BorderRadius.circular(10),],);
  }

  void selectCategory(BuildContext ctx) {
   // What should I do here? 
  }
}

这是显示产品的代码：

class ItemList extends StatefulWidget {
  static const routeName = '/item-list';
  String title = ''; 
  ItemList(this.title);  

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

class _ItemListState extends State<ItemList> {
  var _isInit = true;
  var _isLoading = false;
 

   void didChangeDependencies() {
    if (_isInit) {
      setState(() {
        _isLoading = true;
      });
       Provider.of<Products>(context).fetchAndSetProducts(widget.title,true).then((_) {
        setState(() {
          _isLoading = false;
        });
      });
    }
    _isInit = false;
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
     final productsData =   Provider.of<Products>(context); 
    return _isLoading? CircularProgressIndicator():SingleChildScrollView(
      scrollDirection: Axis.horizontal,child: Row(
         children:productsData.items
          .map(
            (productData) => ItemCard(
                  svgSrc: "assets/icons/burger_beer.svg",//id:catData.id,title: productData.title
                  //title:productData.title,);
  }
}

当应用程序启动时，我能够获取类别，还能够显示“汉堡包和包裹”类别的项目。但是，我不知道当用户选择另一个类别时如何刷新项目列表，也不知道如何使该类别成为活动类别。

在 Mickael 的回应后更新了 CategoryItem 类

 String prevIoUsId =''; 
// ignore: must_be_immutable
class CategoryItemNew extends StatefulWidget {
  final String title;
  final String id;
  bool isActive;
  final Function press;
  CategoryItemNew({
    @required this.id,this.isActive,});
  @override
  _CategoryItemNewState createState() => _CategoryItemNewState();

}

class _CategoryItemNewState extends State<CategoryItemNew> {

  String id; 
  ValueNotifier valueNotifier;
   
  void initState() {
    id = widget.id;
   valueNotifier = ValueNotifier(prevIoUsId);
   print('ID in initstate is ' + id); 
    super.initState();
  }

  isIdUpdated(String id) {
     print('prevIoUs in updateid is ' + prevIoUsId);
    if(prevIoUsId != id)
    { 
      prevIoUsId = id; 
     valueNotifier.value = id;
     print('ID in updateid is ' + id); 
    }
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => selectCategory(context),);
  }

  ValueListenableBuilder selectCategory(BuildContext ctx) {
     isIdUpdated(id); 
   return ValueListenableBuilder(
      valueListenable: valueNotifier,builder: (context,value,child) {
        print('inside listenabele builder'); 
        return ItemList(widget.title);
      },);
  }

   
}

请注意，我在 ValueListenableBuilder 的构建器中有一个打印语句。这个打印语句永远不会被执行。我做错了什么？

解决方法

您必须添加一个 ValueListener 来监听您要显示的类别的值。当您点击一个类别时，您必须将新值添加到您的 ValueListener 中。

完成后，创建一个 ValueListenableBuilder，每次其值更改时都会构建。在构建器中，您可以根据您正在收听的值显示您想要的小部件。

编辑：“活动”类别的相同内容，您可以使用相同的值。