Flutter 商品列表页面开发：实现轮播图和商品列表联动滚动

import 'package:flutter/material.dart'; import 'package:search_choices/search_choices.dart'; import 'package:video_book_ecommerce/compoment/ProductCard.dart'; import 'package:video_book_ecommerce/compoment/swipper.dart'; import 'package:video_book_ecommerce/model/product.dart'; import 'package:video_book_ecommerce/service/GetProduct.dart';

class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); }

class _HomeState extends State { var _productList = []; int _currentPage = 1; int _pageSize = 20; bool _isLoading = false;

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

void _getProducts() async { setState(() { _isLoading = true; }); List productList = await GetProduct.getProducts(_currentPage, _pageSize); setState(() { _productList.addAll(productList); _isLoading = false; }); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品列表'), ), body: NotificationListener( onNotification: (ScrollNotification notification) { if (!_isLoading && notification.metrics.pixels == notification.metrics.maxScrollExtent) { _currentPage++; _getProducts(); return true; } return false; }, child: ListView( children: [ Container( height: 200, child: MySwipper(), ), SizedBox(height: 10), _isLoading ? Center(child: CircularProgressIndicator()) : SizedBox.shrink(), GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 0.2, // 调整商品卡片宽高比 ), itemCount: _productList.length, shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemBuilder: (BuildContext context, int index) { product products = _productList[index]; return ProductCard( imageUrl: products.imageUrl, title: products.name, price: products.price.toString(), ); }, ), ], ), ), ); } }

// 让轮播图一起滚动内容：要让轮播图和商品列表一起滚动，可以将它们放在同一个滚动视图中，这样它们就会一起滚动。可以将轮播图和商品列表放在一个 Column 中，然后将 Expanded 包裹的 GridView 改为一个 ListView，这样就可以让它们一起滚动了。

// 以下是修改后的代码：

import 'package:flutter/material.dart';
import 'package:search_choices/search_choices.dart';
import 'package:video_book_ecommerce/compoment/ProductCard.dart';
import 'package:video_book_ecommerce/compoment/swipper.dart';
import 'package:video_book_ecommerce/model/product.dart';
import 'package:video_book_ecommerce/service/GetProduct.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _productList = [];
  int _currentPage = 1;
  int _pageSize = 20;
  bool _isLoading = false;

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

  void _getProducts() async {
    setState(() {
      _isLoading = true;
    });
    List productList = await GetProduct.getProducts(_currentPage, _pageSize);
    setState(() {
      _productList.addAll(productList);
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          if (!_isLoading &&
              notification.metrics.pixels == notification.metrics.maxScrollExtent) {
            _currentPage++;
            _getProducts();
            return true;
          }
          return false;
        },
        child: ListView(
          children: [
            Container(
              height: 200,
              child: MySwipper(),
            ),
            SizedBox(height: 10),
            _isLoading ? Center(child: CircularProgressIndicator()) : SizedBox.shrink(),
            GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 0.2, // 调整商品卡片宽高比
              ),
              itemCount: _productList.length,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int index) {
                product products = _productList[index];
                return ProductCard(
                  imageUrl: products.imageUrl,
                  title: products.name,
                  price: products.price.toString(),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

在修改后的代码中，我们将 GridView.builder 改为了一个 ListView，并将它们放在了一个 NotificationListener 中，这样就可以让它们一起滚动了。同时，我们还在 ListView 中添加了一个 SizedBox，用于显示加载中的进度条。