flutter - 颤动如何更新网格视图

Question

我有网格视图显示列表中的所有数据，并且我已经从低到高的价格等值下拉，当用户选择任何值时，我将在此时重新对列表进行排序，所有工作正常并且列表已更新，但网格视图 stell与旧清单。

我无法更新网格视图

class ProductsListState extends State<ProductsList> {
  double width;
  String _title;
  String _selectedSort;
  String _language;
  ProductsListState(this._title);
  List productsList;
  int filter;

  @override
  Widget build(BuildContext context) {
    MediaQueryData deviceInfo = MediaQuery.of(context);
    width = deviceInfo.size.width;
    _language = _language ?? AppLocalizations.of(context).tr('lang');
    filter = filter ?? 1;
    _selectedSort ??= getSortFilter(_language)[0];
    productsList = (productsList ?? getProductsList(filter));
    print(productsList);
    print(filter);

    var size = MediaQuery.of(context).size;
    var data = EasyLocalizationProvider.of(context).data;
    return EasyLocalizationProvider(
      data: data,
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Color.fromRGBO(205, 14, 64, 1),
          appBar:
              MarketinoAppBar(title: _title, width: width, appContext: context),
          body: Stack(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 13.0,
                      color: Colors.black.withOpacity(.5),
                      offset: Offset(6.0, 7.0),
                    ),
                  ],
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20)),
                ),
              ),
              Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsetsDirectional.fromSTEB(0, 0, 20, 0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text('SORT BY: '),
                        DropdownButton<String>(
                          value: _selectedSort,
                          onChanged: (value) {
                            setState(() {
                              productsList.sort(
                                  (a, b) => a['price'].compareTo(b['price']));
                              _selectedSort = value;
                              filter = 2;
                            });
                          },
                          items: getSortFilter(_language).map((String value) {
                            return DropdownMenuItem<String>(
                              value: value,
                              child: Text(value),
                            );
                          }).toList(),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    child: filter == 1
                        ? Grid(productsList, width, size)
                        : Grid(getProductsList(2), width, size),
                  )
                ],
              )
            ],
          ),
        ),
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          EasylocaLizationDelegate(locale: data.locale, path: "assets/language")
        ],
        supportedLocales: [Locale('en', 'US'), Locale('ar', 'SA')],
        locale: data.savedLocale,
      ),
    );
  }

  //replace by json
  List getProductsList(int filter) {
    List list = [];
    list.add({
      "id": "1",
      "name": "sssss",
      "imageUrl": "assets/images/Frozen Food.jpg",
      "description": "qwerfghjhgfdsaasdfghnjmhgfdsa",
      "price": "110",
      "quantity": "1",
      "isLiked": "false",
      "max": "5"
    });
    list.add({
      "id": "2",
      "name": "sssss",
      "imageUrl": "assets/images/Frozen Food.jpg",
      "description": "qwerfghjhgfdsaasdfghnjmhgfdsa",
      "price": "112",
      "quantity": "1",
      "isLiked": "true",
      "max": "5"
    });
    list.add({
      "id": "3",
      "name": "sssss",
      "imageUrl": "assets/images/Frozen Food.jpg",
      "description": "qwerfghjhgfdsaasdfghnjmhgfdsa",
      "price": "114",
      "quantity": "1",
      "isLiked": "true",
      "max": "10"
    });
    list.add({
      "id": "4",
      "name": "sssssssssssssssssssssssssssssssssssssssssssssssssssssssszzzzz",
      "imageUrl": "assets/images/Frozen Food.jpg",
      "description": "qwerfghjhgfdsaasdfghnjmhgfdsa",
      "price": "11",
      "quantity": "1",
      "isLiked": "false",
      "max": "1"
    });
    list.add({
      "id": "5",
      "name": "sssss",
      "imageUrl": "assets/images/Frozen Food.jpg",
      "description": "qwerfghjhgfdsaasdfghnjmhgfdsa",
      "price": "110",
      "quantity": "1",
      "isLiked": "false",
      "max": "15"
    });
    switch (filter) {
      case 1:
        list.sort((a, b) => a['id'].compareTo(b['id']));
        break;
      case 2:
        list.sort((a, b) => a['price'].compareTo(b['price']));
        break;
    }
    return list;
  }

  List<String> getSortFilter(String language) {
    if (language == 'english')
      return [
        "الأكثر رواجا",
        "السعر من الأقل للأعلى",
        "السعر من الأعلى للأقل",
        "التخفيضات",
      ];
    else
      return [
        "Popularty",
        "Price: Low to High",
        "Price: High to Low",
        "Discount",
      ];
  }
}

class Grid extends StatefulWidget {
  List productsList;
  var _width;
  var _size;

  Grid(this.productsList, this._width, this._size);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return GridState(productsList, _width, _size);
  }
}

class GridState extends State<Grid> {
  List productsList;
  var _width;
  var _size;

  GridState(this.productsList, this._width, this._size);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: new GridView.builder(
            itemCount: productsList.length,
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: _width > 600 ? 3 : 2,
              childAspectRatio: _width > 600 ? 0.6 : _width > 400 ? .725 : .685,
//                    childAspectRatio: (_itemWidth / _itemHeight),
            ),
            itemBuilder: (BuildContext context, int index) {
              return ProductGridTile(
                  price: double.parse(productsList[index]['price']),
                  width: _size.width,
                  image: productsList[index]['imageUrl'],
                  title: productsList[index]['name'],
                  likeStatus: productsList[index]['isLiked'] == 'true',
                  max: double.parse(productsList[index]['max']),
                  id: int.parse(productsList[index]['id']));
            }),
      ),
    );
  }
}

重新排序列表后更新gridview

标签： flutter

Answer 1

您在方法内部进行了一些操作build()，当您调用setState()这些操作时，会再次调用这些操作。检查该部分并尝试以这种方式更新列表：

productsList = List.from(productsList)..sort(
        (a, b) => a['price'].compareTo(b['price']));