flutter 界面由swiper和gridview组成。实现gridview滑动时带动swiper一起滑动效果。

如图效果：

实现思路是用CustomScrollView 里面包裹着swiper和sliverGrid.

因为customScrollView里面只能是sliver类型的布局。不可以直接放widget。所有我把swiper用SliverToBoxAdapter包了一层。

代码如下：重点部位，如何让CustomScrollView里面放swiper呢。因为需要放的是sliver类型的，所以把swiper用SliverToBoxAdapter包裹一层。swiper作为子view。其它view也可以用SliverToBoxAdapter包裹进行转换。

完整代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_aisino_project/model/huiyuan_bean.dart';
import 'package:flutter_aisino_project/model/huiyuan_product_bean.dart';
import 'package:flutter_aisino_project/net/huiyuan_dao.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_aisino_project/r.dart';

class HuiYuanHome extends StatefulWidget {
  HuiYuanHome({Key key}) : super(key: key);

  @override
  _HuiYuanHomeState createState() {
    return _HuiYuanHomeState();
  }
}

class _HuiYuanHomeState extends State<HuiYuanHome> {
  List<Content> huiyuanList = [];
  List images = [R.assetsImgsHuiyuanBanner, R.assetsImgsHuiyuanBanner1];

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

  _loadData() async {
    try {
      List<Content> list = await HuiYuanDao.fetch();
      setState(() {
        // resultString = json.encode(model.config);
        huiyuanList = list;
      });
    } catch (e) {
      print(e);
    }
  }

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

  final ScrollController controller = ScrollController(initialScrollOffset: 0);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text('会员购买'),
      ),
      body: Container(
          child:CustomScrollView(
            controller: controller,
            physics: const BouncingScrollPhysics(
                parent: AlwaysScrollableScrollPhysics()),
            slivers: <Widget>[
              //SliverToBoxAdapter, 包裹在普通的widget外层。则转为了sliver类型
              SliverToBoxAdapter(
                child:_swiperView(),
              ),
              ///列表区域
              SliverPadding(
                padding: EdgeInsets.all(10),
                sliver: SliverGrid(
                  //此代理设置 gridview横向间距。纵向间距
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    //一行多少个
                    crossAxisCount: 2,
                    // 上下间隔
                    mainAxisSpacing: 25,
                    // 左右间隔
                    crossAxisSpacing: 10,
                    //宽高比
                    // childAspectRatio: 2,
                  ),

                  ///代理显示item
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return Column(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Container(
                              child: Image.network(
                                huiyuanList[index].imgurl,
                              ),
                            ),
                          ),
                          SizedBox(
                            height: 5,
                          ),
                          Padding(
                              padding: EdgeInsets.only(left: 5),
                              //是上面左右边距的一半。才能保证图片和文字左对齐
                              child: FractionallySizedBox(
                                child: Text(
                                  huiyuanList[index].spmc,
                                  style: TextStyle(
                                      fontWeight: FontWeight.w600,
                                      fontSize: 12),
                                ),
                                widthFactor: 1,
                              )),
                          SizedBox(
                            height: 5,
                          ),
                          Padding(
                              padding: EdgeInsets.only(left: 5),
                              child: Container(
                                child: Text(
                                  huiyuanList[index].spjs,
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                      color: Color(0xFF999999), fontSize: 11),
                                ),
                              )),
                        ],
                      );
                    },
                    childCount: huiyuanList.length ?? 0,
                  ),
                ),
              ),
            ],
          ),
      //   ],
      // )
    ),
    );
  }

  Widget _swiperView() {
    return Container(
      height: 130,
      child: Swiper(
        itemCount: images.length,
        autoplay: true,
        itemBuilder: (BuildContext context, int index) {
          return Image.asset(
            images[index],
            fit: BoxFit.fill,
          );
        },
        pagination: SwiperPagination(), //底部的指示器，小圆点。
      ),
    );
  }

}