flutter - Listview如何能够像往常一样滚动tabBar？

Question

我想在主屏幕上构建一个UI，其中有一个Carousel元素，然后是TabBar。我使用Listview来保持它，但为什么它滚动它不像往常一样？在TabBar元素的列表和主屏幕上的整个元素之间滚动它。

看到这个

我的身体代码：

 @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<MainModel>(builder: (context, child, model) {
      return ListView(
        shrinkWrap: true,
        children: <Widget>[
          Padding(
              padding: EdgeInsets.symmetric(vertical: 10.0), child: instance),
          TabBar(
            isScrollable: false,
            unselectedLabelColor: Color(0xffD8D8DC),
            labelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.tab,
            indicator: BubbleTabIndicator(
              indicatorHeight: 25.0,
              indicatorColor: Colors.black,
              tabBarIndicatorSize: TabBarIndicatorSize.tab,
            ),
            tabs: <Widget>[
              Tab(text: "Categories"),
              Tab(text: "Popular"),
              Tab(text: "What's New"),
            ],
            controller: _carouselController,
          ),
          Container(
            height: 320.0,
            child: TabBarView(
              controller: _carouselController,
              children: <Widget>[
                model.isLoading ? LoadingProgress() : CategoriesTab(),
                PopularTab(),
                WhatsNewTab(),
              ],
            ),
          ),
        ],
      );
    });
  }
}

final List<String> imgList = [
  'https://image01.kota.com/20140403023925/0000/0000/0046/9681/13sep18bliblimcd.jpg',
  'http://pallibazar.com/pub/media/wysiwyg/images/sliders/top-slider-banner-grocery-2.jpg',
  'https://www.familydollar.com/content/dam/familydollar/1.14/FD84881_PTH_WeeklySlider_1.15.png',
  'http://www.beshoffbros.com/wp-content/uploads/2017/01/Beshoff_Hake_Slider.jpg',
];

List<T> map<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }

  return result;
}

//Carousel
final CarouselSlider instance = CarouselSlider(
  items: imgList.map((url) {
    return Container(
        margin: EdgeInsets.all(5.0),
        decoration: new BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: new BorderRadius.circular(10.0),
            boxShadow: <BoxShadow>[
              new BoxShadow(
                  color: Colors.black38,
                  blurRadius: 2.0,
                  spreadRadius: 1.0,
                  offset: new Offset(0.0, 1.0)),
            ]),
        child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(5.0)),
            child: CachedNetworkImage(
                imageUrl: url,
                fit: BoxFit.cover,
                fadeInCurve: Curves.fastOutSlowIn,
                width: 700.0,
                placeholder: Center(
                  child: SpinKitFadingCube(
                    color: Colors.orangeAccent,
                    size: 30,
                  ),
                ))));
  }).toList(),
  viewportFraction: 0.9,
  aspectRatio: 2.0,
  autoPlay: true,
);

任何答案都会欣赏。

Answer 1

将你的carousel包裹在Container中：

 Container(
 height: MediaQuery.of(context).size.height/3 ;
 child : instance
 ),

为标签栏执行相同的操作：

 Container(
 height: MediaQuery.of(context).size.height/3 ;
 child : //Your TabBar here
 ),

之后，将它们插入您的父级ListView并完成。这也将使屏幕的每个部分上的滚动独立于其各自的部分，但是可以使用父列表移动它们。