列表视图生成器颤振

Question

我试图从全局变量类中获取数据，然后在 ListView 构建器中显示它，但 ListView 从全局变量数组中返回 null。 但是当我热重新加载页面时，它会在小部件中显示数据，但不会在初始状态下显示。 尝试使用 init state, Future builder 但打印显示全局变量数组不为空，但 ListView builder 将其视为空数组。 我是颤振的新手。 理论上，变量不会在第一次运行时存储来自全局变量的数据，但是当刷新页面或从任何其他页面返回时，它会显示数据，请帮助我。

import 'package:flutter/material.dart';
import 'package:food_express/classes/AllShefMold.dart';
import 'package:food_express/classes/TodaysLunch.dart';
import 'package:food_express/classes/menuClass.dart';
import 'package:food_express/constant/constant.dart';
import 'package:food_express/pages/restaurant/restaurant.dart';
import 'package:page_transition/page_transition.dart';
import '../../../constant/globals.dart' as global;

class FavouriteRestaurantsList extends StatefulWidget {
  FavouriteRestaurantsList({Key key}) : super(key: key);
  @override
  _FavouriteRestaurantsListState createState() =>
      _FavouriteRestaurantsListState();
}

class _FavouriteRestaurantsListState extends State<FavouriteRestaurantsList> {
  List<TodaysLunch> listDetails = [];
  var restaurantsList;
  @override
  initState() {
     restaurantsList = getItems();
    super.initState();
  }

 List<TodaysLunch> getItems() {
    List<TodaysLunch> listDetails = [];
    for (var shef in global.NearBy) {
      for (var lunch in shef.totalMenu) {
        if (lunch.type == "Todays Menu") {
          for (var item in lunch.menu) {
            TodaysLunch menu = TodaysLunch(shef, item.id, item.Category,
                item.Details, item.DishName, item.Price);
            listDetails.add(menu);
          }
        }
      }
    }
    return listDetails;
  }

  @override
  Widget build(BuildContext context) {
      double width = MediaQuery.of(context).size.width;
      return Column(
        children: [
          Padding(
            padding: EdgeInsets.all(fixPadding),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Todays Lunch',
                  style: headingStyle,
                ),
                InkWell(
                  onTap: () {
                    // Navigator.push(context, PageTransition(type: PageTransitionType.downToUp, child: MoreList()));
                  },
                  child: Text('View all', style: moreStyle),
                ),
              ],
            ),
          ),
          Container(
              width: width,
              height: 170.0,
              child: ListView.builder(
                        itemCount: restaurantsList.length,
                        scrollDirection: Axis.horizontal,
                        physics: BouncingScrollPhysics(),
                        itemBuilder: (context, index) {
                          final item = restaurantsList[index];
                          return InkWell(
                            onTap: () {
                              // Navigator.push(context, MaterialPageRoute(builder: (context)=>Restaurant(item)));
                              Navigator.push(
                                  context,
                                  PageTransition(
                                      type: PageTransitionType.fade,
                                      child: Restaurant(item.mold)));
                            },
                            child: Container(
                              width: 130.0,
                              decoration: BoxDecoration(
                                color: whiteColor,
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              margin: (index != (restaurantsList.length - 1))
                                  ? EdgeInsets.only(left: fixPadding)
                                  : EdgeInsets.only(
                                      left: fixPadding, right: fixPadding),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  Container(
                                    height: 110.0,
                                    width: 130.0,
                                    alignment: Alignment.topRight,
                                    padding: EdgeInsets.all(fixPadding),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.vertical(
                                          top: Radius.circular(5.0)),
                                      image: DecorationImage(
                                        image: NetworkImage(
                                            item.mold.DisplayImage),
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                    child: InkWell(),
                                  ),
                                  Container(
                                    width: 130.0,
                                    height: 50.0,
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Padding(
                                          padding: EdgeInsets.all(5.0),
                                          child: Text(
                                            item.DishName,
                                            style: listItemTitleStyle,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                        Padding(
                                          padding: EdgeInsets.only(
                                              left: 5.0, right: 5.0),
                                          child: Text(
                                            item.Details,
                                            style: listItemSubTitleStyle,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      ))]);
                    }



}

Answer 1

尝试使用 init state, Future builder 但打印显示全局变量数组不为空，但 ListView builder 将其视为空数组。

这种行为很正常。 即使您更新了变量（在这种情况下， restaurantsList数组填充了数据），框架也不会知道restaurantsList数组已更改； 因此，它不会更新屏幕中的视图或小部件。 这就是为什么在热重载时填充列表视图的原因，在热重载期间，框架会检查变量的状态，然后重建小部件。

要触发ListView的重建，您应该使用内置的setState方法或遵循任何状态管理工具。

@override
initState() {
  getItems();
  super.initState();
}

Future<void> getItems() async {
await Future.delayed(Duration(milliSeconds:500));
List<TodaysLunch> listDetails = [];
for (var shef in global.NearBy) {
  for (var lunch in shef.totalMenu) {
    if (lunch.type == "Todays Menu") {
      for (var item in lunch.menu) {
        TodaysLunch menu = TodaysLunch(shef, item.id, item.Category,
            item.Details, item.DishName, item.Price);
        listDetails.add(menu);
      }
    }
  }
}

setState(() {
    restaurantsList = listDetails;
});

}