listview - 颤动 - Listview 如何能够像往常一样在 tabBar 旁边滚动?
问题描述
我想在主屏幕上构建一个 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,
);
任何答案都会很高兴。
解决方案
把你包在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
级并完成。这也将使屏幕每个部分的滚动独立于其各自部分的另一个,但都可以使用父列表移动。
推荐阅读
- java - 如何在quarkus上设置http线程池最大大小
- python - kaggle:在 ubuntu 18 上找不到命令
- android - 使用 Cordova 在 Android 上通过 Apple 登录
- javascript - 错误:expiresIn 应该是秒数或字符串代表
- r - 通过单击列名排列 kable 交互式表格
- node.js - 想知道,如何使用 Gridfs 使用 express、mongoose、mongodb 上传超过 16mb 的文件/视频
- sql - 根据日期从多个表中获取 TOP 1 行
- java - C# AES 加密到 java 8 解密
- javascript - 如何存储来自另一个组件数据的值?
- google-apps-script - 在 Google App 脚本中更改条件格式优先级