Flutter 删除 ListView 中的空白

Question

我想做一个电影封面的封面，包括两行，第一行从右向左旋转，第二行从左向右旋转。 我也给了他们一个角度

但是它们周围有一系列空白，并且列表视图不会展开 如何删除那个空白？

这是我的代码：

class _CinemaTopBannerState extends State<CinemaTopBanner> {
  late ScrollController _scrollControllerLeftToRight;
  late ScrollController _scrollControllerRightToLeft;

  @override
  void initState() {
    super.initState();
    _scrollControllerLeftToRight = ScrollController();
    _scrollControllerRightToLeft = ScrollController();

    // Start auto-scrolling for the first row (left to right)
    Timer.periodic(Duration(milliseconds: 30), (timer) {
      if (_scrollControllerLeftToRight.hasClients) {
        double newOffset = _scrollControllerLeftToRight.offset + 1;

        if (newOffset < _scrollControllerLeftToRight.position.maxScrollExtent) {
          _scrollControllerLeftToRight.animateTo(
            newOffset,
            duration: Duration(milliseconds: 30),
            curve: Curves.linear,
          );
        } else {
          // Reset the position if the end is reached
          _scrollControllerLeftToRight.jumpTo(0.0);
        }
      }
    });

    // Start auto-scrolling for the second row (right to left)
    Timer.periodic(Duration(milliseconds: 30), (timer) {
      if (_scrollControllerRightToLeft.hasClients) {
        double newOffset = _scrollControllerRightToLeft.offset - 1;

        if (newOffset > 0) {
          _scrollControllerRightToLeft.animateTo(
            newOffset,
            duration: Duration(milliseconds: 30),
            curve: Curves.linear,
          );
        } else {
          // Reset the position if the start is reached
          _scrollControllerRightToLeft.jumpTo(_scrollControllerRightToLeft.position.maxScrollExtent);
        }
      }
    });
  }

  @override
  void dispose() {
    _scrollControllerLeftToRight.dispose();
    _scrollControllerRightToLeft.dispose();
    super.dispose();
  }

  List<String> movieCovers = [
    "https://m.media-amazon.com/images/I/71eHZFw+GlL._AC_UF894,1000_QL80_.jpg",
   ...
  ];

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        SingleChildScrollView(
          padding: EdgeInsets.zero,
          physics: const NeverScrollableScrollPhysics(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 300,
                child: RotationTransition(
                  turns: const AlwaysStoppedAnimation(-29 / 360),
                  child: ListView.builder(
                    padding: EdgeInsets.zero,
                    scrollDirection: Axis.horizontal,
                    controller: _scrollControllerRightToLeft,
                    shrinkWrap: true,
                    itemCount: movieCovers.length,
                    reverse: true,
                    itemBuilder: (context, index) => _buildMovieCover(movieCovers[index]),
                  ),
                ),
              ),
              SizedBox(
                height: 50.w,
              ),
              SizedBox(
                height: 300,
                child: RotationTransition(
                  turns: const AlwaysStoppedAnimation(-29 / 360),
                  child: ListView.builder(
                    padding: EdgeInsets.zero,
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    controller: _scrollControllerLeftToRight,
                    reverse: true,
                    itemCount: movieCovers.length,
                    itemBuilder: (context, index) => _buildMovieCover(movieCovers[index]),
                  ),
                ),
              ),
            ],
          ),
        ),
        Container(
          width: 390.w,
          height: 810.w,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment(0.00, -1.00),
              end: Alignment(0, 1),
              colors: [Colors.white, Colors.white.withOpacity(0), Colors.white],
            ),
          ),
        ),
        SizedBox(
          width: 265.w,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                Env.cinemaTitle,
                style: AppTextTheme.tvWidgetsTitleBanner,
              ),
              SizedBox(
                height: 8.w,
              ),
              Text(Env.cinemaTitleDescription, style: AppTextTheme.avaTvCinemaCartsDescription),
            ],
          ),
        )
      ],
    );
  }

  Widget _buildMovieCover(String coverPath) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: CachedNetworkImage(
          imageUrl: coverPath,
          width: 213.w,
          height: 316.w,
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

Answer 1

您可以尝试将两个旋转列表包装在 OverflowBox 中并设置 maxWidth begger 然后屏幕宽度：

...
SizedBox(
                height: 300,
                child: OverflowBox(
                  maxWidth: MediaQuery.of(context).size.width * 1.6,
                  child: RotationTransition(
                    turns: const AlwaysStoppedAnimation(-29 / 360),
                    child: ListView.builder(
                      padding: EdgeInsets.zero,
                      scrollDirection: Axis.horizontal,
                      controller: _scrollControllerRightToLeft,
                      shrinkWrap: true,
                      itemCount: movieCovers.length,
                      reverse: true,
                      itemBuilder: (context, index) => _buildMovieCover(movieCovers[index]),
                    ),
                  ),
                ),
              )
...