单击类别时刷新菜单项颤动

Question

我有一个 UI，顶部是类别，底部是类别项

我希望能够在单击特定类别时刷新类别项目以及类别标题（位于类别项目正上方）。到目前为止，我已经能够显示类别并显示第一个类别的类别项目。但是，我不知道如何在选择特定类别时刷新类别列表。这是我的代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var loadedProduct;
  void didChangeDependencies() async {
  //Fetches the categories 
  Provider.of<Categories>(context, listen: false)
            .fetchAndReturnCategories();
   //Fetches category items under "Burgers & Sanwiches" 
   Provider.of<Products>(context).fetchAndSetProducts('BURGERS & SANWICHES', true);
    super.didChangeDependencies();

  }
  @override
  Widget build(BuildContext context) {
     var categoriesData = Provider.of<Categories>(context);
      final productsData =   Provider.of<Products>(context);
     var chosenCategory= categoriesData.items[0].title;
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        backgroundColor: Colors.grey[100],
        elevation: 0,
        brightness: Brightness.light,
        leading: Icon(null),
        actions: <Widget>[
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.shopping_basket, color: Colors.grey[800],),
          )
        ],
      ),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  FadeAnimation(1, Text('Categories', style: TextStyle(color: Colors.grey[80], fontWeight: FontWeight.bold, fontSize: 30),)),
                  SizedBox(height: 20,),
                  Container(
                    height: 50,
                    child: ListView(
                      scrollDirection: Axis.horizontal,
                      children: <Widget>
                       [
                         for(int i = 0; i < categoriesData.items.length;i++)  
                           FadeAnimation(1, makeCategory(isActive: true, title: categoriesData.items[i].title))
                       ],
                    ),
                  ),
                  SizedBox(height: 10,),
                ],
              ),
            ),
            FadeAnimation(1, Padding(
              padding: EdgeInsets.all(20),
              child: Text(chosenCategory, style: TextStyle(color: Colors.grey[700], fontSize: 20, fontWeight: FontWeight.bold),),
            )),
           Expanded(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 20.0),
                child: ListView(
                  scrollDirection: Axis.horizontal,
                   
                  children: <Widget>
                       [
                         for(int i = 0; i < productsData.items.length;i++)  
                            FadeAnimation(1.4, makeItem(image: 'assets/images/one.jpg',title:productsData.items[i].title,price:productsData.items[i].price))
                       ],
                ),
              ),
            ),
            SizedBox(
              height: 30,
            )
          ],
        ),
      ),
    );
  }

  Widget makeCategory({isActive, title}) {
    return AspectRatio(
      aspectRatio: isActive ? 3 : 2.5 / 1,
      child: InkWell(child:Container(
        margin: EdgeInsets.only(right: 10),
        decoration: BoxDecoration(
          color: isActive ? Colors.yellow[700] : Colors.white,
          borderRadius: BorderRadius.circular(50),
        ),
        child: Align(
          child: Text(title, style: TextStyle(color: isActive ? Colors.white : Colors.grey[500], fontSize: 18, fontWeight: isActive ? FontWeight.bold : FontWeight.w100),),
        ),
      ),
      onTap:(){
        print(title + 'was tapped');}
    ));
  }

  Widget  makeItem({image,title,price}) {
    return AspectRatio(
      aspectRatio: 1 / 1.5,
      child: GestureDetector(
        child: Container(
          margin: EdgeInsets.only(right: 20),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            image: DecorationImage(
              image: AssetImage(image),
              fit: BoxFit.cover,
            )
          ),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              gradient: LinearGradient(
                begin: Alignment.bottomCenter,
                stops: [.2, .9],
                colors: [
                  Colors.black.withOpacity(.9),
                  Colors.black.withOpacity(.3),
                ]
              )
            ),
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Align(
                    alignment: Alignment.topRight,
                    child: Icon(Icons.favorite, color: Colors.white,),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("\usd. $price", style: TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold),),
                      SizedBox(height: 10,),
                      Text("$title", style: TextStyle(color: Colors.white, fontSize: 20),)
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

我认为这里的问题是您没有使用 setState。当您按下按钮时，您需要使用 setState

  setState(() {
    "here you need to set the new value of your category list"
  });

使用 setstate 后，列表应更新为新值