flutter

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 和 done.This 也会使屏幕每个部分的滚动独立于各自部分的其他部分，但两者都可以移动使用父列表。

flutter - Listview 如何在 tabBar 旁边像往常一样滚动？

flutter - how can Listview be able to scroll as usual beside tabBar?

listview

tabbar

dart