трепетание - как Listview может прокручиваться как обычно рядом с tabBar? - PullRequest
Новая
       9

трепетание - как Listview может прокручиваться как обычно рядом с tabBar?

0 голосов
/ 13 февраля 2019

Я хочу создать пользовательский интерфейс на домашнем экране, где есть элемент Carousel, а затем TabBar под ним.Я использую Listview, чтобы удержать его, но почему при прокрутке это не так, как обычно?Прокрутите его между списком элемента TabBar и целым элементом на домашнем экране.

см. GIF

мой код в теле: 

 @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,
);

любой ответ будет оценен.

1 Ответ

0 голосов
/ 13 февраля 2019

оберните 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 и готово. Это также сделает прокрутку в каждой части экрана независимой от другой в их соответствующих частях, но обе они могут быть перемещены с использованием родительского списка.

...