listview - 如何在 flutter 中准确使用 ListWheelScrollView？

Question

我看到了this article我想为我在 Univ 的最终项目实现 ListWheelScrollView。但是，作者的代码无法正常工作，我找不到确切的问题所在。我怎样才能像下面这样制作动画？

我的代码和作者一样，但是不起作用。

build() function of search_screen.dart

Widget build(BuildContext context) {
  OrientationFixer.fixPortrait();

  return FadeInScaffold(
    body: Container(
      width: double.infinity,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/cinema.jpg'),
          fit: BoxFit.cover,
          colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken)
        ),
      ),
      child: BlocBuilder<SearchEvent, SearchState>(
        bloc: _searchBloc,
        builder: (context, state) {
          if(state.isKeyboardOn) {
            _searchAnimationController.forward();
          }
          if(state.isKeyboardOff && _movieList.isEmpty) {
            _searchAnimationController.reverse();
            _searchBarController.clear();
          }
          if(state.isMovieAPICallSucceeded) {
            _movieList = state.movieList;
          }
          if(state.isMovieCrawlSucceeded) {
            _searchBloc.dispatch(SearchEventStateClear());
            BlocNavigator.push(context, 
              MaterialPageRoute(builder: (_)=>MovieScreen(movie: state.clickedMovie)));
          }
          return AnimatedBuilder(
            animation: _liftUpAnimation,
            builder: (context, widget){
              return Column(
                children: [
                  SizedBox(height: _liftUpAnimation.value),
                  SearchMessage(
                    fadeOutAnimation: _fadeOutAnimation,
                    liftUpAnimation: _liftUpAnimation
                  ),
                  SizedBox(height: 100.0),
                  Column(
                    children: [
                      SearchBar(
                        searchBarController: _searchBarController,
                        searchBloc: _searchBloc,
                      ),
                      Container(
                        height: 3.0,
                        width: MediaQuery.of(context).size.width*0.9,
                        color: Colors.white,
                      )
                    ],
                  ),
                  SearchResultForm(
                    movieList: _movieList,
                    searchBloc: _searchBloc,
                  )
                ],
              );
            }
          );
        }
      ),
    ),
  );
}

search_result_form.dart

class SearchResultForm extends StatefulWidget {

  final List<MovieModel> movieList;
  final SearchBloc searchBloc;

  const SearchResultForm({
    Key key, 
    @required this.movieList,
    @required this.searchBloc
  }) : super(key: key);

  @override
  _SearchResultFormState createState() => _SearchResultFormState();
}

class _SearchResultFormState extends State<SearchResultForm> {

  final FixedExtentScrollController _controller = FixedExtentScrollController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return BlocBuilder<SearchEvent,SearchState>(
      bloc: widget.searchBloc,
      builder: (context,state){
        if(state.isKeyboardOn){
          return SearchProcessingMessage(message: '영화를 검색해주세요.');
        }
        if(state.isMovieAPICallLoading) {
          return SearchProcessingMessage(message: '영화를 찾고 있습니다...');
        }
        if(state.isMovieAPICallSucceeded && widget.movieList.isEmpty) {
          return SearchProcessingMessage(message: '찾으시는 영화가 없습니다.');
        }
        return Expanded(
          child: ListWheelScrollView(
            controller: _controller,
            physics: FixedExtentScrollPhysics(),
            itemExtent: 300.0,
            children: widget.movieList.map((movie) => Column(
                children: <Widget>[
                  SearchMovieForm(
                    movie: movie,
                    searchBloc: widget.searchBloc,
                  ),
                  SizedBox(height: 30.0)
                ],
              )).toList()
          )
        );
      }
    );
  }
}

Answer 1

这段代码对我有用。我创建用于显示 ListWheelScroolView 的对话框。您可以根据您的用途修改此代码

List<String> nameList = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

void createScrollListDialog(BuildContext context) {
showCupertinoDialog(
    context: context,
    builder: (BuildContext ctx) {
      return Container(
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 100, bottom: 100),
        color: CupertinoColors.lightBackgroundGray,
        child: ListWheelScrollView(
            itemExtent: 40,
            useMagnifier: true,
            diameterRatio: 1.6,
            children: <Widget>[
              ...nameList.map((String name) {
                return Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: CupertinoColors.white,
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                          width: 1, color: CupertinoColors.inactiveGray)),
                  padding: EdgeInsets.all(10),
                  child: Text(name),
                );
              })
            ]),
      );
    });}