在記憶體中更新串列不會改變Flutter中的UI

我目前正在修改我的應用程式以支持大型設備。在這個應用程式中，我想在左側有一個類別串列，當我點擊串列磁貼時，我想在左側顯示該類別所包含的專案串列。通過這種方法，我在記憶體中使用串列更新但不會更改 UI。這是我目前的方法->

class _OrderCategoryScreenState extends State<OrderCategoryScreen> {

  List<FoodItem> filteredLists = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Row(
        children: [
          ValueListenableBuilder<Box<FoodCategory>>(
            valueListenable: Boxes.getFoodCategories().listenable(),
            builder: (context, box, child) {
              final categories = box.values.toList().cast<FoodCategory>();
              return categories.length == 0
                  ? Container(
                      color: Color(0xFFFCF9F9),
                      height: double.infinity,
                      width: MediaQuery.of(context).size.height * 0.30,
                      child: Center(
                        child: Text("No Categories"),
                      ))
                  : Container(
                      height: double.infinity,
                      width: MediaQuery.of(context).size.height * 0.35,
                      child: Drawer(
                        backgroundColor: Color(0xFFFCF9F9),
                        elevation: 0,
                        child: ListView(
                          children: <Widget>[
                            DrawerHeader(
                              child: ListView(
                                children: [
                                  Container(
                                    height: MediaQuery.of(context).size.height,
                                    child: ValueListenableBuilder<
                                        Box<FoodCategory>>(
                                      builder: (context, value, child) {
                                        final foodCategories = box.values
                                            .toList()
                                            .cast<FoodCategory>();
                                        return ListView.builder(
                                          itemCount: foodCategories.length,
                                          itemBuilder: (context, index) {
                                            return ListTile(
                                              tileColor: Colors.green,
                                              
                                              onTap: () {
                                                filteredLists = Boxes
                                                        .getFoodItems()
                                                    .values
                                                    .where((element) =>
                                                        element.categoryName ==
                                                        foodCategories[index]
                                                            .name)
                                                    .toList();
                                                print(filteredLists.length);
                                                print("object");
                                              },
                                              title: Text(
                                                  foodCategories[index].name),
                                            );
                                          },
                                        );
                                      },
                                      valueListenable: Boxes.getFoodCategories()
                                          .listenable(),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ));
            },
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.5,
            height: MediaQuery.of(context).size.height * 0.5,
            color: Colors.amberAccent,
            child: filteredLists.isEmpty
                ? Center(
                    child: Text("Choose A Category"),
                  )
                : ListView.builder(itemCount: filteredLists.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(filteredLists[index].itemName),
                      );
                    },
                  ),
          ),
        ],
      )
      
      
      ),
    );
  }
}

當我使用這種方法進行熱多載時，它也適用于 UI。

請幫忙。

uj5u.com熱心網友回復：

嘗試呼叫 setState 來更新 UI。

onTap: () {
    filteredLists = Boxes
            .getFoodItems()
        .values
        .where((element) =>
            element.categoryName ==
            foodCategories[index]
                .name)
        .toList();
    print(filteredLists.length);
    print("object");
    setState((){}); //this
  },

標籤：扑镖颤振布局

上一篇：Flutter中的RiverPod無法正確使用TextField

下一篇：為什么螢屏不更新？