Question

我正在构建一个用于Flutter培训的应用程序，但实际上我陷入了过滤器功能。

我有一个ListView，在这里我从TheMovieDB API和ModalBottomSheet上获取数据，其中的ModalBottomSheet具有三个FilterChips，用于选择过滤条件（受欢迎，评分最高和最新的电影）。

这就是我被困住的地方。当用户通过“ performUpdate（）”在ModalBottomSheet中按下“完成”按钮时，我想调用“ _loadNextPage（）”方法，但是我不能这样做，因为它们不在同一类中。

我将在下面粘贴代码以更好地理解。

class _HomePageState extends State<HomePage> {
  RequestProvider _requestProvider = new RequestProvider();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FluttieDB"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.filter_list),
            onPressed: () => buildFilterBottomSheet(),
          )
        ],
      ),
      body: MovieList(_requestProvider, _currentFilter),
    );
  }

  void buildFilterBottomSheet() {
    showModalBottomSheet(
        context: context,
        builder: (builder) {
          return Container(
            height: 150.0,
            decoration: BoxDecoration(color: Colors.white),
            child: Column(
              children: <Widget>[
                buildFilterTitle(context),
                Expanded(
                  child: _FilterChipRow(),
                ),
              ],
            ),
          );
        });
  }

  Widget buildFilterTitle(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0),
      alignment: Alignment.centerLeft,
      height: 46.0,
      decoration: BoxDecoration(color: Colors.blue),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Text(
            "Filter by",
            style: TextStyle(color: Colors.white, fontSize: 20.0),
          ),
          OutlineButton(
            onPressed: () => performUpdate(context),
            padding: const EdgeInsets.all(0.0),
            shape: const StadiumBorder(),
            child: Text(
              "Done",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  void performUpdate(BuildContext context) {
    MovieList _movieList = new MovieList(_requestProvider, _currentFilter);
    _movieList.createState()._loadNextPage();
    Navigator.pop(context);
  }
}



class MovieList extends StatefulWidget {
  MovieList(this.provider, this.currentFilter, {Key key}) : super(key: key);

  final RequestProvider provider;
  final String currentFilter;

  @override
  _MovieListState createState() => new _MovieListState();
}

class _MovieListState extends State<MovieList> {
  List<Movie> _movies = List();
  int _pageNumber = 1;
  LoadingState _loadingState = LoadingState.LOADING;
  bool _isLoading = false;

  _loadNextPage() async {
    _isLoading = true;

    try {
      var nextMovies = await widget.provider
          .provideMedia(widget.currentFilter, page: _pageNumber);

      setState(() {
        _loadingState = LoadingState.DONE;
        _movies.addAll(nextMovies);
        _isLoading = false;
        _pageNumber++;
      });
    } catch (e) {
      _isLoading = false;

      if (_loadingState == LoadingState.LOADING) {
        setState(() => _loadingState = LoadingState.ERROR);
      }
    }
  }

  @override
  void initState() {
    super.initState();
    _loadNextPage();
  }

  @override
  Widget build(BuildContext context) {
    switch (_loadingState) {
      case LoadingState.DONE:
        return ListView.builder(
            itemCount: _movies.length,
            itemBuilder: (BuildContext context, int index) {
              if (!_isLoading && index > (_movies.length * 0.7)) {
                _loadNextPage();
              }

              return MovieListItem(_movies[index]);
            });
      case LoadingState.ERROR:
        return Center(
            child: Text("Error retrieving movies, check your connection"));
      case LoadingState.LOADING:
        return Center(child: CircularProgressIndicator());
      default:
        return Container();
    }
  }
}

如您所见，我在performUpdate（）中进行了一些实验，但是它没有使用过滤器中的选定选项刷新ListView，而且我认为这不是实现我想要的最佳方法。

如果问题有点愚蠢，谢谢您。我是Flutter的新手。

Answer 1

Redux是一个很棒的状态管理库，它起源于React和JS，但已经移植到Dart，并且还具有特定的波动库。 Redux是一个非常强大的框架，它使用发布/订阅系统来允许您的视图订阅对模型的更改，同时使用“操作”和“归约器”系统来更新模型。

关于在Flutter can be found here中使用Redux进行启动和运行的出色教程

或者，您可以查看scoped model，这是另一个用于抖动的状态管理库。作用域模型的能力较弱，但对于简单的用例来说可能绰绰有余。

进一步阅读：

管理另一班上一页的状态

1 个答案: